/* OPTECH marketing — abstract technical visuals (no people, no robots, no brains) */
/* All visuals are inline React SVG components — currentColor-aware for ink/paper inversion. */

/* ===== HERO CANDIDATES ============================================
   Three abstract isometric/technical illustrations, no people / no robots,
   in the style of common public-domain SVG sets. The active one is chosen
   via the `variant` prop from HomePage's picker.
   ================================================================= */

function HeroDiagram({ variant = 'iso-cube' }) {
  if (variant === 'node-graph') return <HeroNodeGraph />;
  if (variant === 'iso-stack') return <HeroIsoStack />;
  return <HeroAgenticPlatform />;
}

/* ---------- A. ISO-CUBE STACK (FreeSVG / Openclipart isometric style) ---------- */
function HeroIsoStack() {
  const P = 'rgba(244,241,234,';
  // Isometric helpers: project (x,y,z) at iso angle
  const ix = (x, y) => 240 + (x - y) * 28;
  const iy = (x, y, z) => 240 + (x + y) * 16 - z * 32;
  const cube = (x, y, z, fillTop, fillL, fillR, stroke) => {
    const a = [ix(x, y), iy(x, y, z + 1)];
    const b = [ix(x + 1, y), iy(x + 1, y, z + 1)];
    const c = [ix(x + 1, y + 1), iy(x + 1, y + 1, z + 1)];
    const d = [ix(x, y + 1), iy(x, y + 1, z + 1)];
    const e = [ix(x, y), iy(x, y, z)];
    const f = [ix(x + 1, y), iy(x + 1, y, z)];
    const g = [ix(x, y + 1), iy(x, y + 1, z)];
    return (
      <g stroke={stroke} strokeWidth="1" strokeLinejoin="round">
        <polygon points={`${a} ${b} ${c} ${d}`} fill={fillTop} />
        <polygon points={`${a} ${e} ${f} ${b}`} fill={fillR} />
        <polygon points={`${a} ${e} ${g} ${d}`} fill={fillL} />
      </g>
    );
  };
  const inkStroke = `${P}0.85)`;
  const top = `${P}0.10)`;
  const left = `${P}0.04)`;
  const right = `${P}0.02)`;
  return (
    <svg viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.4" fill={`${P}0.4)`}>
        <text x="16" y="20">FIG-01A / ISO-STACK</text>
        <text x="408" y="20">v1.0</text>
      </g>
      {/* base platform (3x3 of flat cubes) */}
      {[[0,0],[1,0],[2,0],[0,1],[1,1],[2,1],[0,2],[1,2],[2,2]].map(([x,y]) =>
        <g key={`b-${x}-${y}`}>{cube(x, y, 0, top, left, right, inkStroke)}</g>
      )}
      {/* mid layer */}
      {cube(0, 0, 1, top, left, right, inkStroke)}
      {cube(2, 0, 1, top, left, right, inkStroke)}
      {cube(1, 1, 1, top, left, right, inkStroke)}
      {cube(0, 2, 1, top, left, right, inkStroke)}
      {cube(2, 2, 1, top, left, right, inkStroke)}
      {/* top focal cube (signal) */}
      {cube(1, 1, 2, 'rgba(255,77,20,0.35)', 'rgba(255,77,20,0.18)', 'rgba(255,77,20,0.10)', '#FF4D14')}

      {/* connection lines from focal cube to surrounding mid cubes — agent topology */}
      <g stroke="#FF4D14" strokeWidth="1" strokeDasharray="2 3" opacity="0.7">
        <line x1={ix(1.5, 1.5)} y1={iy(1.5, 1.5, 3)} x2={ix(0.5, 0.5)} y2={iy(0.5, 0.5, 2)} />
        <line x1={ix(1.5, 1.5)} y1={iy(1.5, 1.5, 3)} x2={ix(2.5, 0.5)} y2={iy(2.5, 0.5, 2)} />
        <line x1={ix(1.5, 1.5)} y1={iy(1.5, 1.5, 3)} x2={ix(0.5, 2.5)} y2={iy(0.5, 2.5, 2)} />
        <line x1={ix(1.5, 1.5)} y1={iy(1.5, 1.5, 3)} x2={ix(2.5, 2.5)} y2={iy(2.5, 2.5, 2)} />
      </g>

      {/* wire-colored small nodes orbiting the focal */}
      <g>
        {[
          [ix(0.5, 0.5), iy(0.5, 0.5, 2)],
          [ix(2.5, 0.5), iy(2.5, 0.5, 2)],
          [ix(0.5, 2.5), iy(0.5, 2.5, 2)],
          [ix(2.5, 2.5), iy(2.5, 2.5, 2)],
        ].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r="3" fill="#00D4B4" />
        ))}
      </g>

      {/* mono callouts */}
      <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.2" fill={`${P}0.55)`}>
        <text x="20" y="170">PLAN</text>
        <line x1="58" y1="166" x2={ix(0.5, 0.5) - 6} y2={iy(0.5, 0.5, 2) - 6} stroke={`${P}0.25)`} strokeWidth="1" />
        <text x="380" y="170">CLASSIFY</text>
        <line x1="380" y1="166" x2={ix(2.5, 0.5) + 6} y2={iy(2.5, 0.5, 2) - 6} stroke={`${P}0.25)`} strokeWidth="1" />
        <text x="20" y="430">VERIFY</text>
        <line x1="60" y1="426" x2={ix(0.5, 2.5) - 6} y2={iy(0.5, 2.5, 2) + 6} stroke={`${P}0.25)`} strokeWidth="1" />
        <text x="392" y="430">ACT</text>
        <line x1="392" y1="426" x2={ix(2.5, 2.5) + 6} y2={iy(2.5, 2.5, 2) + 6} stroke={`${P}0.25)`} strokeWidth="1" />
      </g>

      {/* signal focal label */}
      <g fontFamily="Geist Mono" fontSize="10" letterSpacing="1.4" fill="#FF4D14">
        <text x={ix(1.5, 1.5) - 24} y={iy(1.5, 1.5, 3) - 38}>● ORCHESTRATOR</text>
      </g>

      {/* bottom status row */}
      <g fontFamily="Geist Mono" fontSize="8" letterSpacing="1.2" fill={`${P}0.4)`}>
        <text x="16" y="466">● ONLINE</text>
        <text x="120" y="466">7 AGENTS</text>
        <text x="220" y="466">DAG</text>
        <text x="280" y="466">RAG-ENABLED</text>
        <text x="408" y="466">PROD</text>
      </g>
    </svg>
  );
}

