/* ===========================================================
   App — assembles all sections, tracks active section + nav inversion.
   =========================================================== */

const App = () => {
  const [active, setActive] = React.useState("top");
  const [navInvert, setNavInvert] = React.useState(true);

  React.useEffect(() => {
    const sections = ["top","about","business","projects","message","company","news","recruit","contact"];
    const onScroll = () => {
      // Determine current section
      let cur = "top";
      for (const id of sections) {
        const el = document.getElementById(id);
        if (!el) continue;
        const r = el.getBoundingClientRect();
        if (r.top <= 120) cur = id;
      }
      setActive(cur);
      // Nav invert when over dark sections
      const darkSections = ["top","message","recruit"];
      setNavInvert(darkSections.includes(cur));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <TopMarquee />
      <Nav inverted={navInvert} active={active} />
      <main>
        <Hero />
        <About />
        <Stats />
        <Business />
        <Projects />
        <Message />
        <Company />
        <News />
        <Recruit />
        <Contact />
      </main>
      <Footer />
      <PageIndicator active={active} />
    </>
  );
};

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