// screens-journey-train.jsx — Duplicates of journey screens 08–11, but for the
// route walk 2 › RE11 (train) › bus 12 (Wasserbillig → Bd. F. Roosevelt, 48 min).
// ─────────────────────────────────────────────────────────────────────────────
// Mirrors screens-references.jsx (overview + boarding/transfer/arrival steps),
// reusing its design-system primitives. Only difference: the journey is now
// multi-modal (walk → train → bus) instead of bus-only (303/305/18), matching
// the supplied result card: 48 min · 17:45 – 18:33 · Step free · Not too crowded
// · Scheduled at 17:45 from Wasserbillig Plat. 2.
// Reuses window globals: Device, MapView, Icon, React, JourneyTopBar,
// MapFabsTop, MapFabCompass, StreetViewThumb, AlsoAtRow, RideStopsRow,
// WalkRow, StopRow.
const TRAIL = 44; // rail column width — matches the node circle
// Same fixed-pitch, round-repeat dot pattern as screens-references.jsx's
// DOT_RAIL — kept in sync so a walk leg's dotted rail looks identical
// whichever file renders it.
const DOT_RAIL_TRAIN = { backgroundImage: "radial-gradient(circle, var(--fg-4) 1.6px, transparent 1.9px)", backgroundSize: "6px 9px", backgroundPosition: "center", backgroundRepeat: "no-repeat round" };
// ── Multi-mode summary bar: walk 2 › RE11 › 12 ───────────────────────────────
function TrainSummaryBar({ onClose = true, onBack = false, status = false }) {
return (
{onBack &&
}
2RE1112
{status &&
On time
}
{onClose &&
}
);
}
// ── Mode-aware stop node (train | bus | origin | dest) ───────────────────────
// Convention (keep for future screens): a mode node with NO `time` prop is a
// *boarding* stop — rendered as a light mode-tinted square tile with the mode
// icon inside. A mode node WITH a `time` prop is an *alighting* stop (where
// that ride ends) — rendered as a small hollow ring in the mode color, no
// icon, to read as "the end of this leg" before the walk dots continue.
function ModeStopRow({ node = "train", title, address, time, barBelow = null, last = false }) {
const RING = 16;
const square = (mode, glyph) =>
;
const ring = (mode) =>
;
// An alighting stop (has a `time`) picks up the ride's colored bar right where
// the previous row's bar left off — no gap/"stop" in the line before the ring —
// by bridging this row's own top padding with a same-color bar segment.
const headBar = (mode) =>
;
const alighting = (node === "bus" || node === "train") && !!time;
const nodeEl =
node === "origin" ? :
node === "dest" ? :
node === "bus" ? (time ? ring("bus") : square("bus", "bus")) :
(time ? ring("train") : square("train", "train"));
const tail = (val) => {
if (!val) return null;
if (val === "dotted") return ;
return ;
};
return (
);
}
// ── Mode-aware ride detail (line badge, destination, scheduled time, also-at) ─
function ModeDetail({ mode = "train", code, dest, time, alsoAt, stops, mins }) {
return (
{code}
{dest}
Scheduled
{time}
{alsoAt && }
);
}
// ── Footer for this journey (48 min · arrive 18:33) ──────────────────────────
function TrainJourneyFooter() {
return (
48 min
arrive 18:33 · On time
);
}
// ── Peek sheet shared by the overview screen ─────────────────────────────────
// Starts as a small peek; scrolling its content raises the sheet (like a real
// map bottom-sheet) so the rest of the journey summary comes into view.
function TrainPeekSheet() {
const [expanded, setExpanded] = React.useState(false);
return (