/* ---------- B. NODE GRAPH (Pixeltrue / abstract network style) ---------- */
function HeroNodeGraph() {
  const P = 'rgba(244,241,234,';
  // Pre-computed node coordinates
  const nodes = [
    { id: 'src1', x: 60,  y: 80,  label: 'docs',    cluster: 'in' },
    { id: 'src2', x: 60,  y: 160, label: 'api',     cluster: 'in' },
    { id: 'src3', x: 60,  y: 240, label: 'sql',     cluster: 'in' },
    { id: 'src4', x: 60,  y: 320, label: 'events',  cluster: 'in' },

    { id: 'a1',   x: 180, y: 100, label: 'classify', cluster: 'mid' },
    { id: 'a2',   x: 180, y: 200, label: 'extract',  cluster: 'mid' },
    { id: 'a3',   x: 180, y: 300, label: 'enrich',   cluster: 'mid' },

    { id: 'plan', x: 280, y: 200, label: 'plan',     cluster: 'focal' },

    { id: 'b1',   x: 380, y: 110, label: 'verify',   cluster: 'mid' },
    { id: 'b2',   x: 380, y: 200, label: 'route',    cluster: 'mid' },
    { id: 'b3',   x: 380, y: 290, label: 'act',      cluster: 'mid' },

    { id: 'out1', x: 460, y: 160, label: 'human',    cluster: 'out' },
    { id: 'out2', x: 460, y: 240, label: 'tool',     cluster: 'out' },
  ];
  const edges = [
    ['src1','a1'], ['src2','a1'], ['src2','a2'], ['src3','a2'], ['src3','a3'], ['src4','a3'],
    ['a1','plan'], ['a2','plan'], ['a3','plan'],
    ['plan','b1'], ['plan','b2'], ['plan','b3'],
    ['b1','out1'], ['b2','out1'], ['b2','out2'], ['b3','out2'],
  ];
  const nodeMap = Object.fromEntries(nodes.map(n => [n.id, n]));
  const nodeRadius = n => n.cluster === 'focal' ? 14 : (n.cluster === 'mid' ? 9 : 6);
  const nodeStroke = n => n.cluster === 'focal' ? '#FF4D14' : (n.cluster === 'mid' ? '#00D4B4' : `${P}0.7)`);
  const nodeFill = n => n.cluster === 'focal' ? 'rgba(255,77,20,0.35)' : (n.cluster === 'mid' ? 'rgba(0,212,180,0.15)' : `${P}0.04)`);
  return (
    <svg viewBox="0 0 520 420" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <pattern id="g-dots" width="20" height="20" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.6" fill={`${P}0.10)`} />
        </pattern>
      </defs>
      <rect width="520" height="420" fill="url(#g-dots)" />

      <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.4" fill={`${P}0.4)`}>
        <text x="16" y="20">FIG-01B / AGENTIC GRAPH</text>
        <text x="438" y="20">v1.0</text>
      </g>

      {/* column eyebrows */}
      <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.4" fill={`${P}0.55)`}>
        <text x="40" y="48">L1 · INPUTS</text>
        <text x="160" y="48">L2 · AGENTS</text>
        <text x="260" y="48" fill="#FF4D14">L3 · PLAN</text>
        <text x="360" y="48">L4 · AGENTS</text>
        <text x="440" y="48">L5 · OUT</text>
      </g>

      {/* edges */}
      <g>
        {edges.map(([a, b], i) => {
          const A = nodeMap[a], B = nodeMap[b];
          const focal = A.cluster === 'focal' || B.cluster === 'focal';
          return (
            <line key={i}
              x1={A.x} y1={A.y} x2={B.x} y2={B.y}
              stroke={focal ? '#FF4D14' : (`${P}0.30)`)}
              strokeWidth="1"
              strokeDasharray={focal ? '0' : '0'}
              opacity={focal ? 0.9 : 0.55}
            />
          );
        })}
      </g>

      {/* nodes */}
      <g>
        {nodes.map(n => (
          <g key={n.id}>
            <circle cx={n.x} cy={n.y} r={nodeRadius(n)} fill={nodeFill(n)} stroke={nodeStroke(n)} strokeWidth="1" />
            {n.cluster === 'focal' && (
              <circle cx={n.x} cy={n.y} r="22" fill="none" stroke="#FF4D14" strokeWidth="1" opacity="0.3" />
            )}
            <text
              x={n.x}
              y={n.y + nodeRadius(n) + 14}
              fontFamily="Geist Mono"
              fontSize="9"
              letterSpacing="0.8"
              textAnchor="middle"
              fill={n.cluster === 'focal' ? '#FF4D14' : `${P}0.6)`}
            >
              {n.label}
            </text>
          </g>
        ))}
      </g>

      {/* signal pulse on focal */}
      <circle cx={nodeMap.plan.x} cy={nodeMap.plan.y} r="3" fill="#FF4D14" />

      {/* bottom status */}
      <g fontFamily="Geist Mono" fontSize="8" letterSpacing="1.2" fill={`${P}0.4)`}>
        <text x="16" y="402">● ONLINE</text>
        <text x="100" y="402">13 NODES</text>
        <text x="190" y="402">16 EDGES</text>
        <text x="290" y="402">MULTI-AGENT</text>
        <text x="438" y="402">PROD</text>
      </g>
    </svg>
  );
}

