/* global React, ReactDOM, window */
const { useState: useState_App, useEffect: useEffect_App } = React;

function App() {
  const [active, setActive] = useState_App("role");

  // IntersectionObserver tracks which section is in view → nav active link
  useEffect_App(() => {
    const ids = ["role", "earn", "fits", "faq"];
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    if (!els.length) return;
    const io = new IntersectionObserver(es => {
      // Pick the most-visible intersecting entry
      const visible = es.filter(e => e.isIntersecting)
                        .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
      if (visible[0]) setActive(visible[0].target.id);
    }, { threshold: [0.2, 0.4, 0.6], rootMargin: "-100px 0px -40% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav activeSection={active} />
      <Hero />
      <WhatThis />
      <Tracks />
      <HowYouEarn />
      <Calendar />
      <Founder />
      <Fit />
      <Tools />
      <WhatYouGet />
      <Testimonials />
      <FAQ />
      <Application />
      <FinalCTA />
      <Footer />
    </>
  );
}

function Root() {
  return (
    <LangProvider>
      <App />
    </LangProvider>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<Root />);