/* Signature glyphs — one per run. Hairline schematics in the annotation
   vocabulary: nodes, a flow direction, and the one element that makes the
   system what it is (a threshold gate, a boxed field, a fan-in, a hierarchy).
   Drawn on a 48×32 grid so every card carries the same optical weight. */
const GLYPH_VB = "0 0 48 32";
const gl = { stroke: "currentColor", strokeWidth: 1, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" };
const acc = { stroke: "var(--sx-accent)", strokeWidth: 1.4, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };

const GLYPHS = {
  /* agent run: a chain that branches at a gate, one path returning to a person */
  "workflow-agents": (
    <>
      <path {...gl} d="M2 16h8M16 16h8M30 10h10M30 22h10" />
      <circle {...gl} cx="13" cy="16" r="3" />
      <path {...acc} d="M24 16l6-6M24 16l6 6" />
      <circle {...acc} cx="27" cy="16" r="1.4" fill="var(--sx-accent)" stroke="none" />
      <rect {...gl} x="40" y="7" width="6" height="6" />
      <rect {...acc} x="40" y="19" width="6" height="6" />
    </>
  ),
  /* document intelligence: a page with one field boxed and pulled out */
  "doc-intelligence": (
    <>
      <path {...gl} d="M4 3h14l4 4v22H4z" />
      <path {...gl} d="M7 11h9M7 15h11M7 23h6" />
      <rect {...acc} x="6.5" y="17.5" width="13" height="4" />
      <path {...gl} d="M22 19h8" />
      <path {...acc} d="M30 19h4" />
      <rect {...gl} x="34" y="15" width="12" height="8" />
      <path {...gl} d="M37 19h6" />
    </>
  ),
  /* mdm: a hierarchy fanning down to meters */
  mdm: (
    <>
      <circle {...acc} cx="24" cy="4" r="2.5" />
      <path {...gl} d="M24 7v4M11 15v3M24 15v3M37 15v3M11 11h26" />
      <path {...gl} d="M24 11v4" />
      <circle {...gl} cx="11" cy="13" r="2" />
      <circle {...gl} cx="24" cy="13" r="2" />
      <circle {...gl} cx="37" cy="13" r="2" />
      <path {...gl} d="M5 22h12M19 22h10M31 22h12" />
      <rect {...gl} x="5" y="22" width="6" height="6" />
      <rect {...gl} x="15" y="22" width="6" height="6" />
      <rect {...acc} x="25" y="22" width="6" height="6" />
      <rect {...gl} x="35" y="22" width="6" height="6" />
    </>
  ),
  /* billing: a meter dial resolving into a bill */
  "utility-cis": (
    <>
      <circle {...gl} cx="10" cy="16" r="7" />
      <path {...acc} d="M10 16l3.5-3.5" />
      <circle {...gl} cx="10" cy="16" r="1" />
      <path {...gl} d="M19 16h7" />
      <path {...gl} d="M28 4h16v24H28z" />
      <path {...gl} d="M31 10h10M31 14h7" />
      <path {...acc} d="M31 21h10" />
      <path {...gl} d="M31 24h5" />
    </>
  ),
  /* agriculture: probes at depth feeding one valve decision */
  agriculture: (
    <>
      <path {...gl} d="M2 11h44" />
      <path {...gl} d="M8 11v7M8 11v-4M16 11v11M16 11v-4M24 11v15M24 11v-4" />
      <circle {...gl} cx="8" cy="18" r="1.4" />
      <circle {...gl} cx="16" cy="22" r="1.4" />
      <circle {...gl} cx="24" cy="26" r="1.4" />
      <path {...acc} d="M28 18h8" />
      <circle {...acc} cx="40" cy="18" r="4" />
      <path {...acc} d="M40 22v5" />
    </>
  ),
  /* visual inspection: a conveyor, a camera cone, one item bracketed */
  "visual-inspection": (
    <>
      <path {...gl} d="M2 25h44" />
      <path {...gl} d="M6 25v-4h6v4M18 25v-4h6v4M34 25v-4h6v4" />
      <rect {...acc} x="17" y="18" width="8" height="8" />
      <path {...acc} d="M21 4v4" />
      <path {...gl} d="M15 3h12v5H15z" />
      <path {...gl} d="M17 8l-3 8M25 8l3 8" opacity="0.7" />
    </>
  ),
  /* iot: devices reporting up, a command returning down */
  "iot-platforms": (
    <>
      <rect {...gl} x="3" y="6" width="6" height="5" />
      <rect {...gl} x="3" y="15" width="6" height="5" />
      <rect {...gl} x="3" y="24" width="6" height="5" />
      <path {...gl} d="M9 8.5h8l4 7M9 17.5h12M9 26.5h8l4-7" />
      <rect {...gl} x="21" y="12" width="11" height="9" />
      <path {...gl} d="M32 16.5h6" />
      <circle {...acc} cx="42" cy="16.5" r="4" />
      <path {...acc} d="M38 27h-17l-4-6" strokeDasharray="2 2.5" />
    </>
  ),
  /* complaints: lanes with one return path */
  complaints: (
    <>
      <path {...gl} d="M2 8h10M18 8h10M34 8h12" />
      <circle {...gl} cx="15" cy="8" r="2.5" />
      <circle {...gl} cx="31" cy="8" r="2.5" />
      <path {...gl} d="M15 11v9M31 11v9" />
      <path {...gl} d="M2 23h44" opacity="0.5" />
      <rect {...acc} x="12" y="20" width="6" height="6" />
      <path {...acc} d="M18 26h14v-9" strokeDasharray="2 2.5" />
      <path {...acc} d="M32 19l-2-2M32 19l2-2" />
    </>
  ),
  /* archivist: a query fanning into passages, one cited */
  "doc-archivist": (
    <>
      <circle {...acc} cx="7" cy="16" r="4" />
      <path {...acc} d="M10 19l3 3" />
      <path {...gl} d="M16 16h6l4-9h4M22 16h4M22 16l4 9h4" />
      <rect {...gl} x="30" y="3" width="14" height="7" />
      <rect {...acc} x="30" y="12" width="14" height="7" />
      <rect {...gl} x="30" y="22" width="14" height="7" />
      <path {...acc} d="M33 15.5h8" />
    </>
  ),
};

function SolutionGlyph({ id, size = 48, style }) {
  const g = GLYPHS[id];
  if (!g) return null;
  return (
    <svg viewBox={GLYPH_VB} width={size} height={Math.round((size * 32) / 48)} aria-hidden
      style={{ display: "block", color: "var(--text-quiet)", overflow: "visible", ...style }}>{g}</svg>
  );
}

Object.assign(window, { SolutionGlyph, GLYPHS });