// ============================================================
// APP — Main entry
// ============================================================

function App() {
  const [activeSection, setActiveSection] = useState("top");

  // Track active section
  useEffect(() => {
    const sections = ["top", "consulting", "dyna", "guide-business", "about"];
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) setActiveSection(entry.target.id);
        });
      },
      { rootMargin: "-40% 0px -40% 0px" }
    );
    sections.forEach((id) => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);

  return (
    <>
      <CustomCursor />
      <Nav active={activeSection} />
      <main>
        <HeroEditorial />
        <ConsultingSection />
        <DynaSection />
        <BookSection />
        <AboutSection />
        <FooterSection />
      </main>
    </>
  );
}

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