/* Icon + product illustration components.
   All inline SVG so they're crisp at any size and can be tinted. */

const Icon = ({ name, size = 18, stroke = 1.6, color = 'currentColor', style }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: color, strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    style,
  };
  switch (name) {
    case 'arrow-right':
      return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right':
      return <svg {...props}><path d="M7 17L17 7M8 7h9v9"/></svg>;
    case 'chevron-down':
      return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case 'check':
      return <svg {...props}><path d="M5 12l5 5L20 7"/></svg>;
    case 'x':
      return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'shield':
      return <svg {...props}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></svg>;
    case 'lock':
      return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>;
    case 'globe':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>;
    case 'cube':
      return <svg {...props}><path d="M12 2L3 7v10l9 5 9-5V7l-9-5zM3 7l9 5 9-5M12 12v10"/></svg>;
    case 'cpu':
      return <svg {...props}><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>;
    case 'router':
      return <svg {...props}><rect x="3" y="13" width="18" height="8" rx="1.5"/><path d="M7 17h.01M11 17h.01M6 13V9a3 3 0 013-3h6a3 3 0 013 3v4M9 6V3M15 6V3"/></svg>;
    case 'cloud':
      return <svg {...props}><path d="M17 18a4 4 0 000-8 6 6 0 00-11.7 1.5A4 4 0 006 18h11z"/></svg>;
    case 'code':
      return <svg {...props}><path d="M8 8l-5 4 5 4M16 8l5 4-5 4M14 4l-4 16"/></svg>;
    case 'zap':
      return <svg {...props}><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>;
    case 'menu':
      return <svg {...props}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'search':
      return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.5-4.5"/></svg>;
    case 'user':
      return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>;
    case 'cart':
      return <svg {...props}><path d="M3 4h2l2.5 12h11l2-9H6"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>;
    case 'play':
      return <svg {...props}><path d="M6 4l14 8-14 8z" fill="currentColor"/></svg>;
    case 'sparkle':
      return <svg {...props}><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>;
    case 'hex':
      return <svg {...props}><path d="M12 2l8.5 5v10L12 22l-8.5-5V7L12 2z"/></svg>;
    case 'circuit':
      return <svg {...props}><path d="M3 12h6m6 0h6M9 12a3 3 0 116 0 3 3 0 01-6 0zM12 3v3M12 18v3"/></svg>;
    case 'antenna':
      return <svg {...props}><path d="M12 12v9M5 5a10 10 0 0114 0M8 8a6 6 0 018 0"/><circle cx="12" cy="12" r="2"/></svg>;
    case 'database':
      return <svg {...props}><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>;
    case 'key':
      return <svg {...props}><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M16 7l3 3M14 9l3 3"/></svg>;
    case 'layers':
      return <svg {...props}><path d="M12 2l10 6-10 6L2 8l10-6zM2 14l10 6 10-6M2 11l10 6 10-6"/></svg>;
    case 'bolt':
      return <svg {...props}><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" fill="currentColor" stroke="none"/></svg>;
    default: return null;
  }
};

window.Icon = Icon;

/* ===== Product hardware/visual renderers ===== */

