// Root app — simple route switch.
function WebsiteApp() {
  const ROUTES = ["home", "whatis", "menu", "how", "about", "contact"];
  const fromHash = () => {
    const h = (window.location.hash || "").replace("#", "");
    return ROUTES.includes(h) ? h : "home";
  };
  const [route, setRoute] = React.useState(fromHash);
  React.useEffect(() => {
    const onHash = () => setRoute(fromHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  React.useEffect(() => { window.scrollTo(0, 0); }, [route]);

  // Home is a locked scroll-hijack slideshow (ScrollHijack.jsx). We lock the
  // document scroll on the home route so native scrolling can't fight the
  // transform-driven panel advance; other routes scroll normally.
  React.useEffect(() => {
    const root = document.documentElement;
    root.classList.toggle("hijack-home", route === "home");
    return () => root.classList.remove("hijack-home");
  }, [route]);

  // Every route (home included) uses the cream-backed nav so the top safe-area
  // reads cream — matching build.html. (Home was previously transparent-over-hero,
  // which left the iOS status-bar strip showing the dark hero = grey.)
  const navTransparent = false;

  return (
    <>
      <Nav route={route} setRoute={setRoute} transparentOverHero={navTransparent}/>
      {route === "home"    && <HomePage setRoute={setRoute}/>}
      {route === "whatis"  && <WhatIsNourrirPage/>}
      {route === "menu"    && <MenuPage/>}
      {route === "how"     && <HowItWorksPage/>}
      {route === "about"   && <AboutPage/>}
      {route === "contact" && <ContactPage/>}
      {/* On home the footer is the final hijack panel; elsewhere it sits in normal flow. */}
      {route !== "home" && <Footer setRoute={setRoute}/>}
      <WhatsAppFab/>
      <CookieConsent/>
      <EmailModal/>
    </>
  );
}
window.WebsiteApp = WebsiteApp;

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