/* global React, ReactDOM,
   Header, Footer, HomePage, ResidencesPage, AmenitiesPage,
   GalleryPage, LocationPage, ContactPage,
   ScheduleTourModal, ApplyNowModal */

const { useState: useStateApp, useEffect: useEffectApp } = React;

// Production tweak defaults (Tweaks panel is a designer-only A/B tool, not shipped).
const TWEAKS = {
  heroVariant: "fullbleed",
  colorTheme: "cream",
  headlineIdx: 0,
  density: "spacious",
  preLeasing: true,
};

const VALID_PAGES = ["home", "residences", "amenities", "gallery", "location", "contact"];

function App() {
  const initialPage = (window.location.hash || "#home").replace("#", "");
  const [page, setPage] = useStateApp(VALID_PAGES.includes(initialPage) ? initialPage : "home");
  const [tourOpen, setTourOpen] = useStateApp(false);
  const [applyOpen, setApplyOpen] = useStateApp(false);

  const navTo = (id) => {
    setPage(id);
    window.location.hash = id;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  useEffectApp(() => {
    const onHash = () => {
      const p = (window.location.hash || "#home").replace("#", "");
      if (VALID_PAGES.includes(p)) setPage(p);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffectApp(() => {
    document.body.dataset.density = TWEAKS.density;
  }, []);

  const openTour = () => setTourOpen(true);
  const openApply = () => setApplyOpen(true);

  return (
    <>
      <Header
        page={page}
        navTo={navTo}
        openTour={openTour}
        showPreLeasing={TWEAKS.preLeasing} />

      {page === "home" && (
        <HomePage tweaks={TWEAKS} openTour={openTour} openApply={openApply} navTo={navTo} />
      )}
      {page === "residences" && (
        <ResidencesPage openTour={openTour} openApply={openApply} />
      )}
      {page === "amenities" && (
        <AmenitiesPage openTour={openTour} navTo={navTo} />
      )}
      {page === "gallery" && (
        <GalleryPage />
      )}
      {page === "location" && (
        <LocationPage navTo={navTo} openTour={openTour} />
      )}
      {page === "contact" && (
        <ContactPage openTour={openTour} openApply={openApply} />
      )}

      <Footer navTo={navTo} />

      <ScheduleTourModal open={tourOpen} onClose={() => setTourOpen(false)} />
      <ApplyNowModal open={applyOpen} onClose={() => setApplyOpen(false)} />
    </>
  );
}

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