const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [drawerOpen, setDrawerOpen] = useStateA(false);
  const [active, setActive] = useStateA("top");

  useEffectA(() => {
    const ids = ["top", "topics", "podcast", "writing", "newsletter", "about", "coaching"];
    const onScroll = () => {
      const y = window.scrollY + 120;
      let cur = "top";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <window.Nav onOpenDrawer={() => setDrawerOpen(true)} active={active} />
      <window.MobileDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />
      <main>
        <window.Hero />
        <window.Topics />
        <window.Podcast />
        <window.Book />
        <window.Newsletter />
        <window.About />
      </main>
      <window.Footer />
    </>
  );
}

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