/* global React, ReactDOM, Navbar, Footer, WhatsAppFab,
   HomePage, InventoryPage, VehiclePage, ConsignmentPage, SellPage, FinancePage, AboutPage, ContactPage,
   CV_INVENTORY, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakColor */
const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "champagne",
  "display": "grotesque",
  "density": "regular",
  "anim": "on",
  "paperHero": false
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = useState({ name: "home" });
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // scroll to top on page change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [page]);

  // page-change announcement for any deck-style host
  useEffect(() => {
    const order = ["home", "inventory", "vehicle", "consignment", "sell", "finance", "about", "contact"];
    const idx = order.indexOf(page.name);
    window.parent?.postMessage?.({ slideIndexChanged: Math.max(0, idx) }, "*");
  }, [page]);

  const openVehicle = v => setPage({ name: "vehicle", vehicleId: v.id });
  const currentVehicle = page.name === "vehicle"
    ? CV_INVENTORY.find(v => v.id === page.vehicleId) || CV_INVENTORY[0]
    : null;

  const darkNav = page.name === "home" || page.name === "vehicle" || page.name === "consignment" || page.name === "about";

  return (
    <div
      className={tweaks.paperHero ? "cv-paper-hero" : ""}
      data-accent={tweaks.accent}
      data-display={tweaks.display}
      data-density={tweaks.density}
      data-anim={tweaks.anim}
    >
      <Navbar page={page} setPage={setPage} dark={false} />

      {page.name === "home" && <HomePage setPage={setPage} openVehicle={openVehicle} />}
      {page.name === "inventory" && <InventoryPage setPage={setPage} openVehicle={openVehicle} initialFilter={page.filter} />}
      {page.name === "vehicle" && currentVehicle &&
        <VehiclePage v={currentVehicle} setPage={setPage} openVehicle={openVehicle} />
      }
      {page.name === "consignment" && <ConsignmentPage setPage={setPage} />}
      {page.name === "sell" && <SellPage setPage={setPage} />}
      {page.name === "finance" && <FinancePage setPage={setPage} />}
      {page.name === "about" && <AboutPage setPage={setPage} />}
      {page.name === "contact" && <ContactPage setPage={setPage} />}

      <Footer setPage={setPage} />
      <WhatsAppFab />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor
          label="Accent"
          value={ACCENT_HEX[tweaks.accent] || "#C3A678"}
          options={["#C3A678", "#9C3E2F", "#2F7C66", "#BDB39A"]}
          onChange={hex => setTweak("accent", HEX_TO_ACCENT[hex] || "champagne")}
        />
        <TweakToggle
          label="Light editorial hero"
          value={tweaks.paperHero}
          onChange={v => setTweak("paperHero", v)}
        />

        <TweakSection label="Type & rhythm" />
        <TweakRadio
          label="Display"
          value={tweaks.display}
          options={["grotesque", "serif"]}
          onChange={v => setTweak("display", v)}
        />
        <TweakRadio
          label="Rhythm"
          value={tweaks.density}
          options={["tight", "regular", "airy"]}
          onChange={v => setTweak("density", v)}
        />

        <TweakSection label="Motion" />
        <TweakRadio
          label="Hero zoom"
          value={tweaks.anim}
          options={["on", "off"]}
          onChange={v => setTweak("anim", v)}
        />
      </TweaksPanel>
    </div>
  );
}

const ACCENT_HEX = { champagne: "#C3A678", oxblood: "#9C3E2F", emerald: "#2F7C66", ivory: "#BDB39A" };
const HEX_TO_ACCENT = { "#C3A678": "champagne", "#9C3E2F": "oxblood", "#2F7C66": "emerald", "#BDB39A": "ivory" };

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