/* Superior Car Rental — Main App with router state + Tweaks */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F2A916",
  "density": "regular",
  "lightHero": false,
  "showRibbon": true,
  "cardShape": "rounded"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  "#F2A916": { name: "Brand gold", ink: "#0A0C0F" }, // matches actual logo
  "#C1121F": { name: "Rosso", ink: "#FFFFFF" },       // sportier alt
  "#B7D3E8": { name: "Ice", ink: "#0A0C0F" },         // cool editorial
  "#B0904E": { name: "Champagne", ink: "#0A0C0F" }    // muted brand spec
};

function App() {
  const [route, setRoute] = useStateApp({ name: "home" });
  const [reservationCtx, setReservationCtx] = useStateApp(null);
  const [completed, setCompleted] = useStateApp(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent
  useEffectApp(() => {
    const ink = ACCENT_PALETTES[t.accent]?.ink || "#0A0C0F";
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-ink", ink);
    // Card shape
    document.documentElement.style.setProperty("--radius-lg", t.cardShape === "sharp" ? "0px" : t.cardShape === "softer" ? "10px" : "4px");
    document.documentElement.style.setProperty("--radius", t.cardShape === "sharp" ? "0px" : "2px");
  }, [t.accent, t.cardShape]);

  const navigate = (r) => setRoute(r);
  const openReserve = (ctx) => setReservationCtx(ctx);
  const closeReserve = () => setReservationCtx(null);
  const finishReserve = (data) => {
    setReservationCtx(null);
    setCompleted(data);
    setRoute({ name: "confirmation" });
  };

  // Pick nav variant: dark by default; light on light-bg routes if needed.
  const navLight = false;

  let main;
  switch (route.name) {
    case "home": main = <HomeScreen navigate={navigate}/>; break;
    case "fleet": main = <FleetScreen navigate={navigate} initialCat={route.cat||"all"}/>; break;
    case "car": main = <CarDetailScreen navigate={navigate} carId={route.id} onReserve={openReserve}/>; break;
    case "chauffeur": main = <ChauffeurScreen navigate={navigate}/>; break;
    case "about": main = <AboutScreen navigate={navigate}/>; break;
    case "how": main = <HowScreen navigate={navigate}/>; break;
    case "contact": main = <ContactScreen navigate={navigate}/>; break;
    case "brands": main = <BrandsScreen navigate={navigate}/>; break;
    case "confirmation": main = <ConfirmationScreen data={completed} navigate={navigate}/>; break;
    default: main = <HomeScreen navigate={navigate}/>;
  }

  return (
    <>
      <Nav route={route} navigate={navigate} light={navLight}/>
      {main}
      {route.name !== "home" && <Footer navigate={navigate}/>}
      {route.name === "home" && <Footer navigate={navigate}/>}

      {/* Floating WhatsApp */}
      <a className="wa-fab" href={waLink("Hi Superior Rental, I'd like to enquire.")} target="_blank" rel="noreferrer" aria-label="WhatsApp">
        <Icon.Whatsapp className="icon-lg"/>
      </a>

      {/* Reservation modal */}
      {reservationCtx && (
        <ReservationModal ctx={reservationCtx} onClose={closeReserve} onComplete={finishReserve}/>
      )}

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand"/>
        <TweakColor label="Accent"
          value={t.accent}
          options={Object.keys(ACCENT_PALETTES)}
          onChange={(v) => setTweak('accent', v)}/>
        <div style={{fontSize:10,opacity:0.6,marginTop:-4}}>
          {ACCENT_PALETTES[t.accent]?.name}
        </div>

        <TweakSection label="Shape"/>
        <TweakRadio label="Card corners" value={t.cardShape}
          options={["sharp", "rounded", "softer"]}
          onChange={(v) => setTweak('cardShape', v)}/>
      </TweaksPanel>
    </>
  );
}

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