// RouteMap.jsx — interactive map, redesigned for clarity + mobile-friendly function RouteMap() { const { t } = window.useI18n(); const [active, setActive] = React.useState(0); const days = t.route.days; // Per-pin positions in a 100x100 viewBox. // Days 0 & 6 share Mahé (Eden Island); Days 2 & 5 share Praslin. const pinPositions = [ { x: 28, y: 72 }, // Day 0 — Mahé (Eden Island) { x: 24, y: 64 }, // Day 1 — Beau Vallon (Mahé) { x: 56, y: 40 }, // Day 2 — Praslin { x: 64, y: 30 }, // Day 3 — Curieuse / St Pierre { x: 73, y: 38 }, // Day 4 — La Digue { x: 56, y: 40 }, // Day 5 — Praslin (same as D2) { x: 28, y: 72 }, // Day 6 — Mahé finish (same as D0) ]; const pins = days.map((d, i) => ({ ...d, ...pinPositions[i], idx: i })); // Group pins by location key — share a badge when at same point. const byKey = {}; pins.forEach((p) => { const k = `${p.x}_${p.y}`; (byKey[k] = byKey[k] || []).push(p); }); // Unique stops in chronological order (first occurrence keeps position). const stops = []; const seenKey = new Set(); pins.forEach((p) => { const k = `${p.x}_${p.y}`; if (!seenKey.has(k)) { seenKey.add(k); stops.push({ ...p, days: byKey[k].map((q) => q.idx) }); } }); const pathFor = (slice) => slice.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" "); // Active stop = the unique stop containing the active day index. const activeStopIdx = stops.findIndex((s) => s.days.includes(active)); // For the highlighted route, build the path through pins[0..active]. const highlight = pathFor(pins.slice(0, active + 1)); return (
{t.route.eyebrow}

{t.route.title}

{t.route.sub}

{/* compass — top left */} N {/* scale bar — bottom right */} ~30 NM {/* MAHÉ */} MAHÉ {/* PRASLIN */} PRASLIN {/* CURIEUSE */} CURIEUSE {/* LA DIGUE */} LA DIGUE {/* dashed full route */} {/* highlighted segment up to active */} {/* Stops — one badge per unique location, lists all day numbers */} {stops.map((s, i) => { const isActive = activeStopIdx === i; const labelText = s.days.length > 1 ? "D" + s.days.join("·") : "D" + s.days[0]; const w = Math.max(3.6, 2.2 + labelText.length * 0.8); // Smart label offset to avoid island silhouettes let dx = 0, dy = 4.2; if (s.x < 30 && s.y > 65) { dx = 4.5; dy = 0.4; } // Mahé pins → label to the right if (s.x > 70) { dx = -4.5; dy = 0.4; } // La Digue → label to the left if (s.y < 32 && s.x > 60) { dx = 0; dy = -3.5; } // Curieuse → label above return ( setActive(s.days[0])} onMouseEnter={() => setActive(s.days[0])} style={{ cursor: "pointer" }} > {labelText} ); })}
{days.map((d, i) => (
setActive(i)} onMouseEnter={() => setActive(i)} >
{d.day}{d.date}

{d.title}

{d.loc}
{d.desc}
))}
); } window.RouteMap = RouteMap;