// White, UniFi-style appliance — premium, minimal, soft shadow.
const ApplianceRender = ({ label = 'QSec', subLabel = 'PQC-EDGE', ports = 8, accent = 'var(--accent)' }) => {
  const uid = React.useId();
  return (
  <svg viewBox="0 0 600 260" style={{ width: '100%', height: '100%' }}>
    <defs>
      <linearGradient id={`chassis-${uid}`} x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#ffffff"/>
        <stop offset="0.5" stopColor="#fafbfc"/>
        <stop offset="1" stopColor="#eef0f3"/>
      </linearGradient>
      <linearGradient id={`top-${uid}`} x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#ffffff" stopOpacity="1"/>
        <stop offset="1" stopColor="#ffffff" stopOpacity="0"/>
      </linearGradient>
      <radialGradient id={`shadow-${uid}`} cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stopColor="#000" stopOpacity="0.18"/>
        <stop offset="1" stopColor="#000" stopOpacity="0"/>
      </radialGradient>
    </defs>

    {/* soft floor shadow */}
    <ellipse cx="300" cy="230" rx="240" ry="12" fill={`url(#shadow-${uid})`}/>

    {/* main chassis */}
    <rect x="40" y="60" width="520" height="140" rx="10" fill={`url(#chassis-${uid})`} stroke="#e3e6ea" strokeWidth="1"/>
    {/* top sheen */}
    <rect x="40" y="60" width="520" height="40" rx="10" fill={`url(#top-${uid})`} opacity="0.7"/>

    {/* left brand block — clean wordmark, no inset */}
    <text x="72" y="138" fill="#1c1d1f" fontSize="22" fontWeight="600" letterSpacing="-0.02em" fontFamily="Inter, sans-serif">{label}</text>
    <text x="72" y="156" fill="#9ca0a8" fontSize="9" letterSpacing="2" fontWeight="600" fontFamily="Inter, sans-serif">{subLabel}</text>
    {/* accent rule under wordmark */}
    <rect x="72" y="166" width="36" height="2" rx="1" fill={accent}/>

    {/* center status LED — single dot, premium */}
    <g transform="translate(220, 130)">
      <circle r="4" fill={accent}/>
      <circle r="9" fill="none" stroke={accent} strokeWidth="0.8" opacity="0.25"/>
    </g>

    {/* ports — flush, dark recessed wells */}
    {[...Array(ports)].map((_, i) => {
      const x = 270 + i*30;
      const active = i < 3;
      return (
        <g key={i}>
          {/* port well */}
          <rect x={x} y="118" width="22" height="22" rx="2" fill="#1c1d1f"/>
          {/* RJ45 inner detail */}
          <rect x={x+2} y="121" width="18" height="14" rx="1" fill="#0a0c10"/>
          <rect x={x+3} y="122" width="16" height="3" fill={active ? accent : '#2a2d33'}/>
          {/* link indicator above */}
          <circle cx={x+11} cy="112" r="1.5" fill={active ? '#10864c' : '#d4d6da'}/>
          {/* port number */}
          <text x={x+11} y="156" textAnchor="middle" fill="#9ca0a8" fontSize="7.5" fontWeight="500" fontFamily="Inter, sans-serif">{i+1}</text>
        </g>
      );
    })}

    {/* console / SFP at far right */}
    <g transform="translate(515, 118)">
      <rect width="32" height="22" rx="2" fill="#1c1d1f"/>
      <rect x="3" y="7" width="26" height="8" rx="1" fill="#0a0c10"/>
      <text x="16" y="38" textAnchor="middle" fill="#9ca0a8" fontSize="7.5" fontWeight="500" fontFamily="Inter, sans-serif">SFP+</text>
    </g>

    {/* subtle bottom edge */}
    <rect x="40" y="198" width="520" height="2" rx="1" fill="#000" opacity="0.04"/>
  </svg>
  );
};
window.ApplianceRender = ApplianceRender;