/* ---------- C. AGENTIC PLATFORM (IsoFlat / layered planes style — original) ---------- */
function HeroAgenticPlatform() {
  const P = 'rgba(244,241,234,';
  return (
    <svg viewBox="0 0 480 420" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <pattern id="iso-grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke={`${P}0.04)`} strokeWidth="1"/>
        </pattern>
        <linearGradient id="plane-input" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={`${P}0.06)`} />
          <stop offset="1" stopColor={`${P}0.02)`} />
        </linearGradient>
        <linearGradient id="plane-agentic" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="rgba(0,212,180,0.10)" />
          <stop offset="1" stopColor="rgba(0,212,180,0.02)" />
        </linearGradient>
        <linearGradient id="plane-infra" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={`${P}0.05)`} />
          <stop offset="1" stopColor={`${P}0.01)`} />
        </linearGradient>
      </defs>

      <rect width="480" height="420" fill="url(#iso-grid)" />

      {/* corner mono labels */}
      <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.4" fill={`${P}0.4)`}>
        <text x="16" y="20">FIG-01 / AGENTIC WORKFLOW</text>
        <text x="408" y="20">v1.0</text>
      </g>

      {/* ============ PLANE 1: INPUTS (top) ============ */}
      <g transform="translate(140 60)">
        {/* parallelogram plane */}
        <polygon points="0,40 100,0 200,40 100,80" fill="url(#plane-input)" stroke={`${P}0.5)`} strokeWidth="1" />
        {/* tiles on top of plane */}
        <g stroke={`${P}0.7)`} strokeWidth="1" fill="none">
          {/* tile 1 */}
          <polygon points="30,40 60,25 90,40 60,55" />
          {/* tile 2 */}
          <polygon points="80,30 110,15 140,30 110,45" />
          {/* tile 3 */}
          <polygon points="130,40 160,25 190,40 160,55" />
        </g>
        {/* tile glyphs (data lines) */}
        <g stroke={`${P}0.5)`} strokeWidth="0.8">
          <line x1="42" y1="40" x2="78" y2="40" />
          <line x1="92" y1="30" x2="128" y2="30" />
          <line x1="142" y1="40" x2="178" y2="40" />
        </g>
        {/* label */}
        <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.4">
          <text x="-2" y="90" fill={`${P}0.8)`}>L1 · INPUTS</text>
          <text x="-2" y="103" fill={`${P}0.45)`}>tools · data · users</text>
        </g>
      </g>

      {/* connector: plane 1 → plane 2 (3 dashed lines) */}
      <g stroke={`${P}0.35)`} strokeWidth="1" strokeDasharray="3 3">
        <path d="M195 170 L185 195" />
        <path d="M240 160 L240 195" />
        <path d="M285 170 L295 195" />
      </g>
      {/* signal dot moving down */}
      <circle cx="240" cy="180" r="3" fill="#FF4D14" />

      {/* ============ PLANE 2: AGENTIC ORCHESTRATION (middle) ============ */}
      <g transform="translate(80 180)">
        {/* large parallelogram */}
        <polygon points="0,40 160,-40 320,40 160,120" fill="url(#plane-agentic)" stroke="#00D4B4" strokeWidth="1" />
        {/* inner agent nodes (positioned in iso layout) */}
        <g>
          {/* Connection edges */}
          <g stroke="#00D4B4" strokeWidth="1" opacity="0.7">
            <line x1="80" y1="20" x2="140" y2="40" />
            <line x1="140" y1="40" x2="180" y2="20" />
            <line x1="140" y1="40" x2="200" y2="60" />
            <line x1="180" y1="20" x2="240" y2="40" />
            <line x1="200" y1="60" x2="260" y2="80" />
            <line x1="240" y1="40" x2="260" y2="80" />
            <line x1="100" y1="60" x2="140" y2="40" />
            <line x1="100" y1="60" x2="200" y2="60" />
          </g>
          {/* agent nodes — small hexagons / circles */}
          {[
            { x: 80,  y: 20, kind: 'classify' },
            { x: 100, y: 60, kind: 'enrich' },
            { x: 140, y: 40, kind: 'plan', focal: true },
            { x: 180, y: 20, kind: 'tool' },
            { x: 200, y: 60, kind: 'verify' },
            { x: 240, y: 40, kind: 'route' },
            { x: 260, y: 80, kind: 'act' },
          ].map((n, i) => (
            <g key={i}>
              <circle
                cx={n.x} cy={n.y} r={n.focal ? 9 : 7}
                fill={n.focal ? '#FF4D14' : 'rgba(0,212,180,0.18)'}
                stroke={n.focal ? '#FF4D14' : '#00D4B4'}
                strokeWidth="1"
              />
              {n.focal && (
                <circle cx={n.x} cy={n.y} r="14" fill="none" stroke="#FF4D14" strokeWidth="1" opacity="0.4" />
              )}
            </g>
          ))}
        </g>
        {/* label */}
        <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.4">
          <text x="-2" y="130" fill="#00D4B4">L2 · AGENTIC ORCHESTRATION</text>
          <text x="-2" y="143" fill={`${P}0.45)`}>plan · classify · verify · act</text>
        </g>

        {/* agent type labels — small, beside specific nodes */}
        <g fontFamily="Geist Mono" fontSize="7" letterSpacing="0.6" fill={`${P}0.5)`}>
          <text x="68" y="10">classify</text>
          <text x="124" y="33" fill="#FF4D14">plan</text>
          <text x="174" y="10">tool-use</text>
          <text x="234" y="34">route</text>
          <text x="260" y="98">act</text>
        </g>
      </g>

      {/* connector: plane 2 → plane 3 */}
      <g stroke={`${P}0.35)`} strokeWidth="1" strokeDasharray="3 3">
        <path d="M210 320 L210 345" />
        <path d="M250 320 L250 345" />
        <path d="M290 320 L290 345" />
      </g>

      {/* ============ PLANE 3: INFRA (bottom) ============ */}
      <g transform="translate(100 330)">
        <polygon points="0,30 140,-30 280,30 140,90" fill="url(#plane-infra)" stroke={`${P}0.5)`} strokeWidth="1" />
        {/* rack lines on plane */}
        <g stroke={`${P}0.55)`} strokeWidth="1">
          <line x1="40" y1="10" x2="180" y2="-30" opacity="0.7" />
          <line x1="50" y1="30" x2="190" y2="-10" opacity="0.5" />
          <line x1="60" y1="50" x2="200" y2="10" opacity="0.35" />
        </g>
        {/* small server cubes */}
        <g stroke={`${P}0.7)`} strokeWidth="1" fill={`${P}0.04)`}>
          <polygon points="60,5 90,-10 120,5 90,20" />
          <polygon points="120,15 150,0 180,15 150,30" />
          <polygon points="180,5 210,-10 240,5 210,20" />
        </g>
        <g fill="#00D4B4">
          <circle cx="90" cy="5" r="1.5" />
          <circle cx="150" cy="15" r="1.5" />
          <circle cx="210" cy="5" r="1.5" />
        </g>
        <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.4">
          <text x="-2" y="100" fill={`${P}0.8)`}>L3 · DEPLOYMENT</text>
          <text x="-2" y="113" fill={`${P}0.45)`}>cloud · hybrid · private</text>
        </g>
      </g>

      {/* side legend */}
      <g fontFamily="Geist Mono" fontSize="8" letterSpacing="1.2" fill={`${P}0.4)`}>
        <text x="16" y="406">● ONLINE</text>
        <text x="80" y="406">● ROUTE OK</text>
        <text x="170" y="406" fill="#FF4D14">● FOCUS</text>
      </g>
      <g fontFamily="Geist Mono" fontSize="8" letterSpacing="1.2" fill={`${P}0.4)`}>
        <text x="408" y="406">PROD</text>
      </g>
    </svg>
  );
}

