/* global React, ReactDOM, Hero, Transition, Features, Demo, Popup, HowItWorks, Pricing, FAQ, Footer, Lenis */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

// Smooth scroll via Lenis (mounted once)
const useLenis = () => {
  useEffectA(() => {
    if (typeof Lenis === 'undefined') return;
    const lenis = new Lenis({
      duration: 1.05,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      smoothWheel: true,
      wheelMultiplier: 1.0,
      touchMultiplier: 1.2,
    });
    let raf;
    const tick = (time) => {
      lenis.raf(time);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      lenis.destroy();
    };
  }, []);
};

// Compute section offsets so each scroll-driven block knows when it's active
const useScrollY = () => {
  const [y, setY] = useStateA(typeof window !== 'undefined' ? window.scrollY : 0);
  useEffectA(() => {
    let raf = 0;
    const tick = () => {
      raf = 0;
      setY(window.scrollY);
    };
    const onScroll = () => {
      if (!raf) raf = requestAnimationFrame(tick);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return y;
};

const Nav = ({ scrollY }) => {
  const [open, setOpen] = useStateA(false);
  const items = [
    { href: '#try',      label: 'Demo' },
    { href: '#features', label: 'Features' },
    { href: '#how',      label: 'How it works' },
    { href: '#faq',      label: 'FAQ' },
  ];
  return (
    <>
      <div className="nav-tab" data-open={open ? 'true' : 'false'}>
        <a href="#" className="nav-tab-icon" aria-label="RadialZ" onClick={() => setOpen(false)}>
          <img src={window.__resources['tray-icon']} alt="RadialZ" />
        </a>
        <button
          className={`nav-burger ${open ? 'open' : ''}`}
          aria-label="Menu"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span /><span /><span />
        </button>
      </div>
      <div className={`nav-overlay ${open ? 'open' : ''}`} aria-hidden={!open}>
        <div className="nav-overlay-inner">
          <ul className="nav-overlay-list">
            {items.map((it, i) => (
              <li key={i} style={{ transitionDelay: `${0.08 + i*0.06}s` }}>
                <a href={it.href} onClick={() => setOpen(false)}>
                  <span className="nav-num">{String(i+1).padStart(2, '0')}</span>
                  <span className="nav-label">{it.label}</span>
                </a>
              </li>
            ))}
          </ul>
          <div className="nav-overlay-footer">
            <a href="#pricing" className="btn-primary" onClick={() => setOpen(false)}>
              Get RadialZ&nbsp;&nbsp;$39
            </a>
            <div className="nav-overlay-meta">
              <span>ZBrush 2025 &amp; 2026 · Windows</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const App = () => {
  useLenis();
  const scrollY = useScrollY();
  const [vh, setVh] = useStateA(window.innerHeight);

  useEffectA(() => {
    const onResize = () => setVh(window.innerHeight);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  // Hero is the only scroll-pinned section; everything else flows naturally.
  // Transition computes its own reveal progress internally.

  return (
    <>
      <Nav scrollY={scrollY} />
      <Hero scrollY={scrollY} vh={vh} />
      <Demo />
      <Transition />
      <Features />
      <Popup />
      <HowItWorks />
      <Pricing />
      <FAQ />
      <Footer />
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);