// White, modern, UniFi-style hero appliance — premium presence
const HeroAppliance = ({ accent = 'var(--accent)' }) => (
  <svg viewBox="0 0 600 600" style={{ width: '100%', height: '100%' }}>
    <defs>
      <linearGradient id="hero-chassis" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#ffffff"/>
        <stop offset="0.55" stopColor="#fafbfc"/>
        <stop offset="1" stopColor="#e8ebef"/>
      </linearGradient>
      <linearGradient id="hero-top" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#ffffff" stopOpacity="1"/>
        <stop offset="1" stopColor="#ffffff" stopOpacity="0"/>
      </linearGradient>
      <radialGradient id="hero-shadow" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stopColor="#000" stopOpacity="0.22"/>
        <stop offset="1" stopColor="#000" stopOpacity="0"/>
      </radialGradient>
      <radialGradient id="hero-glow" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stopColor={accent} stopOpacity="0.12"/>
        <stop offset="1" stopColor={accent} stopOpacity="0"/>
      </radialGradient>
    </defs>

    {/* soft accent halo */}
    <circle cx="300" cy="300" r="280" fill="url(#hero-glow)"/>

    {/* very faint dot grid */}
    <g opacity="0.35">
      {[...Array(7)].map((_, r) => [...Array(9)].map((_, c) => (
        <circle key={`p${r}${c}`} cx={80 + c*55} cy={100 + r*55} r="0.9" fill="#bcc0c8"/>
      )))}
    </g>

    {/* floor shadow */}
    <ellipse cx="300" cy="430" rx="240" ry="14" fill="url(#hero-shadow)"/>

    {/* main appliance — large, white */}
    <g transform="translate(50, 270)">
      {/* chassis */}
      <rect x="0" y="0" width="500" height="150" rx="14" fill="url(#hero-chassis)" stroke="#e3e6ea" strokeWidth="1"/>
      {/* sheen */}
      <rect x="0" y="0" width="500" height="50" rx="14" fill="url(#hero-top)" opacity="0.7"/>

      {/* wordmark — large, premium */}
      <text x="32" y="78" fill="#1c1d1f" fontSize="28" fontWeight="600" letterSpacing="-0.025em" fontFamily="Inter, sans-serif">QSec</text>
      <text x="32" y="98" fill="#9ca0a8" fontSize="10.5" letterSpacing="2.5" fontWeight="600" fontFamily="Inter, sans-serif">PQC-SDWAN</text>
      {/* accent rule */}
      <rect x="32" y="110" width="44" height="2.5" rx="1.25" fill={accent}/>

      {/* center status */}
      <g transform="translate(200, 78)">
        <circle r="5" fill={accent}/>
        <circle r="11" fill="none" stroke={accent} strokeWidth="0.9" opacity="0.28"/>
      </g>

      {/* ports — 10 across */}
      {[...Array(10)].map((_, i) => {
        const x = 240 + i*22;
        const active = i < 4;
        return (
          <g key={i}>
            <rect x={x} y="62" width="18" height="22" rx="2" fill="#1c1d1f"/>
            <rect x={x+2} y="65" width="14" height="14" rx="1" fill="#0a0c10"/>
            <rect x={x+3} y="66" width="12" height="3" fill={active ? accent : '#2a2d33'}/>
            <circle cx={x+9} cy="56" r="1.4" fill={active ? '#10864c' : '#d4d6da'}/>
            <text x={x+9} y="100" textAnchor="middle" fill="#9ca0a8" fontSize="7.5" fontWeight="500" fontFamily="Inter, sans-serif">{i+1}</text>
          </g>
        );
      })}

      {/* SFP+ */}
      <g transform="translate(465, 62)">
        <rect width="26" height="22" rx="2" fill="#1c1d1f"/>
        <rect x="3" y="6" width="20" height="10" rx="1" fill="#0a0c10"/>
        <text x="13" y="38" textAnchor="middle" fill="#9ca0a8" fontSize="7.5" fontWeight="500" fontFamily="Inter, sans-serif">SFP+</text>
      </g>
    </g>

    {/* floating chips — minimal, white cards */}
    <g transform="translate(110, 150)">
      <rect x="-44" y="-22" width="88" height="44" rx="12" fill="#fff" stroke="#e5e7eb"/>
      <circle cx="-28" cy="0" r="3.5" fill="#10864c"/>
      <text x="-18" y="4" fill="#1c1d1f" fontSize="11" fontFamily="JetBrains Mono, monospace" fontWeight="600">ML-KEM-768</text>
    </g>
    <g transform="translate(490, 130)">
      <rect x="-46" y="-22" width="92" height="44" rx="12" fill="#fff" stroke="#e5e7eb"/>
      <text x="0" y="-2" textAnchor="middle" fill="#9ca0a8" fontSize="8" letterSpacing="1.2" fontWeight="600" fontFamily="Inter, sans-serif">FIPS</text>
      <text x="0" y="13" textAnchor="middle" fill="#1c1d1f" fontSize="13" fontFamily="JetBrains Mono, monospace" fontWeight="600">203 / 204 / 205</text>
    </g>
    <g transform="translate(490, 500)">
      <rect x="-50" y="-22" width="100" height="44" rx="12" fill="#fff" stroke="#e5e7eb"/>
      <circle cx="-34" cy="0" r="3.5" fill={accent}/>
      <text x="-22" y="4" fill="#1c1d1f" fontSize="11" fontFamily="JetBrains Mono, monospace" fontWeight="600">3.2 ms RTT</text>
    </g>
  </svg>
);
window.HeroAppliance = HeroAppliance;

