/* app.jsx — top-level router, tweaks, mount */ const { useState: useStateA, useEffect: useEffectA, useCallback: useCallbackA } = React; // ─── Simple placeholder pages for sell / about / contact ─── function Sell({ onEnquire }) { return (
Sell your car · Trade-in

We buy
the cars we like.

Send make, model, year, mileage and a few photos. We come back with an indicative offer within 24 working hours, and a confirmed offer after a 30-minute inspection at the showroom.

How it works.

{[ ["01", "Send details + photos", "Through the form, by email, or on WhatsApp once we publish the verified number."], ["02", "Indicative offer", "Within 24 working hours, with a range and the basis."], ["03", "Inspection at showroom", "30 minutes. We confirm condition, service history and ownership."], ["04", "Settlement & handover", "Same-day funds. No commission, no auction fees, no marketplace listing."], ].map(([n, h, p]) => (
{n}
{h}
{p}
))}
From our showroom floor Photo on file
); } function About() { return (
About · Founded 2021

Dubai.
Eight marques.
One showroom.

F1rst Motors is a Dubai-based luxury, exotic and hyper-car showroom on Sheikh Zayed Road. Founded in 2021, we curate stock across Bugatti, Ferrari, Lamborghini, Pagani, McLaren, Porsche, Mercedes-Benz and Rolls-Royce.

The F1rst Motors team
The team · Sheikh Zayed Rd showroom Photo on file
{[ ["1,000+", "Cars sold", "Figure stated by F1rst Motors."], ["$250M+", "Inventory value", "Figure stated by F1rst Motors."], ["2021", "Founded", "In Dubai, on Sheikh Zayed Road."], ].map(([v, k, n]) => (
{k}
{v}
{n}
))}
); } function Contact({ onEnquire }) { return (
Contact · Visit us

Drop in.
Or drop us a line.

Showroom
Danube Building, 409 Sheikh Zayed Rd
Al Quoz 1, Dubai · UAE
Coords client to confirm before publication
Hours
{[["Sun – Thu", "10:00 – 21:00"], ["Saturday", "10:00 – 21:00"], ["Friday", "14:00 – 21:00"]].map(([k, v]) => (
{k} {v}
))}
Direct
+971 4 320 1030 info@f1rstmotors.com
WhatsApp — pending verified number
Open today
F1rst Motors
); } // ─── Tweaks panel ──────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#E11D2A", "displayFont": "Geist", "rtlPreview": false, "showDemoBadges": true }/*EDITMODE-END*/; function TweaksRoot({ tweaks, setTweak }) { return ( setTweak("accent", v)} /> setTweak("displayFont", v)} /> setTweak("rtlPreview", v)} /> setTweak("showDemoBadges", v)} /> ); } // ─── App ───────────────────────────────────────────────────────── function App() { // route shape: { page, slug?, filter? } const [route, setRoute] = useStateA(() => { const h = window.location.hash.replace(/^#/, ""); if (h.startsWith("vehicle/")) return { page: "vehicle", slug: h.slice("vehicle/".length) }; if (h && ["home", "inventory", "sell", "about", "contact"].includes(h)) return { page: h }; return { page: "home" }; }); const [lang, setLang] = useStateA("en"); const [modal, setModal] = useStateA({ open: false, intent: "enquire", vehicle: null }); const [tweaks, setTweakFn] = useTweaks(TWEAK_DEFAULTS); // Apply tweaks → CSS vars + font swap + RTL + badge visibility useEffectA(() => { const root = document.documentElement; root.style.setProperty("--accent", tweaks.accent); // adjust hot/deep variants relative if (tweaks.accent === "#E11D2A") { root.style.setProperty("--accent-hot", "#FF2A38"); } else { root.style.setProperty("--accent-hot", tweaks.accent); } const fontStack = tweaks.displayFont === "Instrument Serif" ? `"Instrument Serif", "Times New Roman", serif` : tweaks.displayFont === "Space Grotesk" ? `"Space Grotesk", "Geist", sans-serif` : `"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif`; root.style.setProperty("--display", fontStack); // RTL document.documentElement.setAttribute("dir", tweaks.rtlPreview ? "rtl" : "ltr"); // Demo badge visibility document.documentElement.setAttribute("data-show-demo", tweaks.showDemoBadges ? "true" : "false"); // dynamically load alternate fonts on demand const id = "tweak-extra-fonts"; if (!document.getElementById(id)) { const link = document.createElement("link"); link.id = id; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap"; document.head.appendChild(link); } }, [tweaks.accent, tweaks.displayFont, tweaks.rtlPreview, tweaks.showDemoBadges]); // Sync lang with rtl tweak (for label consistency in demo) useEffectA(() => { if (tweaks.rtlPreview && lang === "en") setLang("ar"); if (!tweaks.rtlPreview && lang === "ar") setLang("en"); }, [tweaks.rtlPreview]); // Hash-based routing useEffectA(() => { const onHash = () => { const h = window.location.hash.replace(/^#/, ""); if (h.startsWith("vehicle/")) setRoute({ page: "vehicle", slug: h.slice("vehicle/".length) }); else if (h && ["home", "inventory", "sell", "about", "contact"].includes(h)) setRoute({ page: h }); else setRoute({ page: "home" }); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); // Scroll progress useEffectA(() => { const f = () => { const max = document.documentElement.scrollHeight - window.innerHeight; const p = max > 0 ? (window.scrollY / max) * 100 : 0; document.documentElement.style.setProperty("--scroll", p + "%"); }; f(); window.addEventListener("scroll", f, { passive: true }); return () => window.removeEventListener("scroll", f); }, []); const navigate = useCallbackA((next) => { setRoute(next); if (next.page === "vehicle") window.location.hash = `vehicle/${next.slug}`; else window.location.hash = next.page; window.scrollTo({ top: 0, behavior: "smooth" }); }, []); const onSelectVehicle = (slug) => navigate({ page: "vehicle", slug }); const onEnquire = ({ intent = "enquire", vehicle = null } = {}) => { setModal({ open: true, intent, vehicle }); }; return ( <>
{route.page === "home" && } {route.page === "inventory" && } {route.page === "vehicle" && } {route.page === "sell" && } {route.page === "about" && } {route.page === "contact" && }