/* AutoVault — App root + Tweaks wiring. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTreatment": "cinematic",
  "accent": "crimson",
  "motion": 70,
  "headline": "private"
}/*EDITMODE-END*/;

/* ---- tiny static router (multi-page): pathname → page key ---- */
const PAGES = ["services", "facility", "membership", "journal"];
const PAGE_TITLES = {
  home: "AutoVault — Indonesia's Private Car Vault",
  services: "Services — AutoVault",
  facility: "The Facility — AutoVault",
  membership: "Membership & Pricing — AutoVault",
  journal: "Journal — AutoVault",
};
function currentPage() {
  let p = (location.pathname || "/").replace(/\/+$/, "").split("/").pop() || "home";
  p = p.replace(/\.html$/, "");
  return PAGES.includes(p) ? p : "home";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();
  const page = currentPage();

  // apply accent + motion to document
  React.useEffect(() => {
    document.documentElement.setAttribute("data-accent", t.accent);
  }, [t.accent]);
  React.useEffect(() => {
    document.documentElement.style.setProperty("--motion", String((t.motion ?? 70) / 100));
  }, [t.motion]);
  React.useEffect(() => { document.title = PAGE_TITLES[page] || PAGE_TITLES.home; }, [page]);

  return (
    <div className={`shell ${page === "home" ? "" : "shell--inner"}`}>
      <Nav />
      {page !== "home" && <div className="page-pad" />}
      {page === "home" && (
        <React.Fragment>
          <Hero treatment={t.heroTreatment} />
          <hr className="hair hair--crimson" />
          <WhyVault />
          <Services />
          <Facility />
          <HowItWorks />
          <Membership />
          <SocialProof />
          <Journal />
        </React.Fragment>
      )}
      {page === "services" && (<React.Fragment><Services /><HowItWorks /></React.Fragment>)}
      {page === "facility" && (<React.Fragment><Facility /><SocialProof /></React.Fragment>)}
      {page === "membership" && (<Membership />)}
      {page === "journal" && (<Journal />)}
      <FinalCTA />
      <Footer />
      <WhatsAppFloat />

      <TweaksPanel>
        <TweakSection label="Hero treatment" />
        <TweakRadio
          label="Layout"
          value={t.heroTreatment}
          options={[
            { value: "vault", label: "Vault door" },
            { value: "split", label: "Editorial" },
            { value: "cinematic", label: "Cinematic" },
          ]}
          onChange={(v) => setTweak("heroTreatment", v)}
        />
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={t.accent === "ember" ? "#E0412B" : t.accent === "oxblood" ? "#A8221C" : "#CC2C24"}
          options={["#CC2C24", "#E0412B", "#A8221C"]}
          onChange={(hex) => setTweak("accent", hex === "#E0412B" ? "ember" : hex === "#A8221C" ? "oxblood" : "crimson")}
        />
        <TweakSection label="Motion" />
        <TweakSlider label="Cinematic intensity" value={t.motion} min={0} max={100} step={10} unit="%"
          onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </div>
  );
}

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