function PipelineDiagram() {
  // 4-step pipeline diagram for "Why teams work with OPTECH"
  return (
    <svg viewBox="0 0 320 200" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* nodes */}
      <g stroke="currentColor" strokeWidth="1" fill="none">
        <rect x="8" y="40" width="60" height="60" />
        <rect x="92" y="40" width="60" height="60" />
        <rect x="176" y="40" width="60" height="60" />
        <rect x="252" y="40" width="60" height="60" />
      </g>
      {/* arrows */}
      <g stroke="currentColor" strokeWidth="1" opacity="0.4">
        <line x1="68" y1="70" x2="92" y2="70" />
        <line x1="152" y1="70" x2="176" y2="70" />
        <line x1="236" y1="70" x2="252" y2="70" />
      </g>
      {/* dots inside */}
      <g fill="#FF4D14">
        <circle cx="38" cy="70" r="3" />
      </g>
      <g fill="currentColor" opacity="0.6">
        <circle cx="122" cy="70" r="3" />
        <circle cx="206" cy="70" r="3" />
        <circle cx="282" cy="70" r="3" />
      </g>
      <g fontFamily="Geist Mono" fontSize="8" fill="currentColor" letterSpacing="0.5" opacity="0.7">
        <text x="22" y="120">PROTOTYPE</text>
        <text x="110" y="120">CONNECT</text>
        <text x="194" y="120">DEPLOY</text>
        <text x="270" y="120">OPERATE</text>
      </g>
    </svg>
  );
}

