// App — composes the whole site.
function App() {
  const [active, setActive] = React.useState("projeto");

  React.useEffect(() => {
    const sections = ["projeto", "experimentos", "impacto", "kits", "galeria", "contato"];
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: "-40% 0px -40% 0px" });
    sections.forEach(id => {
      const el = document.getElementById(id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, []);

  const handleNav = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      <Nav active={active} onNavigate={handleNav} />
      <Hero onCta={handleNav} />
      <About />
      <Experiments />
      <Impact />
      <Kits />
      <Gallery />
      <Contact />
      <Footer onNavigate={handleNav} />
    </>
  );
}

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