/* App shell — router + global state + tweaks */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D3303E",
  "whatsapp": true,
  "lightNav": false,
  "displayFont": "Cormorant",
  "showPress": true
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = useStateA("home");
  const [vehicleId, setVehicleId] = useStateA(null);
  const [enquire, setEnquire] = useStateA(null);
  const [lang, setLang] = useStateA("EN");

  // Tweaks
  const useTweaksHook = window.useTweaks || (function(d){ const [v, sv] = React.useState(d); return [v, (k, val) => sv(p => typeof k === "object" ? ({...p, ...k}) : ({...p, [k]: val}))]; });
  const [t, setTweak] = useTweaksHook(TWEAK_DEFAULTS);

  useEffectA(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    // recompute accent-deep as a darker variant
    document.documentElement.style.setProperty("--accent-deep", shade(t.accent, -0.18));
  }, [t.accent]);

  useEffectA(() => {
    const map = {
      "Cormorant": '"Cormorant Garamond", "Times New Roman", serif',
      "Playfair":  '"Playfair Display", "Times New Roman", serif',
      "DM Serif":  '"DM Serif Display", "Times New Roman", serif'
    };
    document.documentElement.style.setProperty("--display", map[t.displayFont] || map.Cormorant);
  }, [t.displayFont]);

  function navigate(p, id) {
    setPage(p);
    if (p === "vehicle") setVehicleId(id);
    window.scrollTo({ top: 0, behavior: "instant" });
  }

  function openEnquire(payload) { setEnquire(payload); }

  let Body = null;
  if (page === "home")       Body = <Home navigate={navigate} openEnquire={openEnquire} />;
  else if (page === "collection") Body = <Collection navigate={navigate} />;
  else if (page === "vehicle")    Body = <VehicleDetail id={vehicleId} navigate={navigate} openEnquire={openEnquire} whatsappOn={t.whatsapp} />;
  else if (page === "wanted")     Body = <Wanted navigate={navigate} openEnquire={openEnquire} />;
  else if (page === "services")   Body = <Services navigate={navigate} openEnquire={openEnquire} />;
  else if (page === "about")      Body = <About navigate={navigate} openEnquire={openEnquire} />;
  else if (page === "faqs")       Body = <FAQs />;
  else if (page === "media")      Body = <Media />;
  else if (page === "contact")    Body = <Contact openEnquire={openEnquire} whatsappOn={t.whatsapp} />;

  // Light-nav pages: when content under nav starts on light bg (everything except home, vehicle)
  const lightNav = t.lightNav || (page !== "home" && page !== "vehicle");

  // Tweaks panel
  const TweaksPanel  = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakColor   = window.TweakColor;
  const TweakToggle  = window.TweakToggle;
  const TweakRadio   = window.TweakRadio;
  const TweakSelect  = window.TweakSelect;

  return (
    <div className="app-root">
      <Nav page={page} navigate={navigate} light={lightNav} openEnquire={openEnquire} lang={lang} setLang={setLang} />
      <main key={page + (vehicleId || "")} data-screen-label={pageLabel(page)} className="fade-in">
        {Body}
      </main>
      <Footer navigate={navigate} openEnquire={openEnquire} />
      <WhatsAppFab enabled={t.whatsapp} onClick={() => openEnquire({ kind: "general" })} />

      {enquire && (
        <EnquireModal
          kind={enquire.kind}
          vehicle={enquire.vehicle}
          defaultTab={enquire.defaultTab}
          onClose={() => setEnquire(null)}
          whatsappOn={t.whatsapp}
        />
      )}

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Accent">
            <TweakColor label="Brand accent"
              value={t.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#D3303E", "#B08D57", "#2E5D4A", "#0F1112", "#7A1F2A"]} />
          </TweakSection>
          <TweakSection title="Display Type">
            <TweakRadio label="Headline serif"
              value={t.displayFont}
              onChange={(v) => setTweak("displayFont", v)}
              options={["Cormorant", "Playfair", "DM Serif"]} />
          </TweakSection>
          <TweakSection title="Behaviour">
            <TweakToggle label="Show WhatsApp FAB" value={t.whatsapp} onChange={(v) => setTweak("whatsapp", v)} />
            <TweakToggle label="Show press strip"  value={t.showPress} onChange={(v) => setTweak("showPress", v)} />
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

function pageLabel(p) {
  return ({
    home: "01 Home",
    collection: "02 Collection",
    vehicle: "03 Vehicle Detail",
    wanted: "04 Wanted",
    services: "05 Services",
    about: "06 About",
    faqs: "07 FAQs",
    media: "08 Media",
    contact: "09 Contact"
  })[p] || p;
}

function shade(hex, pct) {
  const c = hex.replace("#", "");
  const r = parseInt(c.substring(0,2), 16);
  const g = parseInt(c.substring(2,4), 16);
  const b = parseInt(c.substring(4,6), 16);
  const f = pct < 0 ? 1 + pct : 1 - pct;
  const tt = pct < 0 ? 0 : 255;
  const adj = (v) => Math.round((v - tt) * f + tt);
  return "#" + [adj(r), adj(g), adj(b)].map(v => v.toString(16).padStart(2, "0")).join("");
}

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