---
// Architecture diagrams as static SVG (authored to match the site style), shown on a
// constant light card so the fixed-colour art stays legible in BOTH light and dark themes.
// CSP-clean: a plain same-origin <img> (img-src 'self'); no inline script, no web fonts.
// SVG sources live in /public/diagrams/<name>.svg — the same files the blog posts embed.
interface Props {
  name: string;
  caption?: string;
}
const { name, caption } = Astro.props;

const captions: Record<string, string> = {
  "edge-ai": "Design → single-press pipeline → readiness-gated GPU inference at the edge",
  "iac-fleet": "One source of truth → AWX/Ansible → identical edge nodes, even air-gapped",
  homelab: "Bare metal → GitOps clusters → services, exposed outbound-only via a tunnel",
  "authentik-sso": "One identity provider, 2FA at the flow; apps validate over an internal back channel",
  "outbound-exposure": "No open ports — the origin dials out; the edge is the perimeter",
};
const cap = caption ?? captions[name];
---

<figure class="diagram" data-reveal>
  <img
    class="diagram__svg"
    src={`/diagrams/${name}.svg?v=2`}
    alt={cap ?? `${name} architecture diagram`}
    loading="lazy"
    decoding="async"
  />
  {cap && <figcaption class="diagram__caption mono">{cap}</figcaption>}
</figure>

<style>
  .diagram {
    margin: var(--space-6) 0;
    padding: var(--space-5);
    /* constant light surface so the fixed-colour SVG keeps contrast in dark mode */
    background: #f6f8fb;
    border: 1px solid rgba(2, 6, 23, 0.1);
    border-radius: var(--radius);
  }
  .diagram__svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .diagram__caption {
    margin-top: var(--space-4);
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-faint);
  }
</style>