// Results screen — rich filterable list of flights const ScreenResults = ({ query, flights, selected, onSelect, onContinue, onBack }) => { const [sort, setSort] = useState("best"); const [stopsFilter, setStopsFilter] = useState("any"); const [maxPrice, setMaxPrice] = useState(1500); const filtered = useMemo(() => { let arr = flights.filter(f => f.price <= maxPrice); if (stopsFilter === "nonstop") arr = arr.filter(f => f.stops === 0); if (stopsFilter === "1stop") arr = arr.filter(f => f.stops <= 1); if (sort === "price") arr = [...arr].sort((a,b) => a.price - b.price); if (sort === "fastest") arr = [...arr].sort((a,b) => a.durationMin - b.durationMin); if (sort === "earliest") arr = [...arr].sort((a,b) => a.depMin - b.depMin); if (sort === "best") arr = [...arr].sort((a,b) => (a.price/100 + a.durationMin/60 + a.stops*2) - (b.price/100 + b.durationMin/60 + b.stops*2)); return arr; }, [flights, sort, stopsFilter, maxPrice]); return (
{/* Header strip */}
{filtered.length} corridors found · departing {query.departLabel}

{query.origin.city} to {query.dest.city}

{/* Inline arc */}
{query.origin.code}
{query.origin.name}
{query.dest.code}
{query.dest.name}
{/* Two-column layout */}
{/* Filter rail */} {/* Results column */}
{/* Sort row */}
Sort {[ ["best", "Best"], ["price", "Cheapest"], ["fastest", "Fastest"], ["earliest", "Earliest"] ].map(([k, l]) => ( ))}
{filtered.length} of {flights.length} flights
{/* Flight cards */}
{filtered.map((f, i) => { const isSel = selected?.id === f.id; return (
onSelect(f)} className={`rise rise-d${Math.min(i+1, 5)}`} style={{ background: "white", border: "1px solid", borderColor: isSel ? "var(--ink)" : "var(--line)", borderRadius: 18, padding: 22, cursor: "pointer", transition: "all .2s ease", boxShadow: isSel ? "0 12px 30px -12px rgba(11,26,43,.35)" : "0 1px 0 rgba(11,26,43,.02)", position: "relative", overflow: "hidden" }}> {isSel &&
}
{/* Carrier */}
{f.carrier.code}
{f.carrier.name}
Flight {f.id}
{/* Route */}
{fmtTime(f.depMin)}
{f.origin}
{f.stops > 0 && Array.from({ length: f.stops }).map((_, k) => ( ))}
{fmtDuration(f.durationMin)} · {f.stops === 0 ? "Nonstop" : `${f.stops} stop`}
{fmtTime(f.arrMin)}
{f.dest}
{/* Amenities */}
{/* Price */}
From
{fmtMoney(f.price)}
per person, all-in
{/* Sub strip */}
{f.aircraft} · {f.co2} kg CO₂e · {f.cabin} preferred {isSel ? <> Selected : <>Choose flight }
); })}
Selected
{selected.carrier.name} {selected.id} · {fmtTime(selected.depMin)} {selected.origin} → {fmtTime(selected.arrMin)} {selected.dest}
: Pick a flight to continue} right={selected &&
Subtotal
{fmtMoney(selected.price)}
} secondary="Back" onSecondary={onBack} primary="Choose seat" onPrimary={onContinue} primaryDisabled={!selected} />
); }; window.ScreenResults = ScreenResults;