// screens-marais.jsx — duplicates of the last 6 "Plan a journey" (section 03) screens // with their vector MapView replaced by the supplied Wasserbillig / Marais map image. // Everything else (sheets, chips, rows, modals) is an exact copy of the originals in // screens-references-v2.jsx / screens-plan-v2.jsx — only the map surface changes. // Reuses window globals: Device, DirectionsCard, FlatRouteRow, ResultsChips, Icon, React. // ── Interactive live-location dot at the START of the walking path (start of the blue dots) function MaraisLiveDot() { const [open, setOpen] = React.useState(false); return ( ); } // ── The supplied map image, cropped so the walking dots + train line + Wasserbillig read. function MaraisMap() { return (
); } // ═════════════════════════════════════════════════════════════ // Screen 01 — Route options (map swapped) + shared modal backdrop // ═════════════════════════════════════════════════════════════ function RouteOptionsContentV2Marais() { return (

Route options

); } function ModalBackdropV2Marais() { return ( <>
); } function RefRouteOptionsV2Marais({ dark = false }) { return ( ); } // ═════════════════════════════════════════════════════════════ // Screen 02 — Departure time picker (map swapped) // ═════════════════════════════════════════════════════════════ function RefTimePickerV2Marais({ dark = false }) { const Spinner = ({ values }) =>
{values.map((v, i) =>
{v}
)}
; const tabs = [{ id: "leave", label: "Leave", active: true }, { id: "arrive", label: "Arrive" }, { id: "last", label: "Last" }]; return (

Departure time

{/* Segmented tabs */}
{tabs.map((t) => )}
{/* Time spinner */}
:
{/* Day stepper */}
Today · Thu 30 May
); } // ═════════════════════════════════════════════════════════════ // Screen 03 — Preferred modes (map swapped) // ═════════════════════════════════════════════════════════════ function RefPreferredModesV2Marais({ dark = false }) { const modes = [ { icon: "train", label: "Train", sub: "CFL regional & intercity", mode: "train", on: true }, { icon: "bus", label: "Bus", sub: "RGTR · AVL · TICE", mode: "bus", on: true }, { icon: "tram", label: "Tram", sub: "Luxtram T1", mode: "tram", on: true }, { icon: "bicycle", label: "Bike · vel'OH", sub: "Personal bikes & shared bikes", mode: "bike", on: false }, { icon: "car", label: "Klaxit carpool", sub: "Shared car rides", mode: "car", on: false }]; return (

Preferred modes

Modes we'll prioritise in your results

{modes.map((m, i) =>
{m.label}
{m.sub}
)}
); } // ═════════════════════════════════════════════════════════════ // Screen 04 — Route filters (map swapped) // ═════════════════════════════════════════════════════════════ function RefFiltersV2Marais({ dark = false }) { const opts = [ { label: "Best route", sub: "Balance speed and transfers", sel: true }, { label: "Fewer transfers", sub: "Stay on fewer vehicles" }, { label: "Less walking", sub: "Shortest distance on foot" }, { label: "Step-free access", sub: "Avoid steps, prefer lifts and ramps" }]; return (

Filter by

{opts.map((o, i) =>
{o.sel && }
{o.label}
{o.sub}
)}
); } // ═════════════════════════════════════════════════════════════ // 04 · Options Preferences — v2 (map swapped) // ═════════════════════════════════════════════════════════════ function PlanOptionsPrefsV2Marais({ dark = false }) { const optimise = [ { icon: "lightning", label: "Fastest", sel: true }, { icon: "arrows-clockwise", label: "Fewer transfers" }, { icon: "person-simple-walk", label: "Less walking" }]; const modes = [ { icon: "train", label: "Train", sub: "CFL regional & intercity", mode: "train", on: true }, { icon: "bus", label: "Bus", sub: "RGTR · AVL · TICE", mode: "bus", on: true }, { icon: "tram", label: "Tram", sub: "Luxtram T1", mode: "tram", on: true }, { icon: "bicycle", label: "Bike · vel'OH", sub: "Personal & shared bikes", mode: "bike", on: false }, { icon: "car", label: "Klaxit carpool", sub: "Shared car rides", mode: "car", on: false }]; return (

Options

{/* Optimise for */}
{optimise.map((o) => )}
{/* Modes */}
Modes
{modes.map((m, i) =>
{m.label}
{m.sub}
)} {/* Accessibility */}
Accessibility
Step-free routes only
Use lifts and ramps; avoid stairs.
{/* Walking distance */}
Walking distance · max
100 m 800 m 2 km
); } Object.assign(window, { MaraisMap, MaraisLiveDot, RouteOptionsContentV2Marais, ModalBackdropV2Marais, RefRouteOptionsV2Marais, RefTimePickerV2Marais, RefPreferredModesV2Marais, RefFiltersV2Marais, PlanOptionsPrefsV2Marais });