// SVG abstract glyphs — one per tool. Geometric, evocative, cinematic.
// Each is a 80×80 component that responds to currentColor where useful.

const Glyph = {
  // ClaudeCode CLI — terminal cursor + brackets
  ClaudeCodeCLI: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <rect x="8" y="14" width="64" height="52" stroke="var(--line-2)" />
      <path d="M16 28 L24 36 L16 44" />
      <line x1="30" y1="44" x2="44" y2="44" />
      <rect x="48" y="40" width="8" height="6" fill="currentColor" stroke="none">
        <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite" />
      </rect>
    </svg>
  ),

  // Hermes — winged staff (caduceus simplified) → diamond + curves
  Hermes: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <line x1="40" y1="10" x2="40" y2="70" stroke="var(--ink-2)" />
      <path d="M40 22 Q26 30 40 38 Q54 46 40 54" />
      <path d="M40 22 Q54 30 40 38 Q26 46 40 54" />
      <polygon points="40,8 44,14 40,20 36,14" fill="currentColor" stroke="none" />
      <circle cx="40" cy="68" r="2.5" fill="currentColor" stroke="none" />
    </svg>
  ),

  // OpenCode — orbiting nodes
  OpenCode: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <circle cx="40" cy="40" r="6" fill="currentColor" stroke="none" />
      <circle cx="40" cy="40" r="20" stroke="var(--line-2)" strokeDasharray="2 4" />
      <circle cx="40" cy="40" r="32" stroke="var(--line-2)" strokeDasharray="1 6" />
      <circle cx="60" cy="40" r="3" fill="currentColor" stroke="none" />
      <circle cx="40" cy="8" r="2" fill="currentColor" stroke="none" />
      <circle cx="22" cy="56" r="2.5" fill="currentColor" stroke="none" />
    </svg>
  ),

  // Codex — stacked book/lines with seal
  Codex: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <rect x="14" y="16" width="52" height="48" stroke="var(--line-2)" />
      <line x1="14" y1="26" x2="66" y2="26" />
      <line x1="22" y1="38" x2="58" y2="38" stroke="var(--ink-3)" />
      <line x1="22" y1="46" x2="50" y2="46" stroke="var(--ink-3)" />
      <line x1="22" y1="54" x2="58" y2="54" stroke="var(--ink-3)" />
      <circle cx="58" cy="20" r="3" fill="currentColor" stroke="none" />
    </svg>
  ),

  // Claude Code App — concentric squares
  ClaudeApp: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <rect x="10" y="10" width="60" height="60" stroke="var(--line-2)" />
      <rect x="22" y="22" width="36" height="36" />
      <rect x="34" y="34" width="12" height="12" fill="currentColor" stroke="none" />
    </svg>
  ),

  // Gentle-AI — soft circle with gentle wave
  GentleAI: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <circle cx="40" cy="40" r="28" stroke="var(--line-2)" />
      <path d="M14 42 Q24 32 34 42 Q44 52 54 42 Q60 38 66 42" />
      <circle cx="40" cy="40" r="3" fill="currentColor" stroke="none" />
    </svg>
  ),

  // autoSDD — cycle/refresh
  AutoSDD: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <path d="M58 26 A22 22 0 1 0 62 50" />
      <polyline points="58,18 58,28 48,28" />
      <text x="40" y="45" fontSize="10" fill="currentColor" fontFamily="monospace" textAnchor="middle" stroke="none">SDD</text>
    </svg>
  ),

  // Stark Kit — geometric S/star
  StarkKit: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <polygon points="40,8 50,30 72,32 56,48 60,70 40,58 20,70 24,48 8,32 30,30" />
      <circle cx="40" cy="42" r="6" fill="currentColor" stroke="none" />
    </svg>
  ),

  // E2E Forge — anvil + spark
  E2EForge: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <path d="M14 50 L66 50 L60 60 L20 60 Z" />
      <line x1="40" y1="50" x2="40" y2="38" />
      <polygon points="40,18 44,30 50,28 44,38 50,40 38,42 36,52 32,42 24,40 32,36 28,28 38,30" fill="currentColor" stroke="none" />
    </svg>
  ),

  // be-code-kit — toolbox
  BeCodeKit: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <rect x="14" y="26" width="52" height="40" stroke="var(--line-2)" />
      <path d="M30 26 V18 H50 V26" />
      <line x1="14" y1="44" x2="66" y2="44" stroke="var(--ink-3)" />
      <rect x="36" y="38" width="8" height="12" fill="currentColor" stroke="none" />
    </svg>
  ),

  // OpenClaw — gateway/portal
  OpenClaw: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <path d="M14 40 Q14 14 40 14 Q66 14 66 40 Q66 66 40 66 Q14 66 14 40" />
      <path d="M22 40 Q22 22 40 22 Q58 22 58 40 Q58 58 40 58 Q22 58 22 40" stroke="var(--line-2)" />
      <line x1="40" y1="14" x2="40" y2="66" stroke="var(--ink-3)" />
      <line x1="14" y1="40" x2="66" y2="40" stroke="var(--ink-3)" />
      <circle cx="40" cy="40" r="3" fill="currentColor" stroke="none" />
    </svg>
  ),

  // Cobalt — hexagonal crystal
  Cobalt: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <polygon points="40,10 64,24 64,56 40,70 16,56 16,24" />
      <polygon points="40,22 54,30 54,50 40,58 26,50 26,30" stroke="var(--line-2)" />
      <line x1="40" y1="10" x2="40" y2="22" stroke="var(--ink-3)" />
      <line x1="64" y1="24" x2="54" y2="30" stroke="var(--ink-3)" />
      <line x1="64" y1="56" x2="54" y2="50" stroke="var(--ink-3)" />
      <line x1="40" y1="70" x2="40" y2="58" stroke="var(--ink-3)" />
      <line x1="16" y1="56" x2="26" y2="50" stroke="var(--ink-3)" />
      <line x1="16" y1="24" x2="26" y2="30" stroke="var(--ink-3)" />
    </svg>
  ),

  // Document — for CLAUDE.md/SOUL.md
  Document: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <path d="M18 12 H50 L62 24 V68 H18 Z" />
      <path d="M50 12 V24 H62" stroke="var(--line-2)" />
      <line x1="26" y1="36" x2="54" y2="36" stroke="var(--ink-3)" />
      <line x1="26" y1="44" x2="54" y2="44" stroke="var(--ink-3)" />
      <line x1="26" y1="52" x2="42" y2="52" stroke="var(--ink-3)" />
    </svg>
  ),

  // Embedding — vector field
  Embedding: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <circle cx="20" cy="40" r="3" fill="currentColor" stroke="none" />
      <circle cx="40" cy="20" r="3" fill="currentColor" stroke="none" />
      <circle cx="40" cy="60" r="3" fill="currentColor" stroke="none" />
      <circle cx="60" cy="32" r="3" fill="currentColor" stroke="none" />
      <circle cx="60" cy="48" r="3" fill="currentColor" stroke="none" />
      <line x1="20" y1="40" x2="40" y2="20" stroke="var(--line-2)" />
      <line x1="20" y1="40" x2="40" y2="60" stroke="var(--line-2)" />
      <line x1="40" y1="20" x2="60" y2="32" stroke="var(--line-2)" />
      <line x1="40" y1="60" x2="60" y2="48" stroke="var(--line-2)" />
      <line x1="60" y1="32" x2="60" y2="48" stroke="var(--line-2)" />
      <line x1="40" y1="20" x2="40" y2="60" stroke="var(--ink-3)" strokeDasharray="2 3" />
    </svg>
  ),

  // Versioning — branching git tree
  Versioning: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <line x1="20" y1="14" x2="20" y2="66" stroke="var(--line-2)" />
      <line x1="20" y1="40" x2="60" y2="40" />
      <line x1="60" y1="40" x2="60" y2="66" />
      <circle cx="20" cy="20" r="4" fill="var(--bg)" />
      <circle cx="20" cy="40" r="4" fill="var(--bg)" />
      <circle cx="20" cy="60" r="4" fill="var(--bg)" />
      <circle cx="60" cy="50" r="4" fill="var(--bg)" />
      <circle cx="60" cy="64" r="4" fill="currentColor" />
    </svg>
  ),

  // Voice — waveform
  Voice: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.5" style={{color: "var(--cyan)"}}>
      <line x1="14" y1="40" x2="14" y2="40" stroke="var(--ink-3)" />
      {[10,18,26,34,42,50,58,66,74].map((x, i) => {
        const heights = [8, 16, 28, 14, 36, 12, 24, 18, 6];
        const h = heights[i];
        return <line key={i} x1={x} y1={40-h/2} x2={x} y2={40+h/2} />;
      })}
    </svg>
  ),

  // Bubble/burst — for the AI bubble plot twist
  Bubble: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--crimson)"}}>
      <circle cx="40" cy="40" r="28" stroke="currentColor" strokeDasharray="4 4" />
      <path d="M28 28 L52 52 M52 28 L28 52" stroke="currentColor" strokeWidth="1.5" />
      <circle cx="22" cy="22" r="2" fill="currentColor" stroke="none" />
      <circle cx="58" cy="20" r="1.5" fill="currentColor" stroke="none" />
      <circle cx="60" cy="60" r="2.5" fill="currentColor" stroke="none" />
      <circle cx="20" cy="60" r="1.5" fill="currentColor" stroke="none" />
    </svg>
  ),

  // SuperWhisper — speech orb
  SuperWhisper: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <rect x="32" y="14" width="16" height="36" rx="8" />
      <path d="M22 42 Q22 58 40 58 Q58 58 58 42" />
      <line x1="40" y1="58" x2="40" y2="68" />
      <line x1="32" y1="68" x2="48" y2="68" />
    </svg>
  ),

  // Skill — rune/spark
  Skill: () => (
    <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.2" style={{color: "var(--cyan)"}}>
      <polygon points="40,12 56,30 56,50 40,68 24,50 24,30" />
      <line x1="40" y1="12" x2="40" y2="68" stroke="var(--line-2)" />
      <line x1="24" y1="40" x2="56" y2="40" stroke="var(--line-2)" />
      <circle cx="40" cy="40" r="5" fill="currentColor" stroke="none" />
    </svg>
  ),
};

window.Glyph = Glyph;
