function App() {
  const [active, setActive] = React.useState("top");

  function onNavigate(id) {
    setActive(id);
    const el = document.getElementById(id);
    if (!el) return;
    if (id === "top") {
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
      const y = el.getBoundingClientRect().top + window.scrollY - 64;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  }

  // Track active section on scroll
  React.useEffect(() => {
    const ids = ["about", "classes", "shop", "teacher", "contact"];
    function onScroll() {
      const offset = 200;
      let current = "top";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        if (el.getBoundingClientRect().top <= offset) current = id;
      }
      setActive(current);
    }
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <React.Fragment>
      <Nav active={active} onNavigate={onNavigate}/>
      <main id="app-main">
        <Hero onNavigate={onNavigate}/>
        <About/>
        <Classes onNavigate={onNavigate}/>
        <Shop/>
        <Teacher/>
        <Contact/>
      </main>
      <Footer/>
    </React.Fragment>
  );
}

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