/* -------- Tiny glyphs used inside what-we-build cells -------- */
function GlyphMVP() {
  return (
    <svg viewBox="0 0 120 120" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="20" y="20" width="40" height="50" opacity="0.4" />
      <rect x="30" y="30" width="40" height="50" opacity="0.7" />
      <rect x="40" y="40" width="40" height="50" />
      <circle cx="86" cy="46" r="6" fill="#FF4D14" stroke="none" />
      <line x1="40" y1="50" x2="70" y2="50" />
      <line x1="40" y1="60" x2="60" y2="60" />
      <line x1="40" y1="70" x2="68" y2="70" />
    </svg>
  );
}
function GlyphAI() {
  return (
    <svg viewBox="0 0 120 120" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <circle cx="30" cy="40" r="6" />
      <circle cx="60" cy="20" r="6" />
      <circle cx="90" cy="40" r="6" />
      <circle cx="30" cy="80" r="6" />
      <circle cx="60" cy="100" r="6" />
      <circle cx="90" cy="80" r="6" />
      <circle cx="60" cy="60" r="8" fill="#FF4D14" stroke="none" />
      <line x1="33" y1="44" x2="55" y2="58" opacity="0.5" />
      <line x1="60" y1="26" x2="60" y2="52" opacity="0.5" />
      <line x1="87" y1="44" x2="65" y2="58" opacity="0.5" />
      <line x1="33" y1="76" x2="55" y2="62" opacity="0.5" />
      <line x1="60" y1="94" x2="60" y2="68" opacity="0.5" />
      <line x1="87" y1="76" x2="65" y2="62" opacity="0.5" />
    </svg>
  );
}
function GlyphPlatform() {
  return (
    <svg viewBox="0 0 120 120" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="20" y="20" width="80" height="20" />
      <rect x="20" y="50" width="80" height="20" />
      <rect x="20" y="80" width="80" height="20" />
      <line x1="30" y1="30" x2="50" y2="30" opacity="0.6" />
      <line x1="60" y1="30" x2="80" y2="30" opacity="0.6" />
      <circle cx="90" cy="30" r="3" fill="#FF4D14" stroke="none" />
      <line x1="30" y1="60" x2="80" y2="60" opacity="0.6" />
      <line x1="30" y1="90" x2="70" y2="90" opacity="0.6" />
      <circle cx="90" cy="60" r="2" fill="currentColor" />
      <circle cx="90" cy="90" r="2" fill="currentColor" />
    </svg>
  );
}
function GlyphInfra() {
  return (
    <svg viewBox="0 0 120 120" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="20" y="30" width="80" height="14" />
      <rect x="20" y="52" width="80" height="14" />
      <rect x="20" y="74" width="80" height="14" />
      <circle cx="30" cy="37" r="2" fill="#FF4D14" stroke="none" />
      <circle cx="30" cy="59" r="2" fill="currentColor" />
      <circle cx="30" cy="81" r="2" fill="currentColor" />
      <line x1="40" y1="37" x2="90" y2="37" opacity="0.4" />
      <line x1="40" y1="59" x2="80" y2="59" opacity="0.4" />
      <line x1="40" y1="81" x2="86" y2="81" opacity="0.4" />
    </svg>
  );
}

