// menove-v2-app.jsx — root: snap container, section activation, tweaks.

const V2_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cairnStyle": "outline",
  "transitionStyle": "rise",
  "autoRotateScreens": true
}/*EDITMODE-END*/;

function V2Site() {
  const [t, setTweak] = useTweaks(V2_TWEAK_DEFAULTS);
  const { w, h } = useV2Viewport();
  const mobile = w < 760;
  const scrollRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  // section activation — scroll-driven (IntersectionObserver is unreliable in this environment)
  React.useEffect(() => {
    const root = scrollRef.current;
    if (!root) return;
    const update = () => {
      const sections = Array.from(root.querySelectorAll('.v2-section'));
      const mid = root.scrollTop + root.clientHeight / 2;
      let idx = 0;
      sections.forEach((s, i) => { if (s.offsetTop <= mid) idx = i; });
      sections.forEach((s, i) => {
        const visible = Math.abs(i - idx) <= 0;
        if (visible) s.setAttribute('data-active', '');
        else if (Math.abs(i - idx) > 1) s.removeAttribute('data-active');
      });
      setActive(idx);
    };
    // Defer the first stamping until after first paint, then release the
    // transition gate (body.v2-ready) one frame later — transitions created
    // pre-paint start in a permanently play-pending state.
    let raf1, raf2;
    raf1 = requestAnimationFrame(() => {
      update();
      raf2 = requestAnimationFrame(() => document.body.classList.add('v2-ready'));
    });
    root.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); root.removeEventListener('scroll', update); window.removeEventListener('resize', update); };
  }, [mobile]);

  const goTo = (i) => {
    const root = scrollRef.current;
    if (!root) return;
    const sections = root.querySelectorAll('.v2-section');
    const el = sections[i];
    if (!el) return;
    // scrollIntoView is the only programmatic scroll some engines honor on
    // snap-mandatory containers (scrollTo/scrollTop writes get ignored)
    try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch (e) { el.scrollIntoView(); }
    const y0 = root.scrollTop;
    setTimeout(() => {
      if (Math.abs(root.scrollTop - y0) < 4 && Math.abs(root.scrollTop - el.offsetTop) > 4) {
        try { el.scrollIntoView({ behavior: 'instant', block: 'start' }); } catch (e) { el.scrollIntoView(); }
      }
      root.dispatchEvent(new Event('scroll'));
    }, 260);
  };

  // every hrefless "Request beta access" CTA lands on the finale (section 7),
  // and deep-link hashes from subpages jump to the matching section
  React.useEffect(() => {
    window.__v2GoBeta = () => goTo(7);
    const hashSection = { '#approach': 1, '#app': 3, '#beta': 7 };
    const target = hashSection[window.location.hash];
    if (target != null) setTimeout(() => goTo(target), 400);
    return () => { delete window.__v2GoBeta; };
  }, []);

  const darkSections = [0, 2, 7];
  const dark = darkSections.includes(active);

  return (
    <div>
      <div className="v2-grain" aria-hidden="true"></div>
      <V2Nav dark={dark} mobile={mobile} onSection={goTo} />
      {!mobile && <V2DotNav count={8} active={active} dark={dark} onGo={goTo} />}
      <div ref={scrollRef} className={`v2-scroll v2-t-${t.transitionStyle}`}>
        <V2Hero mobile={mobile} />
        <V2Why mobile={mobile} cairn={t.cairnStyle} />
        <V2Stats mobile={mobile} />
        <V2App mobile={mobile} vh={h} auto={t.autoRotateScreens} />
        <V2Promises mobile={mobile} />
        <V2Companion mobile={mobile} />
        <V2FAQ mobile={mobile} />
        <V2Finale mobile={mobile} cairn={t.cairnStyle} />
      </div>
      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakRadio label="Cairn style" value={t.cairnStyle}
          options={['outline', 'aubergine', 'white']}
          onChange={(v) => setTweak('cairnStyle', v)} />
        <TweakSection label="Motion" />
        <TweakRadio label="Section transition" value={t.transitionStyle}
          options={['rise', 'fade', 'zoom']}
          onChange={(v) => setTweak('transitionStyle', v)} />
        <TweakToggle label="Auto-rotate app screens" value={t.autoRotateScreens}
          onChange={(v) => setTweak('autoRotateScreens', v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<V2Site />);