// Main App: hash routing, page switcher, modal state

const App = () => {
  const initial = (window.location.hash || "#home").slice(1) || "home";
  const [page, setPageRaw] = React.useState(NAV.find(n => n.key === initial) ? initial : "home");
  const [openP, setOpenP] = React.useState(null);

  const setPage = (k) => {
    setPageRaw(k);
    if (window.location.hash !== "#" + k) {
      history.replaceState(null, "", "#" + k);
    }
  };

  React.useEffect(() => {
    const on = () => {
      const k = (window.location.hash || "#home").slice(1) || "home";
      if (NAV.find(n => n.key === k)) setPageRaw(k);
    };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);

  const props = { setPage, openProduct: setOpenP };
  let Page;
  switch (page) {
    case "designer":     Page = <DesignerPage {...props} />; break;
    case "bridal":       Page = <BridalPage {...props} />; break;
    case "couture":      Page = <CouturePage {...props} />; break;
    case "shop":         Page = <ShopPage {...props} />; break;
    case "jewellery":    Page = <JewelleryPage {...props} />; break;
    case "appointments": Page = <AppointmentsPage {...props} />; break;
    case "visit":        Page = <VisitPage {...props} />; break;
    case "contact":      Page = <ContactPage {...props} />; break;
    default:             Page = <HomePage {...props} />;
  }

  return (
    <React.Fragment>
      <Navbar page={page} setPage={setPage} />
      <div key={page} className="mo-pagewrap">{Page}</div>
      <Footer setPage={setPage} />
      <WhatsAppFab />
      <ProductModal p={openP} onClose={() => setOpenP(null)} setPage={setPage} />
    </React.Fragment>
  );
};

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