// Cloud/SDK badge visual
const CloudBadge = ({ accent = 'var(--accent)', label = 'CLOUD' }) => (
  <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }}>
    <defs>
      <linearGradient id="cb-bg" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#f7f8fa"/>
        <stop offset="1" stopColor="#eef0f3"/>
      </linearGradient>
    </defs>
    {/* dot grid */}
    <g opacity="0.5">
      {[...Array(10)].map((_, r) => [...Array(14)].map((_, c) => (
        <circle key={`${r}${c}`} cx={20 + c*28} cy={20 + r*28} r="1" fill="#bcc0c8"/>
      )))}
    </g>
    {/* central card */}
    <g transform="translate(200, 150)">
      <rect x="-90" y="-60" width="180" height="120" rx="12" fill="#fff" stroke="#e5e7eb"/>
      <rect x="-90" y="-60" width="180" height="32" rx="12" fill={accent} fillOpacity="0.06"/>
      <text x="-78" y="-40" fill="var(--ink-3)" fontSize="9" fontFamily="Inter, sans-serif" letterSpacing="1.5" fontWeight="600">{label} · QSEC</text>
      <circle cx="78" cy="-44" r="3" fill="#22c55e"/>
      {/* line items */}
      {[0,1,2].map(i => (
        <g key={i} transform={`translate(0, ${-12 + i*20})`}>
          <rect x="-78" y="0" width="6" height="6" rx="1" fill={accent}/>
          <rect x="-66" y="0" width="80" height="6" rx="1" fill="#e5e7eb"/>
          <rect x="20" y="0" width="40" height="6" rx="1" fill="#f1f3f5"/>
        </g>
      ))}
    </g>
    {/* connecting nodes */}
    {[
      [70, 80], [330, 80], [70, 220], [330, 220]
    ].map(([x,y], i) => (
      <g key={i} transform={`translate(${x},${y})`}>
        <circle r="14" fill="#fff" stroke="#e5e7eb"/>
        <circle r="4" fill={accent} opacity={0.6}/>
      </g>
    ))}
    {/* connector lines */}
    <g stroke={accent} strokeWidth="1" strokeDasharray="3 3" fill="none" opacity="0.4">
      <path d="M84 80 L130 130"/>
      <path d="M316 80 L270 130"/>
      <path d="M84 220 L130 170"/>
      <path d="M316 220 L270 170"/>
    </g>
  </svg>
);
window.CloudBadge = CloudBadge;

// Blockchain visual
const ChainViz = ({ accent = 'var(--accent)' }) => (
  <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }}>
    <rect width="400" height="300" fill="url(#chain-bg)"/>
    <defs>
      <linearGradient id="chain-bg" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#f7f8fa"/>
        <stop offset="1" stopColor="#eef0f3"/>
      </linearGradient>
    </defs>
    {/* hex chain */}
    {[0,1,2,3,4].map(i => {
      const x = 50 + i * 70;
      const y = 150 + (i % 2 === 0 ? 0 : 0);
      const filled = i < 3;
      return (
        <g key={i} transform={`translate(${x},${y})`}>
          <path d="M0 -28L24 -14L24 14L0 28L-24 14L-24 -14Z" fill={filled ? accent : '#fff'} stroke={filled ? accent : '#cfd2d7'} strokeWidth="1.5" opacity={filled ? 0.85 : 1}/>
          <text x="0" y="4" textAnchor="middle" fill={filled ? '#fff' : 'var(--ink-3)'} fontSize="10" fontFamily="JetBrains Mono, monospace" fontWeight="600">#{i}</text>
        </g>
      );
    })}
    {/* connectors */}
    {[0,1,2,3].map(i => (
      <line key={i} x1={50 + i*70 + 24} y1={150} x2={50 + (i+1)*70 - 24} y2={150} stroke={accent} strokeWidth="1.5" opacity={i < 2 ? 0.8 : 0.3} strokeDasharray={i < 2 ? '0' : '4 4'}/>
    ))}
    {/* TPS counter floating */}
    <g transform="translate(200, 60)">
      <rect x="-60" y="-22" width="120" height="44" rx="22" fill="#fff" stroke="#e5e7eb"/>
      <circle cx="-44" cy="0" r="4" fill="#22c55e"/>
      <text x="-32" y="4" fill="var(--ink)" fontSize="14" fontFamily="JetBrains Mono, monospace" fontWeight="600">102,847 TPS</text>
    </g>
    {/* hash floating */}
    <g transform="translate(200, 240)" opacity="0.85">
      <rect x="-90" y="-12" width="180" height="24" rx="6" fill="#fff" stroke="#e5e7eb"/>
      <text x="0" y="4" textAnchor="middle" fill="var(--ink-3)" fontSize="10" fontFamily="JetBrains Mono, monospace">0xa9c2…f81e · ML-DSA</text>
    </g>
  </svg>
);
window.ChainViz = ChainViz;

