---
// House-style mini-diagram for a dossier card thumbnail. Keyed by the project's
// `diagram` frontmatter; each motif is a tiny node/line sketch in the board palette.
// Pure SVG, pulsing cores only (reduced-motion turns them off).
interface Props {
  kind?: string;
}
const { kind = "generic" } = Astro.props;
---

<svg viewBox="0 0 400 180" aria-hidden="true" class="thumb">
  {kind === "edge-ai" ? (
    <>
      {/* GPU chip feeding a rack of stores */}
      <line x1="70" y1="90" x2="330" y2="50" class="ln ln--c" />
      <line x1="70" y1="90" x2="330" y2="90" class="ln ln--c" />
      <line x1="70" y1="90" x2="330" y2="130" class="ln ln--m" />
      <rect x="46" y="66" width="48" height="48" rx="6" class="nd nd--c" />
      <text x="70" y="95" text-anchor="middle" class="tx">GPU</text>
      <rect x="314" y="36" width="32" height="28" rx="4" class="nd nd--dim" />
      <rect x="314" y="76" width="32" height="28" rx="4" class="nd nd--dim" />
      <rect x="314" y="116" width="32" height="28" rx="4" class="nd nd--m" />
      <circle cx="200" cy="70" r="2.5" class="dot dot--c pulse" />
      <circle cx="200" cy="110" r="2.5" class="dot dot--m pulse-slow" />
    </>
  ) : kind === "homelab" ? (
    <>
      {/* hub and spokes — the fleet */}
      <line x1="200" y1="90" x2="90" y2="45" class="ln ln--c" />
      <line x1="200" y1="90" x2="90" y2="135" class="ln ln--c" />
      <line x1="200" y1="90" x2="310" y2="45" class="ln ln--m" />
      <line x1="200" y1="90" x2="310" y2="135" class="ln ln--m" />
      <circle cx="200" cy="90" r="24" class="hub" />
      <circle cx="200" cy="90" r="3" class="dot dot--c pulse" />
      <circle cx="90" cy="45" r="12" class="nd nd--c" />
      <circle cx="90" cy="135" r="12" class="nd nd--c" />
      <circle cx="310" cy="45" r="12" class="nd nd--m" />
      <circle cx="310" cy="135" r="12" class="nd nd--m" />
    </>
  ) : kind === "gpu" ? (
    <>
      {/* GPU die with passthrough lanes feeding two edge nodes */}
      <rect x="150" y="55" width="100" height="70" rx="6" class="nd nd--c" />
      <line x1="164" y1="55" x2="164" y2="40" class="ln ln--c" />
      <line x1="186" y1="55" x2="186" y2="40" class="ln ln--c" />
      <line x1="208" y1="55" x2="208" y2="40" class="ln ln--m" />
      <line x1="230" y1="55" x2="230" y2="40" class="ln ln--m" />
      <rect x="172" y="72" width="56" height="36" rx="3" fill="none" stroke="rgba(63,186,245,0.4)" stroke-width="1" />
      <text x="200" y="94" text-anchor="middle" class="tx">GPU</text>
      <line x1="250" y1="70" x2="330" y2="55" class="ln ln--c" />
      <line x1="250" y1="110" x2="330" y2="125" class="ln ln--m" />
      <rect x="330" y="40" width="30" height="26" rx="4" class="nd nd--dim" />
      <rect x="330" y="112" width="30" height="26" rx="4" class="nd nd--m" />
      <circle cx="290" cy="62" r="2.5" class="dot dot--c pulse" />
      <circle cx="290" cy="117" r="2.5" class="dot dot--m pulse-slow" />
    </>
  ) : kind === "globe" ? (
    <>
      {/* globe of regions — a modernised multi-region estate */}
      <circle cx="200" cy="90" r="52" fill="none" stroke="rgba(63,186,245,0.35)" stroke-width="1" />
      <ellipse cx="200" cy="90" rx="52" ry="20" fill="none" stroke="rgba(63,186,245,0.25)" stroke-width="1" />
      <ellipse cx="200" cy="90" rx="20" ry="52" fill="none" stroke="rgba(63,186,245,0.25)" stroke-width="1" />
      <line x1="148" y1="90" x2="252" y2="90" stroke="rgba(63,186,245,0.25)" stroke-width="1" />
      <circle cx="176" cy="62" r="4" class="nd nd--c" />
      <circle cx="228" cy="66" r="4" class="nd nd--m" />
      <circle cx="182" cy="118" r="4" class="nd nd--dim" />
      <circle cx="222" cy="114" r="4" class="nd nd--c" />
      <circle cx="200" cy="90" r="3" class="dot dot--c pulse" />
      <line x1="176" y1="62" x2="200" y2="90" class="ln ln--c" />
      <line x1="228" y1="66" x2="200" y2="90" class="ln ln--m" />
      <line x1="182" y1="118" x2="200" y2="90" class="ln ln--c" />
      <line x1="222" y1="114" x2="200" y2="90" class="ln ln--m" />
    </>
  ) : kind === "network-fleet" ? (
    <>
      {/* fleet of switches, single-pane managed */}
      <rect x="170" y="30" width="60" height="24" rx="4" class="nd nd--c" />
      <text x="200" y="47" text-anchor="middle" class="tx">NCM</text>
      <line x1="200" y1="54" x2="200" y2="70" class="ln ln--c" />
      <line x1="80" y1="70" x2="320" y2="70" class="ln ln--c" />
      <line x1="100" y1="70" x2="100" y2="120" class="ln ln--dim" />
      <line x1="160" y1="70" x2="160" y2="120" class="ln ln--dim" />
      <line x1="240" y1="70" x2="240" y2="120" class="ln ln--m" />
      <line x1="300" y1="70" x2="300" y2="120" class="ln ln--m" />
      <rect x="82" y="120" width="36" height="18" rx="3" class="nd nd--dim" />
      <rect x="142" y="120" width="36" height="18" rx="3" class="nd nd--dim" />
      <rect x="222" y="120" width="36" height="18" rx="3" class="nd nd--m" />
      <rect x="282" y="120" width="36" height="18" rx="3" class="nd nd--m" />
      <circle cx="100" cy="70" r="2.5" class="dot dot--c pulse" />
      <circle cx="300" cy="70" r="2.5" class="dot dot--m pulse-slow" />
    </>
  ) : (
    <>
      {/* pipeline — commits flowing through gates to a fleet */}
      <line x1="40" y1="90" x2="360" y2="90" class="ln ln--c" />
      <rect x="88" y="70" width="40" height="40" rx="5" class="nd nd--c" />
      <rect x="180" y="70" width="40" height="40" rx="5" class="nd nd--dim" />
      <rect x="272" y="70" width="40" height="40" rx="5" class="nd nd--m" />
      <circle cx="60" cy="90" r="2.5" class="dot dot--c pulse" />
      <circle cx="156" cy="90" r="2.5" class="dot dot--c pulse-slow" />
      <circle cx="248" cy="90" r="2.5" class="dot dot--m pulse" />
      <circle cx="340" cy="90" r="2.5" class="dot dot--m pulse-slow" />
    </>
  )}
</svg>

<style>
  .thumb {
    width: 100%;
    height: 100%;
    display: block;
  }
  .ln {
    stroke-width: 1;
  }
  .ln--c { stroke: rgba(63, 186, 245, 0.3); }
  .ln--m { stroke: rgba(232, 121, 249, 0.3); }
  .nd { fill: var(--panel-solid); stroke-width: 1.5; }
  .nd--c { stroke: var(--accent); }
  .nd--m { stroke: rgba(232, 121, 249, 0.5); stroke-width: 1; }
  .nd--dim { stroke: rgba(126, 139, 161, 0.5); stroke-width: 1; }
  .hub { fill: rgba(63, 186, 245, 0.06); stroke: var(--accent); stroke-width: 1.5; }
  .tx { fill: var(--accent); font-family: var(--font-mono); font-size: 10px; }
  .dot--c { fill: var(--accent); }
  .dot--m { fill: var(--accent-2); }
  .pulse { animation: thumbPulse 2.4s ease-in-out infinite; }
  .pulse-slow { animation: thumbPulse 3.4s ease-in-out infinite; }
  @keyframes thumbPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pulse, .pulse-slow { animation: none; }
  }
</style>
