// components.jsx — shared UI: Nav, Footer, scenery, car illustrations const Nav = ({ transparent, onLogo, onSelectCar }) => { const [openMenu, setOpenMenu] = React.useState(null); React.useEffect(() => { const close = () => setOpenMenu(null); document.addEventListener("click", close); return () => document.removeEventListener("click", close); }, []); const toggle = (k, e) => { e.stopPropagation(); setOpenMenu(openMenu === k ? null : k); }; const pickCar = (c, e) => { e.stopPropagation(); setOpenMenu(null); if (onSelectCar) onSelectCar(c); }; return (

toggle("fleet", e)}> Fleet {openMenu === "fleet" && (

e.stopPropagation()}> {window.FLEET.map(c => ( pickCar(c, e)}> {c.name} {c.cat} · XCD {c.pricePerDay}/day ))}

)}

toggle("locations", e)}> Locations {openMenu === "locations" && (

e.stopPropagation()}>

Branches

{window.LOCATIONS.filter(l => ["kingstown", "aia", "ferry"].includes(l.id)).map(l => ( { e.stopPropagation(); setOpenMenu(null); }}> {l.name} {l.detail} ))}

Hotel & villa pickup

{window.LOCATIONS.filter(l => !["kingstown", "aia", "ferry"].includes(l.id)).map(l => ( { e.stopPropagation(); setOpenMenu(null); }}> {l.name} {l.detail} ))}

)}

Long-term Contact us

+1 784 458 4001

); }; const navDotColor = (id) => ({ "toyota-noah": "#ff6b4a", "suzuki-sx4-2012": "#f5b800", "toyota-vitz-2017": "#0fa098", "suzuki-escudo-2016": "#ff6b4a", "toyota-corolla-axio-2017": "#15303f", "suzuki-vitara-2017": "#0a6764", }[id] || "#0fa098"); // Hero scenery — Kingstown photo const HeroScene = () => (

); // Destination card SVG (small landscape) const DestSVG = ({ variant }) => { const palettes = { a: { sky1: "#ffd189", sky2: "#5dc4d4", sea: "#0fa098", mtn: "#0c524f", sand: "#f5ecda" }, b: { sky1: "#ffb27a", sky2: "#1ab2aa", sea: "#0a807a", mtn: "#0a3d3b", sand: "#ebdcb8" }, c: { sky1: "#ffe177", sky2: "#7fdbd1", sea: "#2bbab2", mtn: "#13524d", sand: "#fbf6ee" }, d: { sky1: "#ff8a6e", sky2: "#5dc4d4", sea: "#0fa098", mtn: "#0a6764", sand: "#f5ecda" }, }[variant]; return ( ); }; // ===== CAR ILLUSTRATIONS ===== const CarSedan = ({ color = "#0fa098" }) => ( ); const CarSUV = ({ color = "#15303f" }) => ( ); const CarVan = ({ color = "#ff6b4a" }) => ( ); const CarJimny = ({ color = "#f5b800" }) => ( ); const CarIllustration = ({ id }) => { switch (id) { case "toyota-vitz-2017": return ; case "toyota-corolla-axio-2017": return ; case "suzuki-sx4-2012": return ; case "suzuki-vitara-2017": return ; case "suzuki-escudo-2016": return ; case "toyota-noah": return ; default: return ; } }; const Footer = () => ( ); Object.assign(window, { Nav, HeroScene, DestSVG, CarIllustration, CarSedan, CarSUV, CarVan, CarJimny, Footer });