// === App ===
function App() {
  const { useState, useEffect } = React;
  const [active, setActive] = useState("accueil");
  const [mobileOpen, setMobileOpen] = useState(false);

  // Active section tracking via IntersectionObserver
  useEffect(() => {
    const ids = ["accueil", "services", "tarifs", "zone", "contact"];
    const sections = ids.map((id) => document.getElementById(id)).filter(Boolean);
    const obs = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
        if (visible[0]) setActive(visible[0].target.id);
      },
      { rootMargin: "-40% 0px -50% 0px", threshold: [0, 0.25, 0.5, 0.75, 1] }
    );
    sections.forEach((s) => obs.observe(s));
    return () => obs.disconnect();
  }, []);

  const scrollToContact = () => {
    const el = document.getElementById("contact");
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
  };

  return (
    <>
      <Header active={active} onCTA={scrollToContact} onMenu={setMobileOpen} mobileOpen={mobileOpen} />
      <main>
        <Hero onCTA={scrollToContact} />
        <Reassurance />
        <About />
        <Services />
        <ForYou />
        <Pricing onCTA={scrollToContact} />
        <Zone />
        <Tools />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

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