// Listing detail page — works for both cars and villas const { useState: useStateD, useMemo: useMemoD } = React; const useIsMobileD = () => useIsMobile(); function ListingDetail({ kind, id, go }) { const data = kind === "car" ? window.OUMIX_DATA.CARS.find(c => c.id === id) : window.OUMIX_DATA.VILLAS.find(v => v.id === id); const isCar = kind === "car"; const isMobile = useIsMobileD(); const [activeImg, setActiveImg] = useStateD(0); const [tab, setTab] = useStateD("overview"); const [booking, setBooking] = useStateD({ startDate: "2026-06-12", endDate: "2026-06-18", pickup: "RAK Airport", dropoff: "Same as Pick-up", guests: 4, extras: { chauffeur: false, childSeat: false, gpsRoaming: true, fullInsurance: true, chef: false, hammam: false, airportTransfer: true }, }); if (!data) return null; const nights = useMemoD(() => { const a = new Date(booking.startDate), b = new Date(booking.endDate); return Math.max(1, Math.round((b - a) / (1000*60*60*24))); }, [booking.startDate, booking.endDate]); const basePrice = isCar ? data.priceDay : data.priceNight; const extraPrice = isCar ? (booking.extras.chauffeur ? 120*nights : 0) + (booking.extras.childSeat ? 8*nights : 0) + (booking.extras.gpsRoaming ? 0 : 0) + (booking.extras.fullInsurance ? 30*nights : 0) : (booking.extras.chef ? 240*nights : 0) + (booking.extras.hammam ? 180 : 0) + (booking.extras.airportTransfer ? 90 : 0); const subtotal = basePrice * nights; const total = subtotal + extraPrice; const galleryLabels = isCar ? ["3/4 front, exterior", "interior — driver's seat", "rear 3/4", "dashboard detail", "wheel detail"] : ["pool by twilight", "primary suite", "courtyard", "kitchen & dining", "rooftop terrace"]; const amenitiesCar = [ "Burmester / Bowers audio", "Adaptive cruise", "Heated & ventilated seats", "Apple CarPlay & Android Auto", "Panoramic roof", "4-zone climate", "Heads-up display", "Soft-close doors", "Garmin GPS roaming", "Full insurance (CDW + theft + tyres)", "200 km/day included", "Sanitised cabin", ]; const amenitiesVilla = [ "Private heated pool", "Daily housekeeping", "Breakfast on request", "Full kitchen", "Air conditioning · all rooms", "Wi-Fi 1 Gbps", "Smart TVs / Apple TV", "Marshall sound system", "Hammam · in select estates", "Outdoor cinema · seasonal", "Yoga / fitness on request", "Babysitting on request", ]; return (
{/* Breadcrumb */}
/ / {data.name}
{/* Hero gallery */}
{isMobile ? (
) : (
)}
{/* Title block */}
{data.tag} {isCar ? data.category : data.style} {!isCar && {data.area}}

{data.name}

{[0,1,2,3,4].map(i => )} 4.97 · 128 reviews · Marrakech, Morocco · Available {booking.startDate} → {booking.endDate}
{/* Body grid */}
{/* LEFT */}
{/* Tabs */}
{[ ["overview", "Overview"], [isCar ? "specs" : "rooms", isCar ? "Specifications" : "Rooms & Spaces"], ["amenities", isCar ? "Equipment" : "Amenities"], ["policy", "Policy"], ["reviews", "Reviews"], ].map(([k, l]) => ( ))}
{tab === "overview" && } {tab === "specs" && isCar && } {tab === "rooms" && !isCar && } {tab === "amenities" && } {tab === "policy" && } {tab === "reviews" && }
{/* RIGHT — Booking card */}
{/* Related */}
); } function Row({ k, v, muted, bold }) { return (
{k} {v}
); } function DateInput({ label, value, onChange, border, top }) { return ( ); } function SelectInput({ label, value, onChange, options, border, top, span }) { return ( ); } const iconButtonStyle = { width: 44, height: 44, border: "1px solid var(--line-2)", background: "transparent", color: "var(--muted)", display: "grid", placeItems: "center", cursor: "pointer", }; function Overview({ data, isCar }) { return (

About this {isCar ? "vehicle" : "estate"}

{data.short} {isCar ? "Every Oumix vehicle is owned by the house, serviced on a 30-day cycle by the manufacturer's local representative, and inspected before every hand-over. Insurance is complimentary and comprehensive; a complete dossier of route suggestions and emergency contacts travels with the keys." : "The estate is presented with a full staff already in place — including a villa manager who lives a few minutes away. Breakfast is provided on request. Daily housekeeping is at a time of your choosing. Beyond the pool, your concierge can arrange a chef, a hammam, a yoga teacher, and excursions into the Atlas at short notice."}

{(isCar ? [ ["Year", data.year], ["Transmission", data.transmission], ["Power", data.power], ["Seats", data.seats], ["Colour", data.color], ["Fuel", "Premium 95"], ] : [ ["Bedrooms", data.bedrooms], ["Bathrooms", data.baths], ["Sleeps", data.guests], ["Area", data.area], ["Style", data.style], ["Min stay", "3 nights"], ] ).map(([k, v], i) => (
{k}
{v}
))}

What's included

); } function CarSpecs({ car }) { const specs = [ ["Engine", car.power.replace(" hp", " hp · Twin Turbo")], ["0–100 km/h", "5.4 s"], ["Top Speed", "250 km/h"], ["Drivetrain", "AWD"], ["Transmission", car.transmission + " · 9-speed"], ["Fuel", "Premium 95 / Diesel"], ["Tank", "85 L"], ["Range", "780 km"], ["Length", "5.04 m"], ["Wheelbase", "3.06 m"], ["Boot", "725 L"], ["Tyres", "Pirelli P-Zero · all-season"], ]; return (
{specs.map(([k, v], i) => (
{k} {v}
))}
); } function VillaRooms({ villa }) { const rooms = [ { name: "Primary Suite", area: "48 m²", details: "King bed · ensuite · private terrace" }, { name: "Junior Suite (×2)", area: "32 m²", details: "Queen bed · ensuite · garden view" }, { name: "Twin Room", area: "26 m²", details: "Two singles · shared bath" }, { name: "Salon Marocain", area: "62 m²", details: "Banquettes · fireplace · live-edge table" }, { name: "Kitchen", area: "38 m²", details: "Pro range · pastry station · pantry" }, { name: "Pool & Garden", area: "1,200 m²", details: "Heated 22m pool · pavilion · loungers" }, { name: "Rooftop Terrace", area: "180 m²", details: "Sunset bar · firepit · outdoor cinema" }, { name: "Hammam", area: "18 m²", details: "Tadelakt · steam · cold plunge" }, ]; return (
{rooms.slice(0, villa.bedrooms + 3).map((r, i) => (
{r.name}
{r.area}
{r.details}
))}
); } function Amenities({ items }) { return (
{items.map(it => (
{it}
))}
); } function Policy({ isCar }) { const items = isCar ? [ ["Booking", "No charge until confirmation. Card pre-authorisation 24h before pick-up."], ["Cancellation", "Free cancellation up to 48h before pick-up. After: 1-day rental held."], ["Insurance", "Comprehensive (CDW + theft + glass + tyres) included. Excess €1,000."], ["Drivers", "Minimum age 23 · 2 years' licence. Additional drivers free."], ["Mileage", "200 km/day included. €0.30 / km beyond."], ["Fuel", "Full to full. Refuel before drop-off or €25 service fee."], ["Borders", "Morocco only by default. Cross-border on request, with paperwork."], ] : [ ["Booking", "30% deposit at confirmation. Balance 30 days before check-in."], ["Cancellation", "Full refund up to 60 days · 50% up to 30 days · non-refundable after."], ["Check-in", "Anytime from 16:00. Late arrivals accommodated — concierge meets you."], ["Check-out", "By 11:00. Late check-out available depending on bookings."], ["Events", "Permitted with prior agreement. Damage deposit applies."], ["Children", "Welcome. Cribs and pool fences on request."], ["Pets", "On request. Most estates accommodate well-behaved dogs."], ]; return (
{items.map(([k, v], i) => (
{k}
{v}
))}
); } function Reviews() { const reviews = [ { initials: "AM", name: "Alessandra M.", country: "Milan, IT", date: "Apr 2026", text: "Karim met us at the airport with two glasses of mint tea and the keys to the Range. By the time we reached the villa, our luggage was already in the rooms. Faultless." }, { initials: "JD", name: "James D.", country: "London, UK", date: "Mar 2026", text: "We rented an S-Class for a Casa→Marrakech→Essaouira loop. The car was perfect; the line answered every question instantly; the price was honest." }, { initials: "RC", name: "Rachel C.", country: "Paris, FR", date: "Feb 2026", text: "Villa Najma is the real thing — an estate, not a rental. The staff are exceptional; the chef cooked the best tagine we'd had in a decade. Will return." }, ]; return (
{[0,1,2,3,4].map(i => )}
4.97 / 128 verified reviews
{reviews.map((r, i) => (
{r.initials}
{r.name}
{r.country} · {r.date}
{[0,1,2,3,4].map(i => )}

"{r.text}"

))}
); } function RelatedSection({ kind, excludeId, go }) { const isCar = kind === "car"; const isMobile = useIsMobileD(); const list = (isCar ? window.OUMIX_DATA.CARS : window.OUMIX_DATA.VILLAS).filter(x => x.id !== excludeId).slice(0, isMobile ? 2 : 3); return (

You may also consider.

{list.map(item => isCar ? : )}
); } Object.assign(window, { ListingDetail });