/* Per-work-card thumbnails — abstract industry-icons */
function ThumbAgritech() {
  return (
    <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" stroke="none" fill="rgba(0,0,0,0.02)" />
      <path d="M0 60 L40 50 L80 56 L120 44 L160 52 L200 46" />
      <path d="M0 70 L40 62 L80 66 L120 56 L160 62 L200 58" opacity="0.5" />
      <g fontFamily="Geist Mono" fontSize="7" letterSpacing="1" opacity="0.5">
        <text x="8" y="14">FIELDS</text>
        <text x="160" y="14">N=2,847</text>
      </g>
      <circle cx="120" cy="44" r="3" fill="#FF4D14" stroke="none" />
    </svg>
  );
}
function ThumbCrop() {
  return (
    <svg viewBox="0 0 200 80" fill="none" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" fill="rgba(0,0,0,0.02)" />
      {/* satellite grid */}
      <g stroke="currentColor" strokeWidth="0.5" opacity="0.4">
        {[0,1,2,3,4,5,6,7,8,9].map(i => (
          <line key={'v'+i} x1={i*22} y1="0" x2={i*22} y2="80" />
        ))}
        {[0,1,2,3].map(i => (
          <line key={'h'+i} x1="0" y1={i*22} x2="200" y2={i*22} />
        ))}
      </g>
      {/* heat cells */}
      <g>
        <rect x="22" y="22" width="22" height="22" fill="#FF4D14" opacity="0.7" />
        <rect x="44" y="22" width="22" height="22" fill="#FF4D14" opacity="0.3" />
        <rect x="88" y="44" width="22" height="22" fill="#FF4D14" opacity="0.5" />
        <rect x="132" y="22" width="22" height="22" fill="#FF4D14" opacity="0.2" />
        <rect x="154" y="44" width="22" height="22" fill="#FF4D14" opacity="0.4" />
      </g>
    </svg>
  );
}
function ThumbAutomotive() {
  return (
    <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" stroke="none" fill="rgba(0,0,0,0.02)" />
      {/* nodes */}
      <circle cx="30" cy="40" r="5" />
      <circle cx="80" cy="20" r="5" />
      <circle cx="80" cy="60" r="5" />
      <circle cx="130" cy="40" r="5" />
      <circle cx="170" cy="20" r="5" />
      <circle cx="170" cy="60" r="5" />
      <line x1="35" y1="40" x2="75" y2="22" opacity="0.5" />
      <line x1="35" y1="40" x2="75" y2="58" opacity="0.5" />
      <line x1="85" y1="20" x2="125" y2="38" opacity="0.5" />
      <line x1="85" y1="60" x2="125" y2="42" opacity="0.5" />
      <line x1="135" y1="40" x2="165" y2="22" opacity="0.5" />
      <line x1="135" y1="40" x2="165" y2="58" opacity="0.5" />
      <circle cx="130" cy="40" r="3" fill="#FF4D14" stroke="none" />
    </svg>
  );
}
function ThumbLending() {
  return (
    <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" stroke="none" fill="rgba(0,0,0,0.02)" />
      {/* phone */}
      <rect x="80" y="10" width="40" height="64" rx="2" />
      <line x1="86" y1="22" x2="114" y2="22" opacity="0.5" />
      <rect x="86" y="30" width="28" height="6" fill="#FF4D14" stroke="none" />
      <line x1="86" y1="42" x2="114" y2="42" opacity="0.3" />
      <line x1="86" y1="50" x2="108" y2="50" opacity="0.3" />
      <line x1="86" y1="58" x2="114" y2="58" opacity="0.3" />
      <rect x="86" y="64" width="28" height="6" />
      {/* outer flow */}
      <path d="M30 40 L70 40" opacity="0.3" />
      <path d="M130 40 L170 40" opacity="0.3" />
      <circle cx="30" cy="40" r="3" />
      <circle cx="170" cy="40" r="3" />
    </svg>
  );
}
function ThumbCompliance() {
  return (
    <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" stroke="none" fill="rgba(0,0,0,0.02)" />
      {/* checklist */}
      <rect x="40" y="14" width="120" height="52" />
      <line x1="50" y1="26" x2="120" y2="26" opacity="0.5" />
      <line x1="50" y1="38" x2="130" y2="38" opacity="0.5" />
      <line x1="50" y1="50" x2="110" y2="50" opacity="0.5" />
      <rect x="140" y="22" width="10" height="8" fill="#FF4D14" stroke="none" />
      <rect x="140" y="34" width="10" height="8" />
      <rect x="140" y="46" width="10" height="8" />
    </svg>
  );
}
function ThumbEducation() {
  return (
    <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" stroke="none" fill="rgba(0,0,0,0.02)" />
      {/* progress bars */}
      <line x1="30" y1="20" x2="170" y2="20" opacity="0.3" />
      <line x1="30" y1="20" x2="120" y2="20" stroke="#FF4D14" strokeWidth="2" />
      <line x1="30" y1="36" x2="170" y2="36" opacity="0.3" />
      <line x1="30" y1="36" x2="90" y2="36" strokeWidth="2" />
      <line x1="30" y1="52" x2="170" y2="52" opacity="0.3" />
      <line x1="30" y1="52" x2="150" y2="52" strokeWidth="2" />
      <line x1="30" y1="68" x2="170" y2="68" opacity="0.3" />
      <line x1="30" y1="68" x2="60" y2="68" strokeWidth="2" />
    </svg>
  );
}
function ThumbMarketplace() {
  return (
    <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" stroke="none" fill="rgba(0,0,0,0.02)" />
      {[
        [40,20],[80,20],[120,20],[160,20],
        [40,50],[80,50],[120,50],[160,50],
      ].map(([x,y],i)=>(
        <rect key={i} x={x-12} y={y-10} width="24" height="20" fill={i===5?'#FF4D14':'none'} opacity={i===5?0.8:1} />
      ))}
    </svg>
  );
}
function ThumbSports() {
  return (
    <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" stroke="none" fill="rgba(0,0,0,0.02)" />
      {/* membership / loyalty rings */}
      <circle cx="60" cy="40" r="22" />
      <circle cx="60" cy="40" r="14" opacity="0.5" />
      <circle cx="60" cy="40" r="6" fill="#FF4D14" stroke="none" />
      <g fontFamily="Geist Mono" fontSize="8" letterSpacing="1" opacity="0.6">
        <text x="100" y="32">MEMBERS</text>
        <text x="100" y="46">POINTS</text>
        <text x="100" y="60">VOTING</text>
      </g>
    </svg>
  );
}
function ThumbVideo() {
  return (
    <svg viewBox="0 0 200 80" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="0" width="200" height="80" stroke="none" fill="rgba(0,0,0,0.02)" />
      <rect x="40" y="20" width="60" height="40" />
      <polygon points="60,32 60,48 78,40" fill="#FF4D14" stroke="none" />
      <line x1="110" y1="32" x2="170" y2="32" opacity="0.4" />
      <line x1="110" y1="40" x2="160" y2="40" opacity="0.4" />
      <line x1="110" y1="48" x2="170" y2="48" opacity="0.4" />
    </svg>
  );
}

