function StoryTakeover() {
  const secRef = React.useRef(null);
  const lineRefs = React.useRef([]);
  const starRef = React.useRef(null);
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const lines = [
    [{ t: 'Sinds ' }, { t: '1992', c: 'var(--mv-green)' }, { t: ' verhuren wij Groningen.' }],
    [{ t: 'Toen heetten we ' }, { t: 'Bulten', c: 'var(--mv-tangerine)' }, { t: ' Vastgoed.' }],
    [{ t: 'Nu heten we ' }, { t: 'Martini', c: 'var(--mv-pink)' }, { t: '.' }],
    [{ t: 'Zelfde mensen, nieuwe blik. ' }, { t: 'Net zo jong als de stad', c: 'var(--mv-green)' }, { t: '.' }],
  ];
  const lineWords = lines.map((parts) => {
    const words = [];
    parts.forEach((s) => {
      s.t.split(/(\s+)/).forEach((w) => {
        if (!w) return;
        if (/^\s+$/.test(w)) { if (words.length) words[words.length - 1].space = true; return; }
        words.push({ w, color: s.c || 'var(--mv-bone)', space: false });
      });
    });
    return words;
  });
  React.useEffect(() => {
    if (reduced) {
      lineRefs.current.forEach((el) => el && el.querySelectorAll('[data-w],[data-g]').forEach((s) => { s.style.opacity = '1'; s.style.transform = 'none'; }));
      return;
    }
    // motion.js heeft deze rig overgenomen, zie MOTION-PLAN.md sectie 2.
    if (window.MV_TAKEOVER) return;
    let raf = 0;
    const ease = (x) => 1 - Math.pow(1 - x, 3);
    const tick = () => {
      raf = 0;
      const vh = window.innerHeight;
      lineRefs.current.forEach((el) => {
        if (!el) return;
        const r = el.getBoundingClientRect();
        const p = Math.min(1, Math.max(0, (vh * 0.88 - r.top) / (vh * 0.46)));
        const spans = el.__w || (el.__w = el.querySelectorAll('[data-w]'));
        const ghosts = el.__g || (el.__g = el.querySelectorAll('[data-g]'));
        const n = spans.length;
        spans.forEach((s, j) => {
          const f = ease(Math.min(1, Math.max(0, p * (n + 3) - j)));
          const done = f >= 1;
          const y = done ? '' : `translate3d(0,${(1 - f) * 0.18}em,0)`;
          s.style.opacity = done ? '' : f;
          s.style.transform = y;
          s.style.willChange = done ? 'auto' : 'opacity, transform';
          if (ghosts[j]) { ghosts[j].style.transform = y; ghosts[j].style.willChange = done ? 'auto' : 'transform'; }
        });
      });
      const sec = secRef.current;
      if (sec && starRef.current) {
        const r = sec.getBoundingClientRect();
        starRef.current.style.transform = `translate3d(0,${((r.top + r.height / 2 - vh / 2) / vh) * -48}px,0)`;
      }
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    tick();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return (
    <section id="verhaal" ref={secRef} data-pin style={{ position: 'relative', background: 'var(--mv-ink)', color: 'var(--mv-bone)', borderBottom: '3px solid var(--mv-ink)', overflow: 'hidden', padding: 'clamp(5rem,14vh,9rem) var(--gutter) clamp(5rem,14vh,9rem)' }}>
      <div ref={starRef} aria-hidden="true" className="mvp-spine" style={{ position: 'absolute', top: 0, right: 'clamp(0.75rem,3vw,2.5rem)', height: '100%', display: 'flex', alignItems: 'center', gap: 'clamp(0.75rem,2vw,1.5rem)', pointerEvents: 'none', willChange: 'transform' }}>
        <span style={{ writingMode: 'vertical-rl', font: '700 var(--fs-label-sm)/1 var(--font-mono)', letterSpacing: '0.42em', textTransform: 'uppercase', color: 'var(--mv-bone)', opacity: 0.34 }}>Vismarkt 32 · Groningen</span>
        <span style={{ display: 'block', width: 2, height: 'clamp(120px,26vh,260px)', background: 'var(--mv-green)', opacity: 0.55 }}></span>
      </div>
      <div className="mvp-story-col" style={{ maxWidth: 'var(--maxw)', margin: '0 auto', width: '100%' }}>
        <p style={{ margin: '0 0 clamp(1.5rem,4vh,3rem)', font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-green)' }}>03 · Ons verhaal</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(0.6rem,2vh,1.4rem)' }}>
          {lineWords.map((words, i) => (
            <div key={i} ref={(el) => { lineRefs.current[i] = el; }} style={{ position: 'relative', font: '900 clamp(2rem,5.4vw,4.6rem)/1.02 var(--font-display)', letterSpacing: 'var(--ls-display)' }}>
              <span aria-hidden="true" style={{ color: 'var(--mv-bone)', opacity: 0.14 }}>{words.map((w, j) => <span key={j} data-g="" style={{ display: 'inline-block', willChange: 'transform' }}>{w.w}{w.space ? '\u00a0' : ''}</span>)}</span>
              <span style={{ position: 'absolute', inset: 0 }}>
                {words.map((w, j) => (
                  <span key={j} data-w="" style={{ display: 'inline-block', color: w.color, opacity: 0, willChange: 'opacity, transform' }}>{w.w}{w.space ? '\u00a0' : ''}</span>
                ))}
              </span>
            </div>
          ))}
        </div>
        <p style={{ margin: 'clamp(2rem,5vh,3.5rem) 0 0', maxWidth: '52ch', font: '400 var(--fs-body-lg)/var(--lh-body) var(--font-body)', color: 'var(--mv-bone-70)' }}>
          Ruim dertig jaar kamers, studio's en appartementen vanaf de Vismarkt. Winkel- en horecapanden ook. De naam is nieuw, het vakwerk niet.
        </p>
      </div>
      <style>{`@media(max-width:900px){.mvp-spine{display:none!important}}@media(min-width:901px){.mvp-story-col{padding-right:clamp(70px,7vw,130px)}}`}</style>
    </section>
  );
}
Object.assign(window, { StoryTakeover });