/* ========================================================
   Tiny service diagrams — 80x80 SVGs, monochrome with accent.
   Each is intentional: not a generic icon, but a miniature
   architecture sketch.
   ======================================================== */

const svgBase = {
  width: 72, height: 72, viewBox: "0 0 72 72", fill: "none",
  xmlns: "http://www.w3.org/2000/svg",
};
const line = { stroke: "currentColor", strokeWidth: 1.1, strokeLinecap: "round", strokeLinejoin: "round" };
const dim  = { stroke: "var(--border-3)", strokeWidth: 1.1, strokeLinecap: "round", strokeLinejoin: "round" };
const accentStroke = { stroke: "var(--accent)", strokeWidth: 1.3, strokeLinecap: "round", strokeLinejoin: "round" };

/* 01 — AI Agents : orchestrator + 3 sub-agents tree */
const DiagAgents = () => (
  <svg {...svgBase} aria-hidden>
    {/* edges */}
    <path d="M36 22v8M36 38l-14 8M36 38l0 10M36 38l14 8" {...dim}/>
    {/* parent node */}
    <circle cx="36" cy="16" r="5" {...accentStroke} fill="color-mix(in oklab, var(--accent) 18%, transparent)"/>
    {/* root marker */}
    <circle cx="36" cy="34" r="4" {...line}/>
    {/* children */}
    <rect x="15" y="46" width="14" height="10" rx="2" {...line}/>
    <rect x="29" y="50" width="14" height="10" rx="2" {...line}/>
    <rect x="43" y="46" width="14" height="10" rx="2" {...line}/>
    {/* tiny activity dot */}
    <circle cx="36" cy="16" r="1.2" fill="var(--accent)"/>
  </svg>
);

/* 02 — RAG & Knowledge : doc stack → vector lattice */
const DiagRAG = () => (
  <svg {...svgBase} aria-hidden>
    {/* docs */}
    <rect x="10" y="18" width="18" height="22" rx="2" {...line}/>
    <rect x="13" y="14" width="18" height="22" rx="2" {...line} fill="var(--bg)"/>
    <rect x="16" y="10" width="18" height="22" rx="2" {...line} fill="var(--bg)"/>
    <path d="M20 16h10M20 20h10M20 24h7" {...dim}/>
    {/* arrow */}
    <path d="M38 28h6" {...accentStroke}/>
    <path d="M42 26l2 2-2 2" {...accentStroke}/>
    {/* vector lattice */}
    {[...Array(9)].map((_,i)=>{
      const r = Math.floor(i/3), c = i%3;
      const cx = 50 + c*7, cy = 16 + r*7;
      const hot = (i===1 || i===4 || i===5);
      return <circle key={i} cx={cx} cy={cy} r="1.6"
        fill={hot ? "var(--accent)" : "var(--text-3)"}
        opacity={hot ? 1 : 0.45}/>;
    })}
    <rect x="46" y="12" width="22" height="22" rx="3" {...dim}/>
    {/* output */}
    <path d="M57 38v6" {...dim}/>
    <rect x="48" y="46" width="18" height="12" rx="2" {...line}/>
    <path d="M52 50h10M52 54h6" {...dim}/>
  </svg>
);

/* 03 — Voice AI : waveform between two bubbles */
const DiagVoice = () => (
  <svg {...svgBase} aria-hidden>
    {/* mic left */}
    <rect x="8" y="26" width="14" height="20" rx="7" {...line}/>
    <path d="M6 40c0 5 4 9 9 9s9-4 9-9" {...dim}/>
    <path d="M15 49v4" {...dim}/>
    {/* waveform */}
    {[0,1,2,3,4,5,6,7].map(i=>{
      const x = 28 + i*2.4;
      const h = [4,10,6,14,8,12,5,9][i];
      const isA = i%2===0;
      return <line key={i} x1={x} x2={x} y1={36-h/2} y2={36+h/2}
        stroke={isA ? "var(--accent)" : "var(--text-3)"}
        strokeWidth="1.4" strokeLinecap="round"/>;
    })}
    {/* speaker right */}
    <rect x="50" y="26" width="14" height="20" rx="2" {...line}/>
    <path d="M54 32v8M58 30v12M62 32v8" {...dim}/>
  </svg>
);

/* 04 — Workflow Automation : branching pipeline */
const DiagFlow = () => (
  <svg {...svgBase} aria-hidden>
    <rect x="6" y="30" width="14" height="12" rx="2" {...line}/>
    <path d="M20 36h8" {...dim}/>
    {/* diamond decision */}
    <path d="M34 36l6-6 6 6-6 6z" {...accentStroke} fill="color-mix(in oklab, var(--accent) 14%, transparent)"/>
    {/* branches */}
    <path d="M46 30l10-10M46 42l10 10" {...dim}/>
    <rect x="54" y="12" width="14" height="12" rx="2" {...line}/>
    <rect x="54" y="48" width="14" height="12" rx="2" {...line}/>
    {/* dots */}
    <circle cx="13" cy="36" r="1.2" fill="var(--accent)"/>
    <circle cx="61" cy="18" r="1.2" fill="var(--text-3)"/>
    <circle cx="61" cy="54" r="1.2" fill="var(--text-3)"/>
  </svg>
);

/* 05 — Full-Stack AI Products : layered stack */
const DiagStack = () => (
  <svg {...svgBase} aria-hidden>
    <rect x="10" y="12" width="52" height="10" rx="2" {...line}/>
    <rect x="10" y="26" width="52" height="10" rx="2" {...accentStroke} fill="color-mix(in oklab, var(--accent) 12%, transparent)"/>
    <rect x="10" y="40" width="52" height="10" rx="2" {...line}/>
    <rect x="10" y="54" width="52" height="10" rx="2" {...line}/>
    {/* small markers */}
    <circle cx="15" cy="17" r="1" fill="var(--text-3)"/>
    <circle cx="15" cy="31" r="1" fill="var(--accent)"/>
    <circle cx="15" cy="45" r="1" fill="var(--text-3)"/>
    <circle cx="15" cy="59" r="1" fill="var(--text-3)"/>
    <path d="M26 17h18M26 31h24M26 45h14M26 59h20" {...dim} opacity="0.6"/>
  </svg>
);

/* 06 — AI Consulting : compass / intersecting axes */
const DiagConsult = () => (
  <svg {...svgBase} aria-hidden>
    <circle cx="36" cy="36" r="22" {...dim}/>
    <circle cx="36" cy="36" r="14" {...line}/>
    <path d="M36 14v44M14 36h44" {...dim}/>
    {/* pointer */}
    <path d="M36 36l12-18" {...accentStroke}/>
    <circle cx="48" cy="18" r="2.2" fill="var(--accent)"/>
    <circle cx="36" cy="36" r="2" fill="var(--text)"/>
  </svg>
);

/* Export */
const ServiceDiagrams = {
  agents: DiagAgents,
  rag: DiagRAG,
  voice: DiagVoice,
  flow: DiagFlow,
  stack: DiagStack,
  consult: DiagConsult,
};
Object.assign(window, { ServiceDiagrams });