/* About page — abstract layered visual */
function AboutDiagram() {
  return (
    <svg viewBox="0 0 480 240" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      {/* concentric/orthogonal layers */}
      <g opacity="0.7">
        <rect x="20" y="20" width="440" height="40" />
        <rect x="20" y="70" width="440" height="40" />
        <rect x="20" y="120" width="440" height="40" />
        <rect x="20" y="170" width="440" height="40" />
      </g>
      <g fontFamily="Geist Mono" fontSize="9" letterSpacing="1.4" opacity="0.7">
        <text x="32" y="44">PROBLEM SPACE</text>
        <text x="32" y="94">PROTOTYPE</text>
        <text x="32" y="144">BESPOKE BUILD</text>
        <text x="32" y="194">DEPLOY · OPERATE</text>
      </g>
      <g>
        <circle cx="220" cy="40" r="3" fill="currentColor" />
        <circle cx="260" cy="90" r="3" fill="#FF4D14" stroke="none" />
        <circle cx="300" cy="140" r="3" fill="currentColor" />
        <circle cx="340" cy="190" r="3" fill="currentColor" />
        <path d="M220 40 L260 90 L300 140 L340 190" opacity="0.5" strokeDasharray="2 2" />
      </g>
      <g fontFamily="Geist Mono" fontSize="8" letterSpacing="1" opacity="0.4">
        <text x="380" y="44">L1</text>
        <text x="380" y="94">L2</text>
        <text x="380" y="144">L3</text>
        <text x="380" y="194">L4</text>
      </g>
    </svg>
  );
}

