/* =====================================================
   BLUEPRINT, SVG technical-illustration library
   Single-weight strokes. Cyan/bone on navy (or navy on bone).
   Used in place of photographs throughout Paragmatiq.
   ===================================================== */

/* Default stroke colors. Override per-instance via `accent` / `base` props. */
const BP = {
  base: '#7AC9D1',     // primary stroke (cyan)
  bone: '#F7F2E8',     // light stroke / labels
  gold: '#C9A14A',     // highlight stroke
  red:  '#B22234',     // alert stroke
  dim:  'rgba(247,242,232,0.30)',
  fill: 'rgba(122,201,209,0.06)',
};

/* Reusable mono callout label, position-anchored */
function BpLabel({ x, y, text, anchor = 'start', color = BP.bone, size = 9 }) {
  return (
    <text x={x} y={y} fill={color} fontFamily="IBM Plex Mono, monospace" fontSize={size} letterSpacing="0.14em" textAnchor={anchor} style={{ textTransform: 'uppercase' }}>{text}</text>
  );
}

/* Dimension line with arrowheads + label */
function BpDim({ x1, y1, x2, y2, label, color = BP.dim, labelColor = BP.bone }) {
  return (
    <g>
      <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth="1" />
      <line x1={x1} y1={y1-4} x2={x1} y2={y1+4} stroke={color} strokeWidth="1" />
      <line x1={x2} y1={y2-4} x2={x2} y2={y2+4} stroke={color} strokeWidth="1" />
      {label && <BpLabel x={(x1+x2)/2} y={y1-6} text={label} anchor="middle" color={labelColor} />}
    </g>
  );
}

/* ----- The big switchboard: each "kind" renders a different scene ----- */
function BlueprintIllustration({ kind = 'control-room', light = false, corner = ['', ''], tag = '', children, style = {}, viewBox }) {
  const stroke = light ? '#0A1F44' : BP.base;
  const accent = light ? '#C9A14A' : BP.gold;
  const labelColor = light ? '#1B2030' : BP.bone;
  const effectiveViewBox = viewBox || "0 0 600 320";

  return (
    <div className={'blueprint ' + (light ? 'on-light' : '')} style={{ width: '100%', ...style }}>
      {(corner[0] || corner[1]) && (
        <div className="blueprint-corner">
          <span>{(corner[0] && !/^(DWG-|PMQ$)/i.test(corner[0]) && !/^\d+\s*\/\s*\d+$/.test(corner[0])) ? corner[0] : ''}</span>
          <span>{(corner[1] && !/^(DWG-|PMQ$|SOLUTION$|SCENARIO$|.*\/\s*HERO$|.*\/\s*HUB$|.*\/\s*\d+$|UNDERSTANDING$|INDUSTRY$|CONTACT$|PILOT$|V[12]$)/i.test(corner[1])) ? corner[1] : ''}</span>
        </div>
      )}
      <svg className="blueprint-svg" viewBox={effectiveViewBox} preserveAspectRatio="xMidYMid meet" fill="none" style={{ position: 'absolute', inset: 36 }}>
        {SCENES[kind] ? SCENES[kind]({ stroke, accent, labelColor, light }) : SCENES['control-room']({ stroke, accent, labelColor, light })}
      </svg>
      {children}
      {tag && (
        <div className="blueprint-meta">
          <span className="blueprint-tag">{tag}</span>
        </div>
      )}
    </div>
  );
}

