/* App entry — wires Lenis smooth scroll + GSAP ScrollTrigger,
   composes all sections, handles reduced motion */

const App = () => {
  const [reduced, setReduced] = React.useState(false);

  React.useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    const set = () => setReduced(mq.matches);
    set();
    mq.addEventListener?.('change', set);
    return () => mq.removeEventListener?.('change', set);
  }, []);

  React.useEffect(() => {
    if (reduced) return;
    const { Lenis, gsap, ScrollTrigger } = window;
    const lenis = new Lenis({
      smoothWheel: true,
      duration: 1.05,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    });
    function raf(time) {
      lenis.raf(time);
      ScrollTrigger.update();
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);
    lenis.on('scroll', ScrollTrigger.update);
    gsap.ticker.lagSmoothing(0);
    return () => { lenis.destroy(); };
  }, [reduced]);

  return (
    <main className="relative">
      <Nav />
      <Hero reduced={reduced} />
      <HinglishProblem reduced={reduced} />
      <FeatureGrid />
      <PhoneShowcase />
      <Compare />
      <Pricing />
      <Enterprise />
      <BetaInvite />
      <Footer />
    </main>
  );
};

const mount = () => {
  if (window.__enwriteMounted) return;
  window.__enwriteMounted = true;
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
};

mount();