/* Service-page hero diagram */
function ServicesDiagram() {
  return (
    <svg viewBox="0 0 480 280" fill="none" aria-hidden="true">
      <g stroke="rgba(244,241,234,0.6)" strokeWidth="1">
        <rect x="40" y="20" width="100" height="60" />
        <rect x="190" y="20" width="100" height="60" />
        <rect x="340" y="20" width="100" height="60" />
        <rect x="40" y="200" width="100" height="60" />
        <rect x="190" y="200" width="100" height="60" />
      </g>
      <g fontFamily="Geist Mono" fontSize="9" fill="rgba(244,241,234,0.7)" letterSpacing="1.2">
        <text x="52" y="42">S-01</text>
        <text x="52" y="58">PROTOTYPE</text>
        <text x="202" y="42">S-02</text>
        <text x="202" y="58">AI WORKFLOW</text>
        <text x="352" y="42">S-03</text>
        <text x="352" y="58">BESPOKE BUILD</text>
        <text x="52" y="222">S-04</text>
        <text x="52" y="238">ADVISORY</text>
        <text x="202" y="222">S-05</text>
        <text x="202" y="238">RESCUE</text>
      </g>
      {/* center hub */}
      <circle cx="240" cy="140" r="32" stroke="#FF4D14" strokeWidth="1" fill="rgba(255,77,20,0.08)" />
      <text x="218" y="138" fontFamily="Geist Mono" fontSize="9" fill="#FF4D14" letterSpacing="1.4">OPTECH</text>
      <text x="228" y="150" fontFamily="Geist Mono" fontSize="8" fill="rgba(244,241,234,0.5)" letterSpacing="1">v1.0</text>
      {/* connectors */}
      <g stroke="rgba(244,241,234,0.3)" strokeWidth="1" strokeDasharray="2 3">
        <line x1="90" y1="80" x2="220" y2="125" />
        <line x1="240" y1="80" x2="240" y2="108" />
        <line x1="390" y1="80" x2="260" y2="125" />
        <line x1="90" y1="200" x2="220" y2="155" />
        <line x1="240" y1="200" x2="240" y2="172" />
      </g>
    </svg>
  );
}

/* Work-page hero diagram */
function WorkDiagram() {
  return (
    <svg viewBox="0 0 480 240" fill="none" aria-hidden="true">
      <g stroke="rgba(244,241,234,0.4)" strokeWidth="1">
        {[0,1,2,3,4,5,6,7,8].map(i => {
          const x = 20 + (i % 5) * 92;
          const y = 30 + Math.floor(i / 5) * 100;
          return <rect key={i} x={x} y={y} width="72" height="60" />;
        })}
      </g>
      <g fontFamily="Geist Mono" fontSize="8" fill="rgba(244,241,234,0.5)" letterSpacing="1">
        {['OP-001','OP-002','OP-003','OP-004','OP-005','OP-006','OP-007','OP-008','OP-009'].map((c,i) => {
          const x = 20 + (i % 5) * 92 + 8;
          const y = 30 + Math.floor(i / 5) * 100 + 16;
          return <text key={c} x={x} y={y}>{c}</text>;
        })}
      </g>
      <g fill="#FF4D14" stroke="none">
        <circle cx="32" cy="52" r="3" />
      </g>
      <g fill="rgba(244,241,234,0.6)" stroke="none">
        {[1,2,3,4,5,6,7,8].map(i => {
          const x = 20 + (i % 5) * 92 + 12;
          const y = 30 + Math.floor(i / 5) * 100 + 22;
          return <circle key={i} cx={x} cy={y} r="2" />;
        })}
      </g>
    </svg>
  );
}

/* Contact diagram */
function ContactDiagram() {
  return (
    <svg viewBox="0 0 480 220" fill="none" aria-hidden="true">
      <g stroke="rgba(244,241,234,0.4)" strokeWidth="1" strokeDasharray="2 3">
        <line x1="20" y1="110" x2="460" y2="110" />
      </g>
      {[
        [80, 'IDEA'],
        [200, 'SCOPING'],
        [320, 'PROTOTYPE'],
        [440, 'BUILD'],
      ].map(([x, label], i) => (
        <g key={label}>
          <circle cx={x} cy="110" r="14" stroke={i===0 ? '#FF4D14' : 'rgba(244,241,234,0.6)'} strokeWidth="1" fill={i===0 ? 'rgba(255,77,20,0.1)' : 'transparent'} />
          <text x={x-22} y="146" fontFamily="Geist Mono" fontSize="9" fill="rgba(244,241,234,0.7)" letterSpacing="1.4">{label}</text>
        </g>
      ))}
      <text x="62" y="84" fontFamily="Geist Mono" fontSize="8" fill="#FF4D14" letterSpacing="1.4">YOU ARE HERE</text>
    </svg>
  );
}

Object.assign(window, {
  HeroDiagram, PipelineDiagram, AboutDiagram, ServicesDiagram, WorkDiagram, ContactDiagram,
  GlyphMVP, GlyphAI, GlyphPlatform, GlyphInfra,
  ThumbAgritech, ThumbCrop, ThumbAutomotive, ThumbLending, ThumbCompliance, ThumbEducation, ThumbMarketplace, ThumbSports, ThumbVideo,
});