{/* ── Artwork ── The painted sky is always rendered, underneath rather than instead of the photograph. It costs nothing (three gradients, no request) and it is what the card shows while a remote image is still in flight — the alternative is a grey box resolving into a photo, which is the most obvious way for a poster to look broken on first paint. It is also the fallback if the URL ever dies. */}

{image && ( // Plain , not next/image: the registry installs this file into // projects that may not be Next, and a framework import would be a hard // failure there rather than a missing optimisation. // eslint-disable-next-line @next/next/no-img-element

)} {/* ── Grade ── Above the photograph and below the scrims, which is load-bearing for `tone`: soft-light with the sky's warm lower stop *lightens* the bottom of the frame, and the bottom of the frame is where four rows of white type sit. Sitting under the scrim means the 0.6 black lands after the lift and absorbs it, rather than the two working against each other. This is also what stops the painted sky being dead weight. Without it the sky is three tuned gradients that vanish the moment the photo loads; with it, the photo supplies structure and the sky supplies palette, so a photograph the component never chose still belongs to the card. */} {image && grade !== "none" && (

)} {/* ── Scrims ── The bottom one is load-bearing: it carries every line of type on the card, so it runs to 58% and leans darker than it looks like it needs to, because the photograph is a prop and guarantees nothing. The top one carries no text since the title came off. It stays as a vignette — it weights the frame and stops a bright sky from bleaching the top edge — but it is now composition, not legibility, so it is the first thing to delete if the top reads too heavy. Both are eased rather than written with Tailwind's from/via/to, which is a three-stop hand-approximation of a curve — `via-black/28` existed only to bend a straight line, and the real curve retires it. */}

{/* Grain sits *above* the scrims, not between them and the photograph. Two reasons. It grains the whole card as one surface, the way an emulsion would, instead of leaving the scrimmed third conspicuously clean. And a long black-to-transparent gradient is exactly the thing 8-bit colour renders as visible bands — dithering it with noise is the standard fix, so the grain earns its place twice. It stays below the content, so the glass pane's backdrop-filter samples it and smooths it away under the type. Grain that survived the blur would read as dirt on the glass rather than as film. */}

{/* ── Progressive blur ── The blur is its own stack of empty layers, separate from the text, because the fade is done with a mask and a mask applied to the pane would fade the type along with it. Each layer is masked to ramp in slightly lower than the one before, so what you get is not one blurred rectangle with a soft edge but a blur that genuinely deepens as it descends — layer n blurs the composite that layers 1..n-1 already produced, so the radii compound downward. Three layers is where the ramp stops reading as steps. */} {BLUR_LAYERS.map(({ blur, from, to }) => (

))} {/* The tint, on the same ramp. It is what makes the bottom read as a pane of glass rather than as a soft photograph, but it has to arrive with the blur or it draws its own edge across the card. */}

{/* ── Content ── Unmasked and unblurred, sitting over the stack. Positioned rather than laid out in flow: `top-1/2 bottom-0 inset-x-0` is the brief — full bleed to the card's edges, rising to the exact half. A flow element with negative margins could fake the bleed, but its height would be whatever the type happened to measure, and the half-and-half split is the composition here, not a side effect of it. */}

{from.code}

{from.city}

{from.time}

{/* ── Route track ── Sits low against the codes' baseline rather than centred in the row — the mark belongs under the flight, not beside it. The plane alone was a third object floating between two columns with nothing tying it to either. A terminal dot at each end and a dashed run into the plane makes the row read left-to-right as one journey instead of as three separate things. Built from flex children rather than one SVG on purpose: the two dashed runs are `flex-1`, so the gap around the plane is whatever is left over and the track fits its column exactly at any width. A single SVG would need either a fixed viewBox — wrong gap once the codes change length — or preserveAspectRatio="none", which would squash the terminal dots into ellipses. The plane is sized and stroked through className, not the `size`/`strokeWidth` props: those write width/height/stroke-width *attributes*, which take numbers, and every measurement here is in cqw. CSS beats a presentation attribute, so the class wins and the icon scales with the card like the type does. */}

{/* The track is decoration and stays hidden from the accessibility tree; the duration under it is not, so aria-hidden sits on the row rather than on the whole column. */} {/* Duration under the track, which is where every flight interface puts it — it is the one number that makes two clock times mean something, and without it the reader has to do timezone arithmetic to know whether this is a hop or a haul. Sits in the middle column because it belongs to the journey, not to either end of it. */}

{duration}

{to.code}

{to.city}

{to.time}

{/* No rule between the two: justify-between already opens a gap of most of the pane's height, and a divider inside a gap that wide separates nothing that isn't separated. The pane's own top edge is the only line the composition needs. Segment control, drawn not wired. The track carries no blur of its own: its backdrop is the pane, which is already a flat wash, so a second backdrop-filter would cost a compositing layer and change nothing you can see. The chosen segment is opaque white against a translucent track — that contrast is what says "chosen", and it survives whatever photograph sits underneath. */}

{options.map((option, i) => ( {option} ))}

); } ```