// app.jsx — root: routing, tweaks, theme provider
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "noir-gold",
"heroMode": "still",
"locale": "en",
"showPromo": true,
"showRating": false
}/*EDITMODE-END*/;
const PALETTES = {
"noir-gold": {
bg: "#0B0D0F", surface: "#15181C", surface2: "#1B1F24",
text: "#F4F1EA", muted: "#8A8A82", dim: "#5F5F58",
accent: "#B89668", accentInk: "#0B0D0F",
border: "rgba(244,241,234,.10)", borderStrong: "rgba(244,241,234,.22)",
overlay: "rgba(11,13,15,.65)",
name: "Noir + gold",
},
"noir-red": {
bg: "#0A0B0D", surface: "#141518", surface2: "#1A1C20",
text: "#F4F1EA", muted: "#8A8A82", dim: "#5F5F58",
accent: "#C8102E", accentInk: "#FFFFFF",
border: "rgba(244,241,234,.10)", borderStrong: "rgba(244,241,234,.22)",
overlay: "rgba(10,11,13,.65)",
name: "Noir + racing red",
},
"editorial": {
bg: "#F4F1EA", surface: "#FFFFFF", surface2: "#EDE9DF",
text: "#16191D", muted: "#5F5F58", dim: "#9A988F",
accent: "#16191D", accentInk: "#F4F1EA",
border: "rgba(22,25,29,.12)", borderStrong: "rgba(22,25,29,.28)",
overlay: "rgba(244,241,234,.65)",
name: "Editorial stone",
},
};
function applyPalette(name) {
const p = PALETTES[name] || PALETTES["noir-gold"];
const r = document.documentElement;
Object.entries(p).forEach(([k, v]) => {
if (k === "name") return;
r.style.setProperty(`--${k}`, v);
});
document.documentElement.dataset.palette = name;
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [route, setRoute] = React.useState({ name: "home", carId: null });
const [scrolled, setScrolled] = React.useState(false);
// Apply palette + locale dir to
React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
React.useEffect(() => {
document.documentElement.dir = t.locale === "ar" ? "rtl" : "ltr";
document.documentElement.lang = t.locale;
}, [t.locale]);
// Scroll listener for nav style
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
React.useEffect(() => { window.scrollTo(0, 0); }, [route]);
const copy = window.COPY[t.locale];
const featured = window.FLEET.find(c => c.featured);
const car = route.carId ? window.FLEET.find(c => c.id === route.carId) : null;
const goCar = (id) => setRoute({ name: "vehicle", carId: id });
const goHome = () => setRoute({ name: "home", carId: null });
const goBook = () => {
// If we're on a car, scroll its booking widget. Else go to featured.
if (route.name === "vehicle") {
document.querySelector(".veh-side")?.scrollIntoView({ behavior: "smooth", block: "start" });
} else {
goCar(featured.id);
setTimeout(() => document.querySelector(".veh-side")?.scrollIntoView({ behavior: "smooth", block: "start" }), 200);
}
};
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();