// EDR (endpoint) visual — laptop/desktop
const EdrViz = ({ accent = 'var(--accent)' }) => (
  <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }}>
    <defs>
      <linearGradient id="edr-bg" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#f7f8fa"/>
        <stop offset="1" stopColor="#eef0f3"/>
      </linearGradient>
    </defs>
    <rect width="400" height="300" fill="url(#edr-bg)"/>
    {/* laptop */}
    <g transform="translate(200, 150)">
      {/* screen */}
      <rect x="-90" y="-60" width="180" height="110" rx="6" fill="#1a1d22" stroke="#0a0c10"/>
      <rect x="-84" y="-54" width="168" height="98" rx="3" fill="#0b1020"/>
      {/* dashboard mini */}
      <rect x="-78" y="-48" width="80" height="6" rx="1" fill={accent} opacity="0.8"/>
      <rect x="-78" y="-38" width="156" height="3" rx="1" fill="#2a3142"/>
      <rect x="-78" y="-30" width="100" height="3" rx="1" fill="#2a3142"/>
      {/* graph */}
      <polyline points="-78,20 -60,5 -40,15 -20,-5 0,10 20,-10 40,5 60,-15 78,0" fill="none" stroke={accent} strokeWidth="1.5"/>
      {/* alert dot */}
      <circle cx="40" cy="-46" r="4" fill="#22c55e"/>
      {/* base */}
      <path d="M-100 50L100 50L110 60L-110 60Z" fill="#2c2f36"/>
      <rect x="-12" y="50" width="24" height="3" fill="#1a1d22"/>
    </g>
    {/* shield overlay */}
    <g transform="translate(310, 80)">
      <rect x="-22" y="-22" width="44" height="44" rx="10" fill="#fff" stroke="#e5e7eb"/>
      <path d="M0 -10l10 4v6c0 5-4 9-10 11-6-2-10-6-10-11v-6l10-4z" fill={accent} fillOpacity="0.12" stroke={accent} strokeWidth="1.4" strokeLinejoin="round"/>
      <path d="M-4 0l3 3 6-6" fill="none" stroke={accent} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
    </g>
    {/* threat label */}
    <g transform="translate(80, 230)">
      <rect x="-44" y="-12" width="88" height="24" rx="12" fill="#fff" stroke="#e5e7eb"/>
      <circle cx="-30" cy="0" r="3" fill="#22c55e"/>
      <text x="-20" y="4" fill="var(--ink-2)" fontSize="11" fontFamily="JetBrains Mono, monospace">0 threats</text>
    </g>
  </svg>
);
window.EdrViz = EdrViz;

