/* Main app — router, booking state, tweaks */
const { useState: US, useEffect: UE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "deep-rose",
  "displayFont": "Playfair Display",
  "bodyFont": "Inter",
  "heroVariant": "editorial",
  "showFab": true
}/*EDITMODE-END*/;

const PALETTES = {
  "blush-plum": { rose: "#C9788A", roseDeep: "#A85063", blush: "#F4DCDF", champagne: "#D8B98C", plum: "#3A2230", plumSoft: "#5A3A4B", ivory: "#FBF6F1", cream: "#FFFDFB", line: "#E8DDD6" },
  "noir-rose":  { rose: "#D4868F", roseDeep: "#B05864", blush: "#E5D6D7", champagne: "#C9A876", plum: "#1A1418", plumSoft: "#3D3035", ivory: "#F2EDE8", cream: "#FAF7F4", line: "#DDD3CC" },
  "champagne":  { rose: "#B98873", roseDeep: "#8E5E4A", blush: "#EFE2D5", champagne: "#C49A6C", plum: "#3D2A1F", plumSoft: "#604232", ivory: "#FAF3EA", cream: "#FFFBF5", line: "#E8D9C8" },
  "deep-rose":  { rose: "#E36886", roseDeep: "#B53A5C", blush: "#FAD6DE", champagne: "#E0B589", plum: "#2D1924", plumSoft: "#502E3F", ivory: "#FFF6F4", cream: "#FFFCFB", line: "#EFDCDA" },
};

function App() {
  const initialRoute = ["home", "services", "memberships", "gallery", "team", "reviews", "book"].includes(window.__BYTESGLUE_SHOWCASE_ROUTE)
    ? window.__BYTESGLUE_SHOWCASE_ROUTE
    : "home";
  const [route, setRoute] = US(initialRoute);
  const [booking, setBooking] = US({ open: false, preselect: null });

  // Tweaks
  const [tw, setTw] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);

  UE(() => {
    const p = PALETTES[tw.palette] || PALETTES["deep-rose"];
    const r = document.documentElement;
    r.style.setProperty("--rose", p.rose);
    r.style.setProperty("--rose-deep", p.roseDeep);
    r.style.setProperty("--blush", p.blush);
    r.style.setProperty("--champagne", p.champagne);
    r.style.setProperty("--plum", p.plum);
    r.style.setProperty("--plum-soft", p.plumSoft);
    r.style.setProperty("--ivory", p.ivory);
    r.style.setProperty("--cream", p.cream);
    r.style.setProperty("--line", p.line);
    r.style.setProperty("--font-display", `"${tw.displayFont}", Georgia, serif`);
    r.style.setProperty("--font-body", `"${tw.bodyFont}", system-ui, sans-serif`);
  }, [tw.palette, tw.displayFont, tw.bodyFont]);

  const openBooking = () => setBooking({ open: true, preselect: null });
  const openBookingFor = (svcName) => setBooking({ open: true, preselect: { id: svcName, name: svcName, meta: "Pre-selected · confirm details next" } });
  const closeBooking = () => setBooking({ open: false, preselect: null });

  let page;
  switch (route) {
    case "services":     page = <ServicesPage openBookingFor={openBookingFor}/>; break;
    case "memberships":  page = <MembershipsPage openBookingFor={openBookingFor}/>; break;
    case "gallery":      page = <GalleryPage/>; break;
    case "team":         page = <TeamPage openBookingFor={openBookingFor}/>; break;
    case "reviews":      page = <ReviewsPage/>; break;
    case "book":         page = <BookPage openBooking={openBooking}/>; break;
    default:             page = <Home openBooking={openBooking} openBookingFor={openBookingFor} setRoute={setRoute}/>;
  }

  return (
    <>
      <div data-screen-label={`Blo Out · ${route}`}>
        <Navbar route={route} setRoute={setRoute} openBooking={openBooking}/>
        {page}
        <Footer setRoute={setRoute} openBooking={openBooking}/>
      </div>
      {tw.showFab && <WhatsAppFab/>}
      <BottomBar openBooking={openBooking}/>
      <BookingModal open={booking.open} onClose={closeBooking} preselect={booking.preselect}/>
      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Palette">
            <TweakRadio label="Mood"
              value={tw.palette}
              onChange={(v) => setTw("palette", v)}
              options={[
                {value: "blush-plum", label: "Blush · Plum"},
                {value: "noir-rose", label: "Noir · Rose"},
                {value: "champagne", label: "Champagne"},
                {value: "deep-rose", label: "Deep Rose"},
              ]}/>
          </TweakSection>
          <TweakSection title="Type">
            <TweakSelect label="Display"
              value={tw.displayFont}
              onChange={(v) => setTw("displayFont", v)}
              options={[
                {value: "Playfair Display", label: "Playfair Display"},
                {value: "Cormorant Garamond", label: "Cormorant Garamond"},
                {value: "DM Serif Display", label: "DM Serif Display"},
                {value: "Italiana", label: "Italiana"},
              ]}/>
            <TweakSelect label="Body"
              value={tw.bodyFont}
              onChange={(v) => setTw("bodyFont", v)}
              options={[
                {value: "Inter", label: "Inter"},
                {value: "Manrope", label: "Manrope"},
                {value: "Nunito Sans", label: "Nunito Sans"},
              ]}/>
          </TweakSection>
          <TweakSection title="Surface">
            <TweakToggle label="Show WhatsApp FAB" value={tw.showFab} onChange={(v) => setTw("showFab", v)}/>
            <TweakButton label="Open booking modal" onClick={openBooking}/>
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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