---
// 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" />
    </>
  ) : (
    <>
      {/* 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>