// VIP Motors — main app
const { useState, useEffect } = React;

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [route, setRoute] = useState("home"); // home | inventory | vehicle | sell | finance | about | contact
  const [vehicleSlug, setVehicleSlug] = useState(null);
  const [enquiry, setEnquiry] = useState(null); // {type, vehicle}

  const navigate = (r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const onVehicle = (slug) => {
    setVehicleSlug(slug);
    setRoute("vehicle");
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const onEnquire = (type, vehicle) => {
    setEnquiry({ type: type || "General enquiry", vehicle: vehicle || null });
  };

  // Apply tweaks to CSS variables
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    // Recompute warm/deep
    root.style.setProperty("--accent-warm", t.accent);
  }, [t.accent]);

  let page = null;
  if (route === "home") page = <HomePage navigate={navigate} onEnquire={() => onEnquire("General enquiry")} onVehicle={onVehicle} tweaks={t} />;
  else if (route === "inventory") page = <InventoryPage navigate={navigate} onEnquire={() => onEnquire("General enquiry")} onVehicle={onVehicle} />;
  else if (route === "vehicle") page = <VehiclePage slug={vehicleSlug} navigate={navigate} onEnquire={onEnquire} onVehicle={onVehicle} />;
  else if (route === "sell") page = <SellPage navigate={navigate} onEnquire={onEnquire} />;
  else if (route === "finance") page = <FinancePage navigate={navigate} onEnquire={onEnquire} />;
  else if (route === "about") page = <AboutPage navigate={navigate} onEnquire={() => onEnquire("General enquiry")} />;
  else if (route === "contact") page = <ContactPage onEnquire={onEnquire} />;

  return (
    <div>
      {/* Disclosure banner */}
      <div className="demo-banner">
        <b>VIP MOTORS · PROTOTYPE</b>&nbsp; · &nbsp;Cinematic uplift for vipmotors.ae &nbsp;·&nbsp; Inventory, prices &amp; specs are illustrative — live site binds to feed / DMS
      </div>

      <Nav route={route} navigate={navigate} onEnquire={() => onEnquire("General enquiry")} tweaks={t} />

      <main key={route}>{page}</main>

      {route !== "vehicle" && <Footer navigate={navigate} />}
      {route === "vehicle" && <Footer navigate={navigate} />}

      {t.showRail && <QuickRail onEnquire={() => onEnquire("General enquiry")} />}

      <Modal
        open={!!enquiry}
        onClose={() => setEnquiry(null)}
        title={enquiry ? enquiry.type : ""}
      >
        {enquiry && (
          <EnquiryForm
            vehicle={enquiry.vehicle}
            type={enquiry.type}
            onSubmitted={() => setTimeout(() => setEnquiry(null), 2400)}
          />
        )}
      </Modal>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#D90A2C", "#9A1B1B", "#C2A36B", "#EC1C24", "#7A0E1E"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Subject"
          value={t.heroImage}
          options={["divo", "laferrari", "monza", "showroom"]}
          onChange={(v) => setTweak("heroImage", v)}
        />
        <TweakText
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakSection label="Interface" />
        <TweakToggle
          label="Quick-action rail"
          value={t.showRail}
          onChange={(v) => setTweak("showRail", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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