// Mini dashboard mock used in product detail
const DashMock = ({ accent = 'var(--accent)' }) => (
  <svg viewBox="0 0 800 480" style={{ width: '100%', height: 'auto', display: 'block' }}>
    <rect width="800" height="480" fill="#fafbfc"/>
    {/* sidebar */}
    <rect x="0" y="0" width="200" height="480" fill="#fff"/>
    <line x1="200" y1="0" x2="200" y2="480" stroke="#e5e7eb"/>
    {/* logo */}
    <rect x="20" y="20" width="22" height="22" rx="5" fill="#1c1d1f"/>
    <text x="50" y="36" fontSize="13" fontFamily="Inter, sans-serif" fontWeight="600" fill="#1c1d1f">QSec Cloud</text>
    {/* nav items */}
    {['Overview','Sites','Tunnels','Policies','Keys','Devices','Logs'].map((t, i) => (
      <g key={t}>
        <rect x="12" y={68 + i*36} width="176" height="28" rx="6" fill={i === 0 ? accent : 'transparent'} opacity={i === 0 ? 0.08 : 1}/>
        <circle cx="28" cy={82 + i*36} r="2" fill={i === 0 ? accent : '#9ca0a8'}/>
        <text x="40" y={86 + i*36} fontSize="12.5" fontFamily="Inter, sans-serif" fill={i === 0 ? '#1c1d1f' : '#44464a'} fontWeight={i === 0 ? 600 : 400}>{t}</text>
      </g>
    ))}
    {/* topbar */}
    <rect x="200" y="0" width="600" height="56" fill="#fff"/>
    <line x1="200" y1="56" x2="800" y2="56" stroke="#e5e7eb"/>
    <text x="220" y="32" fontSize="14" fontFamily="Inter, sans-serif" fontWeight="600" fill="#1c1d1f">Overview</text>
    <rect x="700" y="16" width="84" height="24" rx="12" fill={accent}/>
    <text x="742" y="32" fontSize="11" fontFamily="Inter, sans-serif" fontWeight="500" fill="#fff" textAnchor="middle">+ New site</text>
    {/* KPI row */}
    {[
      ['Sites secured', '142', '+8'],
      ['PQC tunnels', '1,284', '+12%'],
      ['Keys rotated', '24h', 'auto'],
      ['Avg latency', '3.2 ms', '−4%'],
    ].map(([l, v, d], i) => (
      <g key={l} transform={`translate(${220 + i*138}, 76)`}>
        <rect width="124" height="80" rx="8" fill="#fff" stroke="#e5e7eb"/>
        <text x="14" y="22" fontSize="10" fontFamily="Inter, sans-serif" fill="#6b6e74" letterSpacing="1" fontWeight="600">{l.toUpperCase()}</text>
        <text x="14" y="50" fontSize="22" fontFamily="Instrument Serif, serif" fill="#1c1d1f">{v}</text>
        <text x="14" y="68" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="#10864c">{d}</text>
      </g>
    ))}
    {/* graph */}
    <g transform="translate(220, 176)">
      <rect width="424" height="220" rx="8" fill="#fff" stroke="#e5e7eb"/>
      <text x="16" y="28" fontSize="13" fontFamily="Inter, sans-serif" fontWeight="600" fill="#1c1d1f">Tunnel throughput</text>
      <text x="16" y="44" fontSize="11" fontFamily="Inter, sans-serif" fill="#6b6e74">Last 24 hours</text>
      {/* gridlines */}
      {[0,1,2,3].map(i => (
        <line key={i} x1="16" y1={80 + i*30} x2="408" y2={80 + i*30} stroke="#f1f3f5"/>
      ))}
      {/* area chart */}
      <path d="M16 170 L60 150 L100 158 L140 130 L180 140 L220 110 L260 120 L300 90 L340 100 L380 80 L408 86 L408 200 L16 200Z" fill={accent} fillOpacity="0.1"/>
      <path d="M16 170 L60 150 L100 158 L140 130 L180 140 L220 110 L260 120 L300 90 L340 100 L380 80 L408 86" fill="none" stroke={accent} strokeWidth="1.6"/>
    </g>
    {/* sites list */}
    <g transform="translate(660, 176)">
      <rect width="124" height="220" rx="8" fill="#fff" stroke="#e5e7eb"/>
      <text x="14" y="24" fontSize="11" fontFamily="Inter, sans-serif" fontWeight="600" fill="#1c1d1f" letterSpacing="0.5">TOP SITES</text>
      {['Mumbai HQ','Pune DC','Blr POP','Del POP','Sgp POP'].map((s, i) => (
        <g key={s} transform={`translate(0, ${44 + i*32})`}>
          <circle cx="14" cy="0" r="3" fill="#22c55e"/>
          <text x="24" y="4" fontSize="11" fontFamily="Inter, sans-serif" fill="#1c1d1f">{s}</text>
          <text x="100" y="4" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="#6b6e74" textAnchor="end">{(Math.random()*9.9).toFixed(1)}G</text>
        </g>
      ))}
    </g>
    {/* table-ish */}
    <g transform="translate(220, 412)">
      <text x="0" y="0" fontSize="11" fontFamily="Inter, sans-serif" fontWeight="600" fill="#1c1d1f" letterSpacing="0.5">RECENT EVENTS</text>
      {[
        ['08:14', 'Key rotation completed', 'mumbai-hq-01', 'OK'],
        ['07:52', 'New ZTNA policy applied', 'finance-team', 'OK'],
      ].map(([t, msg, src, st], i) => (
        <g key={i} transform={`translate(0, ${20 + i*20})`}>
          <text x="0" fontSize="10.5" fontFamily="JetBrains Mono, monospace" fill="#6b6e74">{t}</text>
          <text x="60" fontSize="10.5" fontFamily="Inter, sans-serif" fill="#1c1d1f">{msg}</text>
          <text x="280" fontSize="10.5" fontFamily="JetBrains Mono, monospace" fill="#6b6e74">{src}</text>
          <text x="420" fontSize="10.5" fontFamily="Inter, sans-serif" fill="#10864c" fontWeight="600">{st}</text>
        </g>
      ))}
    </g>
  </svg>
);
window.DashMock = DashMock;

/* Export */
Object.assign(window, { Icon, ApplianceRender, HeroAppliance, CloudBadge, ChainViz, EdrViz, DashMock });