---
// Static, server-rendered architecture diagram. No client JS.
// All data + layout come from the single source of truth: architecture-model.ts
// (shared with the interactive standalone architecture.html generator).
import { computeLayout } from "./architecture-model";

const { zones, subzones, nodes, edges, legend } = computeLayout();
---

<figure class="arch">
  <div class="arch-scroll">
    <svg viewBox="0 0 1600 1020" role="img" aria-label="Studio system architecture: edge, cloud cluster and desktop tiers">
      <defs>
        <marker id="arch-ah" viewBox="0 0 10 10" refX="8.5" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
          <path d="M0,0 L10,5 L0,10 z" fill="#5b6a82"></path>
        </marker>
      </defs>

      {zones.map((z) => (
        <g>
          <rect x={z.x} y={z.y} width={z.w} height={z.h} rx="16" fill={z.fill} stroke={z.stroke} stroke-width="1.2"></rect>
          <text x={z.x + 16} y={z.y + 24} class="zlabel">{z.label}</text>
          <text x={z.x + 16} y={z.y + 38} class="zsub">{z.sub}</text>
        </g>
      ))}
      {subzones.map((z) => (
        <g>
          <rect x={z.x} y={z.y} width={z.w} height={z.h} rx="12" fill="rgba(251,113,133,.05)" stroke="rgba(251,113,133,.32)" stroke-width="1" stroke-dasharray="5 4"></rect>
          <text x={z.x + 14} y={z.y + 20} class="szlabel">{z.label}</text>
        </g>
      ))}

      {edges.map((e) => (
        <path d={e.d} fill="none" stroke={e.stroke} stroke-width={e.w} stroke-dasharray={e.dash} opacity={e.op} marker-end="url(#arch-ah)"></path>
      ))}

      {nodes.map((n) => (
        <g transform={`translate(${n.x},${n.y})`}>
          {n.replicas && [2, 1].map((s) => (
            <rect x={-n.w / 2 + s * 6} y={-n.h / 2 - s * 6} width={n.w} height={n.h} rx="11" fill="#0a0f17" stroke={n.col} stroke-width="1.3" opacity="0.55"></rect>
          ))}
          {n.shape ? (
            <path d={n.shape} fill="#0d131c" stroke={n.col} stroke-width="1.5" stroke-dasharray={n.ext ? "5 4" : undefined}></path>
          ) : (
            <rect x={-n.w / 2} y={-n.h / 2} width={n.w} height={n.h} rx="12" fill="#0d131c" stroke={n.col} stroke-width="1.5" stroke-dasharray={n.ext ? "5 4" : undefined}></rect>
          )}
          <text text-anchor="middle" y={n.tag ? -3 : 5} class="nlabel">{n.label}</text>
          {n.tag && <text text-anchor="middle" y="11" class="ntag" fill={n.col}>{n.tag}</text>}
          {n.replicas && <text text-anchor="middle" y={n.h / 2 + 12} class="nflag">×N · scales independently</text>}
        </g>
      ))}
    </svg>
  </div>
  <div class="arch-legend">
    {legend.map((l) => (
      <span><i style={`background:${l.col}`}></i>{l.name}</span>
    ))}
  </div>
  <figcaption>Request path, agent runs and sandboxes across the edge, cloud cluster and desktop tiers.</figcaption>
</figure>

<style>
  .arch {
    margin: 1.5rem 0;
    border: 1px solid #1a2230;
    border-radius: 16px;
    background:
      radial-gradient(1200px 700px at 80% -20%, #10202c 0%, transparent 55%),
      #070910;
    padding: 14px 14px 16px;
    color: #e8eef6;
    font-family: ui-monospace, "IBM Plex Mono", Menlo, monospace;
  }
  .arch-scroll { overflow-x: auto; }
  .arch svg { display: block; width: 100%; min-width: 1180px; height: auto; }
  .arch .zlabel { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; fill: #7c8aa3; font-weight: 600; }
  .arch .zsub { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; fill: #465268; }
  .arch .szlabel { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; fill: rgba(251,113,133,.65); font-weight: 600; }
  .arch .nlabel { fill: #e8eef6; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
  .arch .ntag { font-size: 8px; letter-spacing: .13em; text-transform: uppercase; opacity: .9; }
  .arch .nflag { fill: #7c8aa3; font-size: 7.5px; letter-spacing: .1em; }
  .arch-legend {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 10.5px; color: #7c8aa3; margin: 10px 4px 0;
  }
  .arch-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .arch-legend i { width: 11px; height: 11px; border-radius: 3px; }
  .arch figcaption { font-size: 11px; color: #56607a; margin: 12px 4px 2px; font-family: inherit; }
</style>
