// SfumaSite — root component, owns active page state + scroll listener for nav.

const { useState, useEffect } = React;

function SfumaSite() {
  const { TopNav, Footer, colors, fontStack } = window;
  const [page, setPageRaw] = useState("home");
  const [scrolled, setScrolled] = useState(false);

  const setPage = (p) => {
    setPageRaw(p);
    // restore scroll to top when changing page
    requestAnimationFrame(() => window.scrollTo({ top: 0, left: 0, behavior: "auto" }));
  };

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const Page = (() => {
    switch (page) {
      case "features": return window.FeaturesPage;
      case "pricing":  return window.PricingPage;
      case "download": return window.DownloadPage;
      case "contact":  return window.ContactPage;
      default:         return window.HomePage;
    }
  })();

  return (
    <div
      style={{
        background: colors.surface,
        color: colors.body,
        fontFamily: fontStack,
        minHeight: "100vh",
        WebkitFontSmoothing: "antialiased",
        MozOsxFontSmoothing: "grayscale",
        fontWeight: 400,
        letterSpacing: "-0.005em",
      }}
    >
      <TopNav page={page} setPage={setPage} scrolled={scrolled} />
      <main>
        <Page setPage={setPage} />
      </main>
      <Footer setPage={setPage} />
    </div>
  );
}

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