// src/case-illustration.jsx — SVG illustrations for case cards // Each illustration is industrial/technical, monochrome graphite + accent. function CaseIllustration({ kind, tag, stats }) { let svg = null; if (kind === "equipment") svg = ; else if (kind === "supplier") svg = ; else if (kind === "route") svg = ; return (
{/* grid background */} {/* tag chip */}
CASE / {tag}
{/* stats strip */} {stats && (
{stats.map(([k, v], i) => (
{k}
{v}
))}
)}
); } // ───────────────────────────────────────────────────────────── // EquipmentSVG — industrial machine schematic (technical drawing) // ───────────────────────────────────────────────────────────── function EquipmentSVG() { return ( {/* Crosshair marks */} {/* Industrial machine — schematic */} {/* base */} {/* body */} {/* dial */} {/* top stack */} {/* arm */} {/* labels */} M-04 EU-CE {/* Dimension lines */} 1240 mm {/* route indicator EU → CIS */} ORIGIN EU CIS HS 84.79 ); } // ───────────────────────────────────────────────────────────── // SupplierSVG — supplier network / shortlist matrix // ───────────────────────────────────────────────────────────── function SupplierSVG() { // 4x3 grid of supplier nodes; 3 are highlighted (shortlist) const cells = []; const cols = 6, rows = 4; // Build dot grid for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { cells.push({ c, r }); } } // shortlist positions (will be in accent + linked) const shortlist = [ { c: 1, r: 1, label: "S-A" }, { c: 3, r: 0, label: "S-B" }, { c: 4, r: 2, label: "S-C" }, ]; const dropped = { c: 2, r: 3, label: "S-X" }; const cellW = 50, cellH = 36, ox = 70, oy = 60; const px = (c) => ox + c * cellW; const py = (r) => oy + r * cellH; return ( {/* axes / labels */} МАТРИЦА ПОСТАВЩИКОВ CRITERIA PRICE LEAD-T DELIV {/* dot grid (non-shortlist) */} {cells.map(({ c, r }, i) => { const isShort = shortlist.some((s) => s.c === c && s.r === r); const isDropped = dropped.c === c && dropped.r === r; if (isShort || isDropped) return null; return ( ); })} {/* connection lines between shortlist */} {/* shortlist nodes */} {shortlist.map((s, i) => ( {s.label} ))} {/* dropped node */} DROPPED {/* result counter top-right */} SHORTLIST 3 / 27 CHECKED ); } // ───────────────────────────────────────────────────────────── // RouteSVG — multimodal logistics route (map abstraction) // ───────────────────────────────────────────────────────────── function RouteSVG() { return ( {/* world abstraction — horizontal latitude lines */} {/* route polyline */} {/* hub nodes */} {[ { x: 50, y: 150, label: "ORIGIN", mode: "FCT", primary: true }, { x: 110, y: 110, label: "HUB-1", mode: "TRUCK" }, { x: 180, y: 130, label: "HUB-2", mode: "RAIL" }, { x: 250, y: 90, label: "HUB-3", mode: "SEA" }, { x: 320, y: 130, label: "HUB-4", mode: "RAIL" }, { x: 360, y: 100, label: "DEST", mode: "WH", primary: true }, ].map((n, i) => ( {n.primary ? ( <> ) : ( <> )} {n.label} {n.mode} ))} {/* "old route" alternative — crossed-out */} OLD ROUTE · CLOSED {/* delta badge */} Δ TIME −9д vs. plan ); } Object.assign(window, { CaseIllustration });