/* Main App — composes the case study and tracks active nav section. */

function App() {
  const [active, setActive] = useState("challenge");

  useEffect(() => {
    const ids = ["challenge", "solution", "results", "trust"];
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    if (!els.length) return;
    const obs = new IntersectionObserver((entries) => {
      // Pick the entry closest to top whose ratio > 0.15
      const visible = entries.filter(e => e.isIntersecting);
      if (!visible.length) return;
      visible.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
      setActive(visible[0].target.id);
    }, { threshold: [0.15, 0.4], rootMargin: "-80px 0px -50% 0px" });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const jump = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <>
      <Nav active={active} onJump={jump} />
      <main className="page">
        <Hero />
        <Challenge />
        <Solution />
        <Results />
        <Trust />
        <CtaFooter />
      </main>
    </>
  );
}

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