// Results page — list with map. function Results({ lang, search, setSearch, go, theme, results, loading, apiError }) { const t = COPY[lang]; const [sort, setSort] = React.useState("distance"); const [typeFilter, setTypeFilter] = React.useState({ indoor: true, outdoor: true, valet: true }); const [svcFilter, setSvcFilter] = React.useState({ shuttle: false, valet: false, ev: false, wash: false }); const [hoverId, setHoverId] = React.useState(null); const days = React.useMemo(() => { const a = new Date(search.from), b = new Date(search.to); return Math.max(1, Math.round((b - a) / (1000 * 60 * 60 * 24))); }, [search.from, search.to]); const filtered = React.useMemo(() => { let list = results.filter(p => p.airport === search.airport); list = list.filter(p => typeFilter[p.type]); const activeSvc = Object.entries(svcFilter).filter(([_, v]) => v).map(([k]) => k); if (activeSvc.length) list = list.filter(p => activeSvc.every(s => p.services.includes(s))); // enrich with dynamic pricing list = list.map(p => ({ ...p, pricing: computePricing(p, search, days) })); switch (sort) { case "price": list = [...list].sort((a, b) => a.pricing.perDay - b.pricing.perDay); break; case "distance": list = [...list].sort((a, b) => a.distanceKm - b.distanceKm); break; case "rating": list = [...list].sort((a, b) => b.rating - a.rating); break; default: list = [...list].sort((a, b) => (b.recommended ? 1 : 0) - (a.recommended ? 1 : 0)); } return list; }, [results, search, days, sort, typeFilter, svcFilter]); return (
{/* sticky search summary bar */}
{}} lang={lang} theme={theme} compact/>
{/* FILTERS */} {/* LIST */}
{loading ? (lang === "fr" ? "Recherche…" : "Searching…") : `${filtered.length} ${t.resultsTitle}`}
{search.airport === "CDG" ? "Paris-Charles de Gaulle" : "Paris-Orly"} · {days} {t.days} {apiError && · {lang === "fr" ? "données de démo" : "demo data"}}
{loading ? Array.from({ length: 3 }).map((_, i) => ) : filtered.map((p, i) => ( setHoverId(p.id)} onLeave={() => setHoverId(null)} onClick={() => go("detail", p.id)}/> ))}
{/* MAP */} go("detail", id)}/>
); } function FilterGroup({ title, children, theme }) { return (
{title}
{children}
); } function CheckRow({ checked, onChange, label, iconName, theme }) { return ( ); } function SkeletonCard({ theme }) { return (
); } function ResultCard({ parking, seed, lang, days, theme, onHover, onLeave, onClick }) { const pricing = parking.pricing || computePricing(parking, null, days); const total = pricing.total; const occPct = Math.round(pricing.occupancy * 100); const isPeak = pricing.season >= 1.2; const isHot = pricing.occupancy >= 0.85; return (
e.currentTarget.style.boxShadow = "0 8px 24px rgba(10,30,60,0.1)"} onMouseOut={e => e.currentTarget.style.boxShadow = "0 1px 3px rgba(10,20,40,0.04)"} >
{parking.badges.map(b => )}
{parking.name}
{parking.distanceKm} km · {parking.shuttleMin === 0 ? (lang === "fr" ? "Sur place" : "On site") : `${parking.shuttleMin} min`} · {parking.typeLabel[lang]}
{parking.rating} · {parking.reviews.toLocaleString(lang)} {COPY[lang].reviewsCount}
{days} {COPY[lang].days}
€{total.toFixed(2)}
€{pricing.perDay.toFixed(2)} {COPY[lang].perDay}
{(isPeak || isHot) && (
{isPeak ? seasonLabel(pricing.month, lang) : occupancyLabel(pricing.occupancy, lang)}
)}
{occPct}% {lang === "fr" ? "occupé" : "full"}
); } // Stylized map (not a real map) — gridded paper with pins function MapCard({ lang, theme, parkings, airport, hoverId, setHoverId, onSelect }) { return ( ); } Object.assign(window, { Results });