// CorridorMap.jsx, Stylised Vietnam ⇄ Japan map used by the // "find supplier by location" view. Pure SVG, hairline borders, // follows JVFood visual language (no gradients, navy + sand). const CM_VB_W = 1100; const CM_VB_H = 560; // Hand-traced country outlines, simplified, not cartographic. // Use stroke-linejoin: round so the polyline corners read as smooth curves. const VN_PATH = [ "M 245 92", // east coast top → bottom "L 254 120 L 262 152 L 268 188 L 275 224 L 278 262 L 274 298", "L 268 332 L 258 364 L 244 392 L 224 418 L 200 442", "L 176 462 L 152 482 L 128 500 L 118 514", // mekong tip "L 122 520 L 140 508 L 158 492", // west border bottom → top "L 182 472 L 200 444 L 208 408 L 204 372 L 198 338", "L 198 302 L 206 268 L 200 232 L 208 196 L 218 158", "L 228 126 L 240 100 Z", ].join(" "); // Japan: 4 separate paths so we can fill them as one country group. const JP_HOKKAIDO = "M 868 78 C 912 72, 948 96, 952 132 C 956 168, 928 196, 894 200 C 858 204, 826 184, 820 154 C 814 122, 838 82, 868 78 Z"; const JP_HONSHU = [ "M 765 408", "C 742 395, 758 376, 786 370", "C 812 364, 838 354, 850 336", "C 864 316, 880 308, 895 300", "C 914 292, 922 268, 918 240", "C 912 212, 894 200, 878 214", "C 862 230, 856 256, 850 282", "C 842 306, 826 326, 810 342", "C 792 360, 770 378, 750 392", "C 742 402, 754 412, 765 408 Z", ].join(" "); const JP_KYUSHU = "M 715 412 C 740 408, 755 426, 750 446 C 744 464, 720 470, 704 462 C 688 454, 682 432, 692 418 C 700 410, 708 410, 715 412 Z"; const JP_SHIKOKU = "M 772 408 C 792 408, 800 418, 790 426 C 778 432, 760 430, 754 422 C 750 414, 762 408, 772 408 Z"; // Trade-lane bezier path between two points (curves north over the East China Sea) const cmLanePath = (from, to) => { const dx = to.x - from.x; const cx1 = from.x + dx * 0.30; const cy1 = from.y - 120; const cx2 = from.x + dx * 0.70; const cy2 = to.y - 90; return `M ${from.x} ${from.y} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${to.x} ${to.y}`; }; const CorridorMap = ({ locations, // DM_LOCATIONS lanes, // DM_LANES, list with from/to ids countsByCity, // { "Hai Phong": 1, "Tokyo": 2, ... } selectedRegion = "all", selectedCity = null, hoverCity = null, highlightedRegion = null, // hover state on region chips onCityHover, onCityClick, onBackgroundClick, }) => { const locById = Object.fromEntries(locations.map(l => [l.id, l])); const isCityActive = (loc) => { if (selectedCity) return selectedCity === loc.id; if (hoverCity) return hoverCity === loc.id; if (highlightedRegion && highlightedRegion !== "all") return loc.region === highlightedRegion; if (selectedRegion !== "all") return loc.region === selectedRegion; return true; // unfiltered: all active }; const isCityDimmed = (loc) => { if (selectedCity) return selectedCity !== loc.id; if (highlightedRegion && highlightedRegion !== "all") return loc.region !== highlightedRegion; if (selectedRegion !== "all") return loc.region !== selectedRegion; return false; }; return (

{/* corner labels */}

Vietnam ⇄ Japan corridor

Supplier hub Selected Trade lane

{/* compass / scale */}

≈ 3 600 km

); }; Object.assign(window, { CorridorMap });