const { IndexTag } = window.MartiniVastgoedDesignSystem_adb8d1;

function FilmTakeover() {
  const secRef = React.useRef(null);
  const boxRef = React.useRef(null);
  const vidRef = React.useRef(null);
  const capRef = React.useRef(null);
  const [muted, setMuted] = React.useState(true);
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  React.useEffect(() => {
    // motion.js heeft deze rig overgenomen en drijft hem op één klok. Valt de
    // motion-laag uit, dan blijft de vlag false en draait dit gewoon.
    if (window.MV_TAKEOVER) return;
    if (reduced) return;
    let raf = 0;
    const tick = () => {
      raf = 0;
      const sec = secRef.current, box = boxRef.current, cap = capRef.current;
      if (!sec || !box) return;
      const vh = window.innerHeight;
      const p = Math.min(1, Math.max(0, (window.scrollY - sec.offsetTop) / (sec.offsetHeight - vh)));
      const e = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
      const capH = cap ? cap.offsetHeight : 0;
      const g = Math.min(28, vh * 0.035);
      const startH = vh - capH - g;
      const startW = window.innerWidth < 700 ? 91 : 62;
      box.style.width = `${startW + e * (100 - startW)}vw`;
      box.style.height = `${startH + (vh - startH) * e}px`;
      box.style.top = `${capH * (1 - e)}px`;
      const sh = Math.max(0, 14 * (1 - e * 1.6));
      box.style.boxShadow = `${sh}px ${sh}px 0 var(--mv-pink)`;
      box.style.borderWidth = `${Math.max(0, 3 * (1 - e * 1.4))}px`;
      if (cap) { cap.style.opacity = String(Math.max(0, 1 - p * 3)); cap.style.transform = `translateY(${p * -40}px)`; }
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    window.addEventListener('scroll', onScroll, { passive: true });
    tick();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  React.useEffect(() => {
    const v = vidRef.current;
    if (!v) return;
    const io = new IntersectionObserver(([en]) => { en.isIntersecting ? v.play().catch(() => {}) : v.pause(); }, { threshold: 0.15 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  return (
    <section ref={secRef} id="film" data-mv="film" data-pin style={{ position: 'relative', height: reduced ? 'auto' : '240vh', background: 'var(--mv-bone)', borderBottom: '3px solid var(--mv-ink)' }}>
      <div style={{ position: reduced ? 'relative' : 'sticky', top: 0, height: '100vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <div ref={capRef} data-filmcap style={{ flex: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'clamp(0.75rem,1.8vh,1.25rem)', textAlign: 'center', padding: 'clamp(2.5rem,7vh,4.5rem) var(--gutter) clamp(2rem,5vh,3.5rem)' }}>
          <IndexTag label="01 · De film" accent="pink" />
          <h2 style={{ margin: 0, font: '900 clamp(2rem,4.6vw,4rem)/0.95 var(--font-display)', letterSpacing: 'var(--ls-display)', color: 'var(--mv-ink)' }}>Zo voelt thuis<span style={{ color: 'var(--mv-pink)' }}>.</span></h2>
          <p style={{ margin: 0, font: '700 var(--fs-label)/1.4 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-ink-70)' }}>Scroll om af te spelen ↓</p>
        </div>
        <div style={{ flex: 1, minHeight: 0, display: 'grid', placeItems: 'center' }}>
        <div ref={boxRef} id="film-box" style={reduced ? { position: 'relative', width: '92vw', height: '96%', border: '3px solid var(--mv-ink)', boxShadow: '14px 14px 0 var(--mv-pink)', background: 'var(--mv-ink)', overflow: 'hidden' } : { position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: '30vh', width: '62vw', height: '58vh', border: '3px solid var(--mv-ink)', boxShadow: '14px 14px 0 var(--mv-pink)', background: 'var(--mv-ink)', overflow: 'hidden' }}>
          {/* De lijst en de roze slagschaduw als eigen laag. Onder de
              motion-laag doven ze terwijl de doos opengaat; een rand die naar
              nul krimpt is layout, een laag die dooft is verf. Zonder
              .mv-takeover staat deze span op display:none en houdt de doos
              zijn eigen rand, anders zou de lijst dubbel staan. */}
          <span data-filmframe aria-hidden="true"></span>
          <video ref={vidRef} src="assets/video-tuin-web.mp4" muted={muted} loop playsInline preload="metadata" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}></video>
          <span className="mvp-sticker" style={{ position: 'absolute', top: 18, right: 18, display: 'inline-block', background: 'var(--mv-green)', color: 'var(--mv-ink)', border: '3px solid var(--mv-ink)', boxShadow: '4px 4px 0 var(--mv-ink)', padding: '10px 12px', font: '700 var(--fs-label-sm)/1.3 var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.08em', transform: 'rotate(5deg)' }}>Hond<br />inbegrepen ✳</span>
          <button onClick={() => { setMuted(!muted); const v = vidRef.current; if (v && muted) v.play().catch(() => {}); }} aria-label={muted ? 'Geluid aan' : 'Geluid uit'}
            className="mvp-sound" style={{ position: 'absolute', bottom: 18, right: 18, cursor: 'pointer', background: 'var(--mv-bone)', color: 'var(--mv-ink)', border: '3px solid var(--mv-ink)', boxShadow: '4px 4px 0 var(--mv-ink)', minHeight: 46, padding: '10px 14px', font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            {muted ? '► Geluid aan' : '◼ Geluid uit'}
          </button>
          <span className="mvp-filmmeta" style={{ position: 'absolute', bottom: 18, left: 18, font: '700 var(--fs-label-sm)/1.4 var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--mv-bone)', background: 'var(--mv-ink)', border: '2px solid var(--mv-bone)', padding: '8px 10px' }}>Zomer in de stad · 0:30</span>
        </div>
        </div>
      </div>
      <style>{`@media(max-width:760px){.mvp-filmmeta{display:none!important}}`}</style>
    </section>
  );
}
Object.assign(window, { FilmTakeover });