/* ----- Scene library: each is a function returning <g>...</g> ----- */
const SCENES = {

  /* Home hero, Control room elevation with PTT base, monitors, operator */
  'control-room': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Ground line + room outline */}
      <line x1="20" y1="280" x2="580" y2="280" stroke={stroke} strokeWidth="1.4" />
      <line x1="20" y1="40" x2="580" y2="40" stroke={stroke} strokeWidth="0.7" strokeDasharray="3 4" />
      {/* Console front */}
      <rect x="40" y="200" width="520" height="80" stroke={stroke} strokeWidth="1.4" />
      <line x1="40" y1="220" x2="560" y2="220" stroke={stroke} strokeWidth="0.7" />
      {/* Monitors */}
      <rect x="80" y="110" width="100" height="70" stroke={stroke} strokeWidth="1.4" />
      <rect x="200" y="100" width="120" height="80" stroke={stroke} strokeWidth="1.4" />
      <rect x="340" y="110" width="100" height="70" stroke={stroke} strokeWidth="1.4" />
      {/* Monitor content abstraction, channel rows */}
      {[0,1,2,3].map(i => (<line key={i} x1="90" y1={125 + i*12} x2="170" y2={125 + i*12} stroke={stroke} strokeWidth="0.5" strokeDasharray="2 2"/>))}
      {[0,1,2,3,4].map(i => (<line key={i} x1="210" y1={115 + i*12} x2="310" y2={115 + i*12} stroke={stroke} strokeWidth="0.5" strokeDasharray="2 2"/>))}
      {[0,1,2,3].map(i => (<line key={i} x1="350" y1={125 + i*12} x2="430" y2={125 + i*12} stroke={stroke} strokeWidth="0.5" strokeDasharray="2 2"/>))}
      {/* PTT base station */}
      <rect x="460" y="160" width="80" height="40" stroke={accent} strokeWidth="1.4" fill={BP.fill} />
      <circle cx="478" cy="180" r="6" stroke={accent} strokeWidth="1.2" />
      <circle cx="498" cy="180" r="6" stroke={accent} strokeWidth="1.2" />
      <line x1="514" y1="175" x2="534" y2="175" stroke={accent} strokeWidth="1" />
      <line x1="514" y1="180" x2="534" y2="180" stroke={accent} strokeWidth="1" />
      <line x1="514" y1="185" x2="534" y2="185" stroke={accent} strokeWidth="1" />
      {/* Antenna */}
      <line x1="500" y1="160" x2="500" y2="130" stroke={accent} strokeWidth="1.2" />
      <line x1="495" y1="130" x2="505" y2="130" stroke={accent} strokeWidth="1" />
      {/* Operator silhouette in profile */}
      <g transform="translate(40,140)">
        <circle cx="20" cy="20" r="14" stroke={stroke} strokeWidth="1.4" />
        <path d="M 5 60 L 5 38 Q 5 28 20 28 Q 35 28 35 38 L 35 60" stroke={stroke} strokeWidth="1.4" />
        <path d="M 5 60 L 0 80" stroke={stroke} strokeWidth="1.4" />
        <path d="M 35 60 L 40 80" stroke={stroke} strokeWidth="1.4" />
        {/* Headset arc */}
        <path d="M 6 14 Q 20 -2 34 14" stroke={accent} strokeWidth="1.4" />
        <line x1="6" y1="14" x2="2" y2="22" stroke={accent} strokeWidth="1.4" />
      </g>
      {/* Callouts */}
      <BpLabel x="500" y="158" text="PTT-01" anchor="middle" color={accent} />
      <BpLabel x="140" y="98" text="CH 12 · TX" anchor="middle" color={labelColor} />
      <BpLabel x="260" y="92" text="MAIN VIEW" anchor="middle" color={labelColor} />
      <BpLabel x="390" y="98" text="ALERTS" anchor="middle" color={labelColor} />
      {/* Dimensions */}
      <BpDim x1="40" y1="295" x2="560" y2="295" label="CONSOLE · 520U" color={BP.dim} labelColor={labelColor} />
      {/* Coord ticks */}
      {[0,1,2,3,4,5].map(i => (<line key={i} x1={20 + i*112} y1="278" x2={20 + i*112} y2="284" stroke={stroke} strokeWidth="0.7"/>))}
    </g>
  ),

  /* Mac Studio appliance, one per site */
  'appliance': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Surface */}
      <line x1="40" y1="260" x2="560" y2="260" stroke={stroke} strokeWidth="1.4" />
      <line x1="0" y1="270" x2="600" y2="270" stroke={stroke} strokeDasharray="3 4" strokeWidth="0.6" />
      {/* Mac Studio iso */}
      <g transform="translate(180,150)">
        <rect x="0" y="0" width="240" height="110" stroke={accent} strokeWidth="1.6" fill={BP.fill} />
        <line x1="0" y1="30" x2="240" y2="30" stroke={accent} strokeWidth="0.8" />
        <line x1="0" y1="80" x2="240" y2="80" stroke={accent} strokeWidth="0.8" />
        {/* Top vents */}
        {[...Array(18)].map((_,i) => (<circle key={i} cx={15 + i*12} cy="15" r="2" stroke={accent} strokeWidth="0.8" />))}
        {/* Power indicator */}
        <circle cx="220" cy="95" r="2.5" fill={accent} />
      </g>
      {/* Ethernet cable */}
      <path d="M 300 260 C 300 290 200 295 80 305" stroke={accent} strokeWidth="1.2" fill="none" />
      {/* Switch / network */}
      <rect x="40" y="285" width="120" height="30" stroke={stroke} strokeWidth="1.4" />
      <line x1="50" y1="295" x2="58" y2="295" stroke={stroke} strokeWidth="0.8" />
      <line x1="62" y1="295" x2="70" y2="295" stroke={stroke} strokeWidth="0.8" />
      <line x1="74" y1="295" x2="82" y2="295" stroke={stroke} strokeWidth="0.8" />
      <line x1="86" y1="295" x2="94" y2="295" stroke={stroke} strokeWidth="0.8" />
      {/* Boundary box */}
      <rect x="20" y="60" width="560" height="220" stroke={stroke} strokeDasharray="4 4" strokeWidth="0.7" />
      {/* Callouts */}
      <BpLabel x="300" y="140" text="DEDICATED APPLIANCE · ONE PER SITE" anchor="middle" color={accent} />
      <BpLabel x="100" y="282" text="SITE LAN" anchor="middle" color={labelColor} />
      <BpLabel x="40" y="74" text="SITE PERIMETER, DATA STAYS HERE" color={labelColor} />
      <BpDim x1="180" y1="270" x2="420" y2="270" label="240 mm" color={BP.dim} labelColor={labelColor} />
    </g>
  ),

  /* Refinery / process unit elevation */
  'refinery': ({ stroke, accent, labelColor }) => (
    <g>
      <line x1="0" y1="270" x2="600" y2="270" stroke={stroke} strokeWidth="1.4" />
      {/* Distillation column */}
      <rect x="80" y="80" width="50" height="190" stroke={stroke} strokeWidth="1.4" />
      {[100,130,160,190,220,250].map(y => <line key={y} x1="80" y1={y} x2="130" y2={y} stroke={stroke} strokeWidth="0.6" />)}
      {/* Tanks */}
      <ellipse cx="220" cy="220" rx="48" ry="14" stroke={stroke} strokeWidth="1.4" />
      <line x1="172" y1="220" x2="172" y2="270" stroke={stroke} strokeWidth="1.4" />
      <line x1="268" y1="220" x2="268" y2="270" stroke={stroke} strokeWidth="1.4" />
      <path d="M 172 270 A 48 14 0 0 0 268 270" stroke={stroke} strokeWidth="1.4" fill="none" />
      {/* Tank 2 */}
      <ellipse cx="350" cy="200" rx="42" ry="12" stroke={stroke} strokeWidth="1.4" />
      <line x1="308" y1="200" x2="308" y2="270" stroke={stroke} strokeWidth="1.4" />
      <line x1="392" y1="200" x2="392" y2="270" stroke={stroke} strokeWidth="1.4" />
      <path d="M 308 270 A 42 12 0 0 0 392 270" stroke={stroke} strokeWidth="1.4" fill="none" />
      {/* Flare stack */}
      <line x1="450" y1="270" x2="450" y2="50" stroke={stroke} strokeWidth="1.4" />
      <line x1="445" y1="50" x2="455" y2="50" stroke={stroke} strokeWidth="1.4" />
      <path d="M 450 50 Q 440 35 448 25 Q 452 35 460 22 Q 458 38 450 50" stroke={accent} strokeWidth="1.2" fill={BP.fill} />
      {/* Pipes */}
      <path d="M 130 110 L 200 110 L 200 200" stroke={stroke} strokeWidth="1.2" fill="none" />
      <path d="M 268 220 L 320 220 L 320 200" stroke={stroke} strokeWidth="1.2" fill="none" />
      <path d="M 392 220 L 450 220 L 450 240" stroke={stroke} strokeWidth="1.2" fill="none" />
      {/* Operator small figure */}
      <g transform="translate(500,230)">
        <circle cx="6" cy="6" r="5" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="11" x2="6" y2="30" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="18" x2="-2" y2="24" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="18" x2="14" y2="24" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="30" x2="0" y2="40" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="30" x2="12" y2="40" stroke={stroke} strokeWidth="1.2" />
        {/* Radio */}
        <rect x="-6" y="14" width="4" height="8" stroke={accent} strokeWidth="1" />
      </g>
      {/* Callouts */}
      <BpLabel x="105" y="74" text="C-401" anchor="middle" color={accent} />
      <BpLabel x="220" y="200" text="T-201" anchor="middle" color={labelColor} />
      <BpLabel x="350" y="180" text="T-202" anchor="middle" color={labelColor} />
      <BpLabel x="450" y="44" text="F-101" anchor="middle" color={accent} />
      {/* Permit board hint */}
      <rect x="60" y="40" width="44" height="30" stroke={accent} strokeWidth="1" strokeDasharray="2 2" />
      <BpLabel x="82" y="34" text="PTW BOARD" anchor="middle" color={accent} />
      <BpDim x1="100" y1="290" x2="500" y2="290" label="PROCESS UNIT" color={BP.dim} labelColor={labelColor} />
    </g>
  ),

  /* Waveform / multilingual chips */
  'waveform': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Waveform */}
      <path d="M 20 160 Q 50 80 80 160 Q 110 240 140 160 Q 170 100 200 160 Q 230 220 260 160 Q 290 90 320 160 Q 350 230 380 160 Q 410 110 440 160 Q 470 210 500 160 Q 530 100 560 160 Q 580 200 580 160" stroke={accent} strokeWidth="1.6" fill="none" />
      {/* Subtle echo */}
      <path d="M 20 160 Q 50 130 80 160 Q 110 190 140 160 Q 170 130 200 160 Q 230 190 260 160" stroke={stroke} strokeWidth="0.6" fill="none" strokeDasharray="2 3" />
      {/* Six language chips */}
      {[
        ['EN','English'], ['AR','العربية'], ['ES','Español'],
        ['FR','Français'], ['NL','Nederlands'], ['DE','Deutsch'],
      ].map(([c, n], i) => (
        <g key={c} transform={`translate(${30 + i * 92}, 250)`}>
          <rect width="80" height="40" stroke={stroke} strokeWidth="1.2" />
          <text x="40" y="20" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="14" fill={accent} letterSpacing="0.10em">{c}</text>
          <text x="40" y="33" textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="9" fill={labelColor}>{n}</text>
        </g>
      ))}
      <BpLabel x="20" y="40" text="SIGNAL · MULTILINGUAL AUTO-DETECT" color={labelColor} />
      <BpDim x1="30" y1="225" x2="582" y2="225" label="6 LANGUAGES SUPPORTED" color={BP.dim} labelColor={labelColor} />
    </g>
  ),

  /* Network / multi-site topology */
  'topology': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Central hub */}
      <circle cx="300" cy="160" r="28" stroke={accent} strokeWidth="1.6" fill={BP.fill} />
      <BpLabel x="300" y="164" text="CONTROL" anchor="middle" color={accent} />
      <BpLabel x="300" y="176" text="PLANE" anchor="middle" color={accent} />
      {/* Sites */}
      {[
        { x: 110, y: 90,  l: 'SITE A' },
        { x: 490, y: 90,  l: 'SITE B' },
        { x: 110, y: 230, l: 'SITE C' },
        { x: 490, y: 230, l: 'SITE D' },
        { x: 300, y: 60,  l: 'SITE E' },
      ].map(s => (
        <g key={s.l}>
          <rect x={s.x-30} y={s.y-18} width="60" height="36" stroke={stroke} strokeWidth="1.4" />
          <circle cx={s.x-18} cy={s.y} r="2" fill={stroke} />
          <rect x={s.x-10} y={s.y-6} width="24" height="12" stroke={stroke} strokeWidth="0.8" />
          <BpLabel x={s.x} y={s.y+30} text={s.l} anchor="middle" color={labelColor} />
          <path d={`M ${s.x} ${s.y} L 300 160`} stroke={stroke} strokeWidth="0.8" strokeDasharray="3 3" />
        </g>
      ))}
      <BpLabel x="300" y="290" text="ONE APPLIANCE PER SITE · UNIFIED CONTROL PLANE" anchor="middle" color={labelColor} />
    </g>
  ),

  /* Permit-to-work board */
  'permit-board': ({ stroke, accent, labelColor }) => (
    <g>
      <rect x="60" y="40" width="480" height="240" stroke={stroke} strokeWidth="1.6" />
      {/* Header row */}
      <line x1="60" y1="80" x2="540" y2="80" stroke={stroke} strokeWidth="1.4" />
      <BpLabel x="80" y="64" text="PERMIT TO WORK · ACTIVE" color={accent} />
      <BpLabel x="520" y="64" text="REV 12.3" anchor="end" color={labelColor} />
      {/* Permit cards */}
      {[0,1,2,3].map(r => (
        [0,1,2].map(c => (
          <g key={`${r}-${c}`}>
            <rect x={90 + c*145} y={100 + r*40} width="130" height="30" stroke={stroke} strokeWidth="0.8" />
            <line x1={90 + c*145 + 10} y1={117 + r*40} x2={90 + c*145 + 70} y2={117 + r*40} stroke={stroke} strokeWidth="0.4" strokeDasharray="2 2" />
            <line x1={90 + c*145 + 10} y1={123 + r*40} x2={90 + c*145 + 50} y2={123 + r*40} stroke={stroke} strokeWidth="0.4" strokeDasharray="2 2" />
            {r === 0 && c === 1 && <rect x={90 + c*145} y={100 + r*40} width="130" height="30" stroke={accent} strokeWidth="1.6" fill="rgba(201,161,74,0.10)" />}
          </g>
        ))
      ))}
      {/* Highlighted permit callout */}
      <BpLabel x="310" y="96" text="PTW-8841 · WATCHER VERIFIED" anchor="middle" color={accent} />
      <line x1="245" y1="106" x2="245" y2="130" stroke={accent} strokeWidth="1" strokeDasharray="2 2" />
      <BpDim x1="60" y1="295" x2="540" y2="295" label="PERMIT BOARD · OPERATIONS WALL" color={BP.dim} labelColor={labelColor} />
    </g>
  ),

  /* Stencilled equipment ID tag */
  'equipment-tag': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Pump housing background */}
      <rect x="40" y="40" width="520" height="240" stroke={stroke} strokeWidth="1.2" fill="none" />
      <line x1="40" y1="220" x2="560" y2="220" stroke={stroke} strokeWidth="0.6" strokeDasharray="3 3" />
      {/* Bolts */}
      {[60,540].map(x => [60,140,220,260].map(y => <circle key={`${x}-${y}`} cx={x} cy={y} r="5" stroke={stroke} strokeWidth="1" />))}
      {/* Stencilled tag */}
      <g transform="translate(160,90)">
        <rect width="280" height="120" stroke={accent} strokeWidth="2" fill={BP.fill} />
        <text x="140" y="78" textAnchor="middle" fontFamily="Inter Tight, sans-serif" fontWeight="800" fontSize="64" fill={accent} letterSpacing="0.04em">P-406</text>
      </g>
      <BpLabel x="40" y="30" text="STENCILLED EQUIPMENT ID" color={labelColor} />
      <BpLabel x="300" y="245" text="LEARNED FROM YOUR SITE" anchor="middle" color={accent} />
    </g>
  ),

  /* Evidence still life */
  'evidence': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Desk surface line */}
      <line x1="0" y1="270" x2="600" y2="270" stroke={stroke} strokeWidth="0.7" strokeDasharray="3 4" />
      {/* Folder */}
      <rect x="60" y="80" width="280" height="190" stroke={stroke} strokeWidth="1.4" />
      <line x1="60" y1="100" x2="340" y2="100" stroke={stroke} strokeWidth="1" />
      <BpLabel x="80" y="94" text="CASE FILE · INCIDENT 02-1183" color={accent} />
      {/* Transcript lines */}
      {[0,1,2,3,4,5,6,7,8].map(i => (
        <line key={i} x1="80" y1={120 + i*16} x2={i === 4 ? 280 : 320} y2={120 + i*16} stroke={stroke} strokeWidth="0.6" strokeDasharray="2 3" />
      ))}
      {/* Circled passage */}
      <ellipse cx="200" cy="184" rx="120" ry="14" stroke={accent} strokeWidth="1.8" fill="none" transform="rotate(-2 200 184)" />
      {/* Pen */}
      <line x1="360" y1="240" x2="500" y2="200" stroke={stroke} strokeWidth="2" />
      <line x1="500" y1="200" x2="510" y2="195" stroke={accent} strokeWidth="2" />
      {/* Date stamp */}
      <rect x="380" y="90" width="100" height="50" stroke={stroke} strokeWidth="1" />
      <BpLabel x="430" y="110" text="STAMPED" anchor="middle" color={labelColor} />
      <BpLabel x="430" y="126" text="2026-05-19" anchor="middle" color={accent} />
      {/* Audio playback indicator */}
      <g transform="translate(380,160)">
        <circle cx="14" cy="14" r="14" stroke={accent} strokeWidth="1.4" />
        <path d="M 11 8 L 11 20 L 20 14 Z" fill={accent} stroke="none" />
        <BpLabel x="40" y="18" text="AUDIO · 00:43" color={accent} />
      </g>
      <BpDim x1="60" y1="290" x2="510" y2="290" label="EVIDENCE-GRADE RECORD · EVERY ALERT" color={BP.dim} labelColor={labelColor} />
    </g>
  ),

  /* Procedure / Gantt-style checklist */
  'procedure': ({ stroke, accent, labelColor }) => (
    <g>
      <line x1="40" y1="60" x2="560" y2="60" stroke={stroke} strokeWidth="1" />
      {/* Time axis */}
      {[0,1,2,3,4,5,6,7,8].map(i => (
        <g key={i}>
          <line x1={40 + i*65} y1="56" x2={40 + i*65} y2="64" stroke={stroke} strokeWidth="0.8" />
          <BpLabel x={40 + i*65} y="50" text={`T+${i}`} anchor="middle" size={8} color={labelColor} />
        </g>
      ))}
      {/* Checkpoint rows */}
      {[
        { label: 'STARTUP CALL',     start: 0,  span: 1, ok: true },
        { label: 'VALVE CHECK · UNIT 4', start: 1, span: 2, ok: true },
        { label: 'PUMP P-406',       start: 3,  span: 1, ok: false },
        { label: 'GAS SAMPLE',       start: 4,  span: 1, ok: true },
        { label: 'CLOSURE CALL',     start: 6,  span: 1, ok: true },
      ].map((row, i) => (
        <g key={row.label} transform={`translate(0, ${90 + i*36})`}>
          <BpLabel x="20" y="14" text={row.label} color={labelColor} />
          <rect x={40 + row.start*65} y="4" width={row.span * 65 - 4} height="20" stroke={row.ok ? accent : '#B22234'} strokeWidth="1.4" fill={row.ok ? BP.fill : 'rgba(178,34,52,0.10)'} />
          {row.ok ? (
            <path d={`M ${42 + row.start*65 + 6} 14 L ${42 + row.start*65 + 12} 20 L ${42 + row.start*65 + 22} 8`} stroke={accent} strokeWidth="1.5" fill="none" />
          ) : (
            <text x={42 + row.start*65 + 14} y="18" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#B22234">MISSING</text>
          )}
        </g>
      ))}
      <BpLabel x="40" y="290" text="PROCEDURE · OPERATOR ROUND · UNIT 4" color={accent} />
    </g>
  ),

  /* Detection concept flowchart */
  'concept-flow': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Define node */}
      <rect x="60" y="100" width="120" height="60" stroke={accent} strokeWidth="1.6" fill={BP.fill} />
      <BpLabel x="120" y="124" text="DEFINE" anchor="middle" color={accent} />
      <BpLabel x="120" y="140" text="A CONCEPT" anchor="middle" size={8} color={labelColor} />
      {/* Arrow */}
      <line x1="180" y1="130" x2="240" y2="130" stroke={stroke} strokeWidth="1.2" />
      <path d="M 235 125 L 242 130 L 235 135" stroke={stroke} strokeWidth="1.2" fill="none" />
      {/* Evaluate node */}
      <rect x="240" y="100" width="120" height="60" stroke={accent} strokeWidth="1.6" fill={BP.fill} />
      <BpLabel x="300" y="124" text="EVALUATE" anchor="middle" color={accent} />
      <BpLabel x="300" y="140" text="ON HISTORY" anchor="middle" size={8} color={labelColor} />
      <line x1="360" y1="130" x2="420" y2="130" stroke={stroke} strokeWidth="1.2" />
      <path d="M 415 125 L 422 130 L 415 135" stroke={stroke} strokeWidth="1.2" fill="none" />
      {/* Improve node */}
      <rect x="420" y="100" width="120" height="60" stroke={accent} strokeWidth="1.6" fill={BP.fill} />
      <BpLabel x="480" y="124" text="IMPROVE" anchor="middle" color={accent} />
      <BpLabel x="480" y="140" text="CONTINUOUSLY" anchor="middle" size={8} color={labelColor} />
      {/* Loop back */}
      <path d="M 480 100 Q 480 50 300 50 Q 120 50 120 100" stroke={stroke} strokeWidth="1" strokeDasharray="3 4" fill="none" />
      <path d="M 125 105 L 120 100 L 125 95" stroke={stroke} strokeWidth="1" fill="none" />
      {/* Precision/recall meters */}
      <BpLabel x="240" y="220" text="PRECISION" color={labelColor} />
      <BpLabel x="240" y="250" text="RECALL" color={labelColor} />
      <rect x="320" y="212" width="180" height="10" stroke={stroke} strokeWidth="0.8" />
      <rect x="320" y="212" width="142" height="10" fill={accent} />
      <rect x="320" y="242" width="180" height="10" stroke={stroke} strokeWidth="0.8" />
      <rect x="320" y="242" width="124" height="10" fill={accent} />
      <BpLabel x="510" y="220" text="0.79" color={accent} />
      <BpLabel x="510" y="250" text="0.69" color={accent} />
    </g>
  ),

  /* Aircraft on ramp */
  'aircraft-ramp': ({ stroke, accent, labelColor }) => (
    <g>
      <line x1="0" y1="240" x2="600" y2="240" stroke={stroke} strokeWidth="1" strokeDasharray="6 4" />
      {/* Fuselage */}
      <path d="M 80 200 L 100 175 L 480 175 L 540 195 L 540 215 L 100 215 L 80 200 Z" stroke={stroke} strokeWidth="1.4" />
      {/* Cockpit windows */}
      <line x1="90" y1="195" x2="110" y2="195" stroke={stroke} strokeWidth="0.8" />
      <line x1="90" y1="200" x2="120" y2="200" stroke={stroke} strokeWidth="0.8" />
      {/* Cabin windows */}
      {[0,1,2,3,4,5,6,7,8,9,10,11,12,13].map(i => (<circle key={i} cx={150 + i*22} cy="195" r="3" stroke={stroke} strokeWidth="0.7" />))}
      {/* Engine */}
      <ellipse cx="280" cy="225" rx="40" ry="14" stroke={accent} strokeWidth="1.4" fill={BP.fill} />
      <ellipse cx="280" cy="225" rx="30" ry="9" stroke={accent} strokeWidth="0.8" />
      {/* Wing */}
      <line x1="220" y1="215" x2="200" y2="240" stroke={stroke} strokeWidth="1" />
      <line x1="340" y1="215" x2="360" y2="240" stroke={stroke} strokeWidth="1" />
      {/* Tail */}
      <path d="M 480 175 L 530 130 L 540 175" stroke={stroke} strokeWidth="1.4" />
      {/* Ground crew radio */}
      <g transform="translate(120,250)">
        <circle cx="6" cy="6" r="5" stroke={stroke} strokeWidth="1" />
        <line x1="6" y1="11" x2="6" y2="30" stroke={stroke} strokeWidth="1" />
        <rect x="-4" y="14" width="3" height="8" stroke={accent} strokeWidth="1" />
        <line x1="6" y1="18" x2="14" y2="22" stroke={stroke} strokeWidth="1" />
        <line x1="6" y1="30" x2="0" y2="40" stroke={stroke} strokeWidth="1" />
        <line x1="6" y1="30" x2="12" y2="40" stroke={stroke} strokeWidth="1" />
      </g>
      <g transform="translate(440,250)">
        <circle cx="6" cy="6" r="5" stroke={stroke} strokeWidth="1" />
        <line x1="6" y1="11" x2="6" y2="30" stroke={stroke} strokeWidth="1" />
        <rect x="8" y="14" width="3" height="8" stroke={accent} strokeWidth="1" />
        <line x1="6" y1="18" x2="-2" y2="22" stroke={stroke} strokeWidth="1" />
        <line x1="6" y1="30" x2="0" y2="40" stroke={stroke} strokeWidth="1" />
        <line x1="6" y1="30" x2="12" y2="40" stroke={stroke} strokeWidth="1" />
      </g>
      {/* Comm beams */}
      <path d="M 134 256 Q 280 270 460 256" stroke={accent} strokeWidth="0.8" strokeDasharray="2 3" fill="none" />
      <BpLabel x="300" y="290" text="RAMP COORDINATION · MULTILINGUAL CREW" anchor="middle" color={accent} />
      <BpLabel x="20" y="40" text="AIRCRAFT · RAMP OPS · ELEV." color={labelColor} />
    </g>
  ),

  /* Underground mining tunnel */
  'mine-tunnel': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Tunnel arch */}
      <path d="M 80 280 L 80 180 Q 80 80 300 80 Q 520 80 520 180 L 520 280 Z" stroke={stroke} strokeWidth="1.6" />
      {/* Inner darker tunnel suggesting depth */}
      <path d="M 180 280 L 180 220 Q 180 160 300 160 Q 420 160 420 220 L 420 280" stroke={stroke} strokeWidth="1" strokeDasharray="4 4" />
      {/* Track lines */}
      <line x1="80" y1="280" x2="220" y2="260" stroke={stroke} strokeWidth="1" />
      <line x1="520" y1="280" x2="380" y2="260" stroke={stroke} strokeWidth="1" />
      {/* Miners */}
      <g transform="translate(140,220)">
        <circle cx="6" cy="6" r="6" stroke={stroke} strokeWidth="1.2" />
        <path d="M 0 6 L 12 6 L 6 -2 Z" stroke={accent} strokeWidth="1.4" fill={BP.fill} />
        <line x1="6" y1="12" x2="6" y2="40" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="22" x2="-3" y2="30" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="22" x2="15" y2="30" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="40" x2="-2" y2="58" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="40" x2="14" y2="58" stroke={stroke} strokeWidth="1.2" />
      </g>
      <g transform="translate(440,210)">
        <circle cx="6" cy="6" r="6" stroke={stroke} strokeWidth="1.2" />
        <path d="M 0 6 L 12 6 L 6 -2 Z" stroke={accent} strokeWidth="1.4" fill={BP.fill} />
        <line x1="6" y1="12" x2="6" y2="40" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="22" x2="-3" y2="30" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="22" x2="15" y2="30" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="40" x2="-2" y2="58" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="40" x2="14" y2="58" stroke={stroke} strokeWidth="1.2" />
      </g>
      {/* Headlamp beams */}
      <path d="M 152 222 L 200 245" stroke={accent} strokeWidth="0.7" strokeDasharray="2 3" />
      <path d="M 452 212 L 400 235" stroke={accent} strokeWidth="0.7" strokeDasharray="2 3" />
      <BpLabel x="300" y="60" text="UNDERGROUND OPERATIONS · TUNNEL XS" anchor="middle" color={accent} />
    </g>
  ),

  /* Dispatch console at night */
  'dispatch-console': ({ stroke, accent, labelColor }) => (
    <g>
      <rect x="100" y="180" width="400" height="100" stroke={stroke} strokeWidth="1.4" />
      <line x1="100" y1="200" x2="500" y2="200" stroke={stroke} strokeWidth="0.7" />
      {/* Monitors */}
      {[0,1,2].map(i => (
        <g key={i} transform={`translate(${100 + i*140}, 70)`}>
          <rect width="120" height="80" stroke={stroke} strokeWidth="1.4" />
          <line x1="0" y1="80" x2="120" y2="80" stroke={stroke} strokeWidth="0.7" />
          <line x1="55" y1="80" x2="55" y2="92" stroke={stroke} strokeWidth="0.7" />
          <line x1="65" y1="80" x2="65" y2="92" stroke={stroke} strokeWidth="0.7" />
          {[0,1,2,3,4,5].map(j => (<line key={j} x1="10" y1={12 + j*10} x2={i === 1 ? 90 : 70} y2={12 + j*10} stroke={stroke} strokeWidth="0.5" strokeDasharray="2 3" />))}
          {i === 1 && <rect x="6" y="6" width="108" height="14" stroke={accent} strokeWidth="1.4" fill={BP.fill} />}
        </g>
      ))}
      {/* Dispatcher */}
      <g transform="translate(440,200)">
        <circle cx="6" cy="6" r="9" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="14" x2="6" y2="45" stroke={stroke} strokeWidth="1.2" />
        <path d="M -2 4 Q 6 -4 14 4" stroke={accent} strokeWidth="1.2" />
      </g>
      <BpLabel x="300" y="58" text="DISPATCH · CONSOLE A · NIGHT SHIFT" anchor="middle" color={accent} />
      <BpLabel x="170" y="100" text="CH 01-04" anchor="middle" color={labelColor} />
      <BpLabel x="310" y="100" text="ACTIVE" anchor="middle" color={accent} />
      <BpLabel x="450" y="100" text="CH 09-12" anchor="middle" color={labelColor} />
    </g>
  ),

  /* Concept noticeboard */
  'noticeboard': ({ stroke, accent, labelColor }) => (
    <g>
      <rect x="40" y="40" width="520" height="240" stroke={stroke} strokeWidth="1.4" />
      <rect x="40" y="40" width="520" height="20" stroke={stroke} strokeWidth="0.6" fill={BP.fill} />
      <BpLabel x="50" y="54" text="OPERATIONS · CONCEPTS WATCHED" color={accent} />
      {/* Pinned sheets at slight angles */}
      {[
        { x: 80, y: 90, rot: -3, lines: ['PERMIT-TO-WORK ISSUANCE','WATCHER NAMED?','CLOSURE CALL'] },
        { x: 240, y: 100, rot: 2, lines: ['FOD REPORTED ON RAMP','CALLSIGN VERIFIED','LOCATION TAGGED'] },
        { x: 400, y: 85, rot: -2, lines: ['GAS ALARM ACK','CHANNEL ROUTING','RESPONSE WITHIN 30s'] },
        { x: 140, y: 200, rot: 4, lines: ['SHIFT HANDOVER COMPLETE','OPEN ITEMS LISTED','ACK BY INCOMING'] },
        { x: 340, y: 195, rot: -3, lines: ['CONTRACTOR ARRIVAL','ID VERIFIED','BRIEFING DELIVERED'] },
      ].map((s, i) => (
        <g key={i} transform={`translate(${s.x},${s.y}) rotate(${s.rot})`}>
          <rect width="120" height="80" stroke={stroke} strokeWidth="1" fill={BP.fill} />
          {/* Pin */}
          <circle cx="60" cy="0" r="3" fill={accent} />
          {s.lines.map((l, j) => (
            <text key={j} x="60" y={24 + j*16} textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="8" fill={labelColor} letterSpacing="0.06em">{l}</text>
          ))}
        </g>
      ))}
    </g>
  ),

  /* Shift change board */
  'shift-board': ({ stroke, accent, labelColor }) => (
    <g>
      <rect x="40" y="40" width="520" height="240" stroke={stroke} strokeWidth="1.4" />
      <line x1="300" y1="40" x2="300" y2="280" stroke={stroke} strokeWidth="1.4" />
      <line x1="40" y1="74" x2="560" y2="74" stroke={stroke} strokeWidth="1" />
      <BpLabel x="170" y="62" text="OUTGOING SHIFT" anchor="middle" color={accent} />
      <BpLabel x="430" y="62" text="INCOMING SHIFT" anchor="middle" color={accent} />
      {/* Items */}
      {[
        { side: 'L', label: 'PERMITS OPEN', value: '3' },
        { side: 'L', label: 'INCIDENTS', value: '1 ESC' },
        { side: 'L', label: 'EQUIP. ISOLATED', value: 'P-406' },
        { side: 'L', label: 'NEAR-MISSES', value: '2' },
        { side: 'R', label: 'PERMITS RECVD', value: '3' },
        { side: 'R', label: 'INCIDENTS', value: '1 OPEN' },
        { side: 'R', label: 'EQUIP. STATUS', value: 'ACK' },
        { side: 'R', label: 'NEW BRIEFING', value: 'READY' },
      ].map((row, i) => {
        const x = row.side === 'L' ? 60 : 320;
        const y = 100 + (i % 4) * 40;
        return (
          <g key={i}>
            <line x1={x} y1={y+14} x2={x + 220} y2={y+14} stroke={stroke} strokeWidth="0.4" strokeDasharray="2 3" />
            <text x={x} y={y+10} fontFamily="IBM Plex Mono, monospace" fontSize="9" fill={labelColor} letterSpacing="0.12em" textTransform="uppercase">{row.label}</text>
            <text x={x + 220} y={y+10} fontFamily="IBM Plex Mono, monospace" fontSize="10" fill={accent} letterSpacing="0.12em" textAnchor="end">{row.value}</text>
          </g>
        );
      })}
    </g>
  ),

  /* Alarm response timeline */
  'alarm-timeline': ({ stroke, accent, labelColor }) => (
    <g>
      <line x1="40" y1="160" x2="560" y2="160" stroke={stroke} strokeWidth="1.4" />
      {[0,1,2,3,4,5].map(i => (
        <g key={i}>
          <line x1={40 + i*104} y1="155" x2={40 + i*104} y2="165" stroke={stroke} strokeWidth="0.8" />
          <BpLabel x={40 + i*104} y="180" text={['T+0','+04s','+12s','+30s','+02m','+05m'][i]} anchor="middle" size={9} color={labelColor} />
        </g>
      ))}
      {[
        { x: 40,  l: 'ALARM' },
        { x: 144, l: 'DETECT' },
        { x: 248, l: 'ROUTE' },
        { x: 352, l: 'ACK' },
        { x: 456, l: 'CONFIRM' },
        { x: 560, l: 'ALL CLEAR' },
      ].map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy="160" r="6" stroke={accent} strokeWidth="1.4" fill={i === 0 ? '#B22234' : BP.fill} />
          <BpLabel x={p.x} y="140" text={p.l} anchor="middle" color={i === 0 ? '#B22234' : accent} />
        </g>
      ))}
      <BpLabel x="40" y="80" text="ALARM RESPONSE · TIMING LOG" color={accent} />
      <BpLabel x="40" y="240" text="EVERY EVENT TIMED · DEFENSIBLE TIMELINE" color={labelColor} />
    </g>
  ),

  /* Generic site map (industries hub) */
  'site-map': ({ stroke, accent, labelColor }) => (
    <g>
      <rect x="40" y="40" width="520" height="240" stroke={stroke} strokeWidth="1.2" strokeDasharray="6 4" />
      {/* Buildings */}
      <rect x="80" y="80" width="80" height="60" stroke={stroke} strokeWidth="1.4" />
      <rect x="200" y="100" width="60" height="40" stroke={stroke} strokeWidth="1.4" />
      <rect x="290" y="80" width="100" height="80" stroke={stroke} strokeWidth="1.4" />
      <rect x="420" y="110" width="80" height="50" stroke={stroke} strokeWidth="1.4" />
      <rect x="80" y="190" width="120" height="60" stroke={stroke} strokeWidth="1.4" />
      <rect x="240" y="200" width="80" height="50" stroke={stroke} strokeWidth="1.4" />
      <rect x="360" y="190" width="140" height="60" stroke={stroke} strokeWidth="1.4" />
      {/* Comm tower */}
      <line x1="500" y1="60" x2="500" y2="280" stroke={accent} strokeWidth="1.2" />
      <line x1="485" y1="60" x2="515" y2="60" stroke={accent} strokeWidth="1.2" />
      <line x1="490" y1="80" x2="510" y2="80" stroke={accent} strokeWidth="0.8" />
      <circle cx="500" cy="50" r="3" fill={accent} />
      {/* Signal arcs, kept within viewBox */}
      {[30,55,80].map(r => <path key={r} d={`M ${500-r} 80 A ${r} ${r} 0 0 1 ${500+r} 80`} stroke={accent} strokeWidth="0.6" strokeDasharray="2 3" fill="none" />)}
      <BpLabel x="300" y="32" text="SITE MAP · COMMS COVERAGE" anchor="middle" color={accent} />
    </g>
  ),

  /* Quadrant, products hub */
  'quadrant': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Cross axis */}
      <line x1="300" y1="20" x2="300" y2="300" stroke={stroke} strokeWidth="0.7" strokeDasharray="3 3" />
      <line x1="20" y1="160" x2="580" y2="160" stroke={stroke} strokeWidth="0.7" strokeDasharray="3 3" />
      {/* Quadrants, each tool */}
      {[
        { x: 110, y: 90,  l: 'VOICE',  d: 'CAPTURE · THREAD' },
        { x: 490, y: 90,  l: 'SAFE',   d: 'DETECT · ALERT', red: true },
        { x: 110, y: 230, l: 'OPS',    d: 'VERIFY · CLOSE' },
        { x: 490, y: 230, l: 'SIGNAL', d: 'DEFINE · LEARN', gold: true },
      ].map(q => (
        <g key={q.l}>
          <rect x={q.x - 90} y={q.y - 36} width="180" height="72" stroke={q.gold ? accent : (q.red ? '#B22234' : stroke)} strokeWidth="1.6" fill={BP.fill} />
          <text x={q.x} y={q.y - 6} textAnchor="middle" fontFamily="Inter Tight, sans-serif" fontWeight="800" fontSize="22" fill={q.gold ? accent : (q.red ? '#B22234' : labelColor)} letterSpacing="-0.02em">{q.l}</text>
          <BpLabel x={q.x} y={q.y + 18} text={q.d} anchor="middle" color={labelColor} />
        </g>
      ))}
      <BpLabel x="300" y="14" text="PORTFOLIO · FOUR MODULES" anchor="middle" color={labelColor} />
    </g>
  ),

  /* Generic abstract, used by stubs */
  'generic': ({ stroke, accent, labelColor }) => (
    <g>
      <circle cx="300" cy="160" r="120" stroke={stroke} strokeWidth="1.2" strokeDasharray="4 6" />
      <circle cx="300" cy="160" r="80" stroke={stroke} strokeWidth="1.2" />
      <circle cx="300" cy="160" r="40" stroke={accent} strokeWidth="1.6" fill={BP.fill} />
      <BpLabel x="300" y="164" text="PARAGMATIQ" anchor="middle" color={accent} />
      <BpLabel x="300" y="58" text="MODULE · OPERATIONAL LAYER" anchor="middle" color={labelColor} />
    </g>
  ),

  /* Stack diagram, Understanding intelligence layer */
  'stack': ({ stroke, accent, labelColor }) => (
    <g>
      {/* Layered stack */}
      {[
        { y: 50,  l: 'PRODUCT MODULES · VOICE · SAFE · OPS · SIGNAL', gold: true },
        { y: 100, l: 'PRAGMATIQ UNDERSTANDING · INTELLIGENCE LAYER',     accent: true },
        { y: 150, l: 'PER-SITE MODEL · YOUR VOCABULARY',               accent: true },
        { y: 200, l: 'TRANSCRIPTION · 6 LANGUAGES · DETECTION' },
        { y: 250, l: 'LOCAL HARDWARE · NO EXTERNAL AI PROVIDERS' },
      ].map((l, i) => (
        <g key={i}>
          <rect x="40" y={l.y} width="520" height="36" stroke={l.gold ? accent : stroke} strokeWidth={l.gold ? 1.8 : 1.2} fill={l.accent ? BP.fill : 'none'} />
          <text x="300" y={l.y + 23} textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="11" fill={l.gold || l.accent ? accent : labelColor} letterSpacing="0.10em">{l.l}</text>
        </g>
      ))}
    </g>
  ),

  /* Portrait Mac Studio appliance — used on 4:5 tall plates */
  'appliance-vertical': ({ stroke, accent, labelColor }) => (
    <g>
      <rect x="30" y="40" width="340" height="580" stroke={stroke} strokeDasharray="5 5" strokeWidth="0.9" />
      <BpLabel x="50" y="60" text="SITE PERIMETER · DATA STAYS HERE" color={labelColor} />
      <g transform="translate(85,160)">
        <rect x="0" y="0" width="230" height="120" stroke={accent} strokeWidth="1.6" fill={BP.fill} />
        <line x1="0" y1="36" x2="230" y2="36" stroke={accent} strokeWidth="0.8" />
        <line x1="0" y1="88" x2="230" y2="88" stroke={accent} strokeWidth="0.8" />
        {[...Array(17)].map((_,i) => (<circle key={i} cx={14 + i*12.5} cy="18" r="2.2" stroke={accent} strokeWidth="0.8" />))}
        <circle cx="210" cy="105" r="3" fill={accent} />
      </g>
      <BpLabel x="200" y="148" text="DEDICATED APPLIANCE · ONE PER SITE" anchor="middle" color={accent} />
      <BpDim x1="345" y1="160" x2="345" y2="280" label="" color={BP.dim} labelColor={labelColor} />
      <BpLabel x="356" y="220" text="120mm" anchor="start" color={labelColor} size={8} />
      <path d="M 280 280 C 280 360 230 380 150 420" stroke={accent} strokeWidth="1.4" fill="none" />
      <rect x="80" y="420" width="240" height="44" stroke={stroke} strokeWidth="1.4" />
      <line x1="80" y1="442" x2="320" y2="442" stroke={stroke} strokeWidth="0.6" />
      {[...Array(10)].map((_,i) => (<rect key={i} x={92 + i*22} y="448" width="12" height="10" stroke={stroke} strokeWidth="0.7" />))}
      {[...Array(5)].map((_,i) => (<circle key={i} cx={100 + i*44} cy="432" r="1.8" fill={accent} />))}
      <BpLabel x="200" y="416" text="SITE LAN · NETWORK SWITCH" anchor="middle" color={labelColor} />
      <g transform="translate(40,520)">
        <line x1="0" y1="0" x2="320" y2="0" stroke={stroke} strokeWidth="0.7" />
        <BpLabel x="0" y="22" text="NO EXTERNAL AI PROVIDERS" color={accent} />
        <BpLabel x="0" y="40" text="NO THIRD-PARTY DATA EGRESS" color={accent} />
        <BpLabel x="0" y="58" text="YOUR INFRASTRUCTURE · YOUR CONTROL" color={accent} />
        <g transform="translate(248,18)">
          <line x1="0" y1="6" x2="22" y2="6" stroke={accent} strokeWidth="1.2" />
          <path d="M 18 2 L 24 6 L 18 10" stroke={accent} strokeWidth="1.2" fill="none" />
          <line x1="-2" y1="-2" x2="26" y2="14" stroke={'#B22234'} strokeWidth="1.6" />
        </g>
        <g transform="translate(248,38)">
          <line x1="0" y1="6" x2="22" y2="6" stroke={accent} strokeWidth="1.2" />
          <path d="M 18 2 L 24 6 L 18 10" stroke={accent} strokeWidth="1.2" fill="none" />
          <line x1="-2" y1="-2" x2="26" y2="14" stroke={'#B22234'} strokeWidth="1.6" />
        </g>
      </g>
    </g>
  ),
};

/* Wire to window */
Object.assign(window, { BlueprintIllustration, BpLabel, BpDim, BP });