/* global React, ReactDOM, Header, Footer, CookieBanner, HomePage */

function Placeholder({ title, kicker, onNav }) {
  return (
    <section className="py-24 md:py-36 bg-foam">
      <div className="container-x text-center max-w-[760px] mx-auto">
        <div className="eyebrow mb-3">{kicker || "Page en construction"}</div>
        <h1 className="h-display">{title}</h1>
        <p className="lead mt-5 text-mute">Cette page sera détaillée prochainement. Vous pouvez revenir à l'accueil ou explorer le reste du site.</p>
        <div className="mt-8 flex justify-center gap-3">
          <button onClick={() => onNav("home")} className="text-primary font-semibold underline underline-offset-4">← Retour à l'accueil</button>
        </div>
      </div>
    </section>
  );
}

function App() {
  // The router treats only `#/page-name` hashes as route changes; bare anchor
  // hashes (e.g. `#boutique` for in-page sections) are left to the browser so
  // they don't get misrouted to a 404.
  const parseRoute = () => {
    const h = window.location.hash || "";
    if (!h.startsWith("#/")) return null;
    const page = h.slice(2);
    return page || "home";
  };

  const [page, setPageRaw] = React.useState(() => parseRoute() || "home");

  const onNav = (p) => {
    setPageRaw(p);
    if (p === "home") history.replaceState(null, "", "#/");
    else history.replaceState(null, "", "#/" + p);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  React.useEffect(() => {
    const onHash = () => {
      const route = parseRoute();
      if (route !== null) setPageRaw(route);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  let body;
  switch (page) {
    case "home":            body = <HomePage onNav={onNav} />; break;
    case "nos-huitres":     body = window.OystersPage     ? <window.OystersPage onNav={onNav}/>     : <Placeholder title="Nos huîtres" onNav={onNav}/>; break;
    case "notre-histoire":  body = window.HistoryPage     ? <window.HistoryPage onNav={onNav}/>     : <Placeholder title="Notre histoire" onNav={onNav}/>; break;
    case "nos-produits":    body = window.ProductsPage    ? <window.ProductsPage onNav={onNav}/>    : <Placeholder title="Nos produits" onNav={onNav}/>; break;
    case "ou-trouver":      body = window.LocationsPage   ? <window.LocationsPage onNav={onNav}/>   : <Placeholder title="Où nous trouver" onNav={onNav}/>; break;
    case "recettes":        body = window.RecipesPage     ? <window.RecipesPage onNav={onNav}/>     : <Placeholder title="Nos recettes" onNav={onNav}/>; break;
    case "nos-partenaires": body = window.PartnersPage    ? <window.PartnersPage onNav={onNav}/>    : <Placeholder title="Restaurants & revendeurs" onNav={onNav}/>; break;
    case "prestations":     body = window.PrestationsPage ? <window.PrestationsPage onNav={onNav}/> : <Placeholder title="Évènementiel & visites" onNav={onNav}/>; break;
    case "parutions":       body = window.ParutionsPage   ? <window.ParutionsPage onNav={onNav}/>   : <Placeholder title="Ils parlent de nous" onNav={onNav}/>; break;
    case "contact":         body = window.ContactPage     ? <window.ContactPage onNav={onNav}/>     : <Placeholder title="Contact" onNav={onNav}/>; break;
    case "faq":             body = window.FaqPage         ? <window.FaqPage onNav={onNav}/>         : <Placeholder title="Questions fréquentes" onNav={onNav}/>; break;
    case "devis-pro":       body = window.DevisPage       ? <window.DevisPage onNav={onNav}/>       : <Placeholder title="Devis professionnels" onNav={onNav}/>; break;
    case "commander":       body = window.OrderPage       ? <window.OrderPage onNav={onNav}/>       : <Placeholder title="Commander en ligne" onNav={onNav}/>; break;
    case "mentions-legales":body = window.LegalPage       ? <window.LegalPage kind="mentions" onNav={onNav}/> : <Placeholder title="Mentions légales" onNav={onNav}/>; break;
    case "cgu":             body = window.LegalPage       ? <window.LegalPage kind="cgu" onNav={onNav}/>      : <Placeholder title="CGU" onNav={onNav}/>; break;
    case "confidentialite": body = window.LegalPage       ? <window.LegalPage kind="rgpd" onNav={onNav}/>     : <Placeholder title="Politique de confidentialité" onNav={onNav}/>; break;
    case "":                body = <HomePage onNav={onNav}/>; break;
    default:                body = window.NotFoundPage ? <window.NotFoundPage onNav={onNav}/> : <Placeholder title="Page introuvable" onNav={onNav}/>;
  }

  return (
    <div className="flex flex-col min-h-screen">
      <Header page={page} onNav={onNav}/>
      <main className="flex-1">{body}</main>
      <Footer onNav={onNav}/>
      <BackToTop/>
      <CookieBanner/>
    </div>
  );
}

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