/* global React */
const { useId } = React;

// Tokens
const BG = '#0B1020';
const BG_PANEL = '#0F1530';
const BG_PANEL_2 = '#121A3A';
const TEAL = '#2ABCB4';
const TEAL_DIM = '#1a8a84';
const WHITE = '#F8FAFC';
const MUTED = '#64748B';
const MUTED_2 = '#94A3B8';
const GREEN = '#34D399';
const RED = '#F87171';
const YELLOW = '#FBBF24';
const VIOLET = '#A78BFA';

const PIXEL = "'VT323', 'Press Start 2P', ui-monospace, monospace";
const MONO = "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace";

// Reusable: pixel wordmark
function Wordmark({ size = 28, color = TEAL, name = 'AGENTGUARD', mark = '™' }) {
  return (
    <div style={{
      fontFamily: PIXEL,
      fontSize: size,
      letterSpacing: 2,
      color,
      textShadow: `0 0 8px ${color}55, 0 0 18px ${color}33`,
      lineHeight: 1,
      whiteSpace: 'nowrap',
      fontWeight: 400,
    }}>
      {name}<span style={{ fontSize: size * 0.5, verticalAlign: 'super', marginLeft: 2 }}>{mark}</span>
    </div>
  );
}

function ColumnTitle({ children, color = MUTED }) {
  return (
    <div style={{
      fontFamily: MONO,
      fontSize: 11,
      letterSpacing: 2.4,
      color,
      textTransform: 'uppercase',
      fontWeight: 600,
    }}>{children}</div>
  );
}

// Input pill — left column
function InputBox({ icon, label, sub, accent = TEAL }) {
  return (
    <div style={{
      background: `linear-gradient(180deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`,
      border: `1px solid ${accent}33`,
      borderRadius: 10,
      padding: '12px 14px',
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      boxShadow: `inset 0 1px 0 ${WHITE}06`,
      position: 'relative',
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 6,
        background: `${accent}1a`,
        border: `1px solid ${accent}44`,
        display: 'grid', placeItems: 'center',
        color: accent, fontFamily: MONO, fontSize: 12, fontWeight: 700,
        flexShrink: 0,
      }}>{icon}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: MONO, fontSize: 12.5, color: WHITE, fontWeight: 600, letterSpacing: 0.2 }}>{label}</div>
        <div style={{ fontFamily: MONO, fontSize: 10.5, color: MUTED_2, marginTop: 2, letterSpacing: 0.1 }}>{sub}</div>
      </div>
    </div>
  );
}

// Pipeline step — middle column
function PipelineStep({ n, title, sub, latency }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '28px 1fr auto',
      alignItems: 'center',
      gap: 12,
      background: `linear-gradient(180deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`,
      border: `1px solid ${TEAL}40`,
      borderRadius: 10,
      padding: '10px 12px',
      boxShadow: `inset 0 1px 0 ${WHITE}08, 0 0 0 1px ${TEAL}10, 0 6px 18px ${TEAL}10`,
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: '50%',
        background: `${TEAL}1a`, border: `1px solid ${TEAL}88`,
        color: TEAL, fontFamily: MONO, fontSize: 12, fontWeight: 700,
        display: 'grid', placeItems: 'center',
      }}>{n}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: MONO, fontSize: 12.5, color: WHITE, fontWeight: 700, letterSpacing: 0.2 }}>{title}</div>
        <div style={{ fontFamily: MONO, fontSize: 10.5, color: MUTED_2, marginTop: 2, letterSpacing: 0.1, lineHeight: 1.3 }}>{sub}</div>
      </div>
      <div style={{
        fontFamily: MONO, fontSize: 10, color: TEAL,
        background: `${TEAL}14`, border: `1px solid ${TEAL}55`,
        borderRadius: 4, padding: '3px 6px', whiteSpace: 'nowrap',
        letterSpacing: 0.4,
      }}>{latency}</div>
    </div>
  );
}

// Verdict box — right column
function VerdictBox({ glyph, title, sub, color, silent }) {
  return (
    <div style={{
      background: silent
        ? `linear-gradient(180deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`
        : `linear-gradient(180deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`,
      border: `1px solid ${color}55`,
      borderRadius: 10,
      padding: '12px 14px',
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      boxShadow: silent ? 'none' : `0 0 24px ${color}22, inset 0 1px 0 ${WHITE}08`,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: `${color}22`,
        border: `1px solid ${color}88`,
        color, fontFamily: MONO, fontSize: 16, fontWeight: 800,
        display: 'grid', placeItems: 'center',
        flexShrink: 0,
        textShadow: silent ? 'none' : `0 0 8px ${color}aa`,
      }}>{glyph}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{
          fontFamily: MONO, fontSize: 13, color: WHITE, fontWeight: 700, letterSpacing: 0.6,
        }}>{title}</div>
        <div style={{ fontFamily: MONO, fontSize: 10.5, color: MUTED_2, marginTop: 2, letterSpacing: 0.1 }}>{sub}</div>
      </div>
    </div>
  );
}

// Connector edges between columns — animated dashed flow
function Edges({ width, height, leftPoints, rightPoints, midLeftX, midRightX, idSeed }) {
  // leftPoints: array of {y} on left edge of middle col coming from inputs
  // rightPoints: array of {y} on right edge of middle col going to verdicts
  const gid = `flow-${idSeed}`;
  return (
    <svg
      width={width}
      height={height}
      style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1 }}
    >
      <defs>
        <linearGradient id={`${gid}-l`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={TEAL} stopOpacity="0.0" />
          <stop offset="60%" stopColor={TEAL} stopOpacity="0.55" />
          <stop offset="100%" stopColor={TEAL} stopOpacity="0.85" />
        </linearGradient>
        <linearGradient id={`${gid}-r`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={TEAL} stopOpacity="0.85" />
          <stop offset="40%" stopColor={TEAL} stopOpacity="0.55" />
          <stop offset="100%" stopColor={TEAL} stopOpacity="0.0" />
        </linearGradient>
        <filter id={`${gid}-glow`} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="1.6" result="b" />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      {leftPoints.map((p, i) => {
        const startX = p.startX;
        const startY = p.y;
        const endX = midLeftX;
        const endY = p.endY;
        const cx = (startX + endX) / 2;
        const d = `M ${startX} ${startY} C ${cx} ${startY}, ${cx} ${endY}, ${endX} ${endY}`;
        return (
          <g key={`l-${i}`} filter={`url(#${gid}-glow)`}>
            <path d={d} stroke={`url(#${gid}-l)`} strokeWidth="1.4" fill="none" />
            <path d={d} stroke={TEAL} strokeWidth="0.8" strokeDasharray="3 6" fill="none" opacity="0.9">
              <animate attributeName="stroke-dashoffset" from="0" to="-18" dur="1.4s" repeatCount="indefinite" />
            </path>
            {/* arrowhead */}
            <polygon points={`${endX},${endY} ${endX - 6},${endY - 3} ${endX - 6},${endY + 3}`} fill={TEAL} opacity="0.95" />
          </g>
        );
      })}
      {rightPoints.map((p, i) => {
        const startX = midRightX;
        const startY = p.startY;
        const endX = p.endX;
        const endY = p.y;
        const cx = (startX + endX) / 2;
        const d = `M ${startX} ${startY} C ${cx} ${startY}, ${cx} ${endY}, ${endX} ${endY}`;
        return (
          <g key={`r-${i}`} filter={`url(#${gid}-glow)`}>
            <path d={d} stroke={`url(#${gid}-r)`} strokeWidth="1.4" fill="none" />
            <path d={d} stroke={TEAL} strokeWidth="0.8" strokeDasharray="3 6" fill="none" opacity="0.9">
              <animate attributeName="stroke-dashoffset" from="0" to="-18" dur="1.4s" repeatCount="indefinite" />
            </path>
            <polygon points={`${endX},${endY} ${endX - 6},${endY - 3} ${endX - 6},${endY + 3}`} fill={TEAL} opacity="0.95" />
          </g>
        );
      })}
    </svg>
  );
}

// Subtle background — grid + glow blobs
function Backdrop({ width, height }) {
  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      {/* radial teal glows */}
      <div style={{
        position: 'absolute', left: '50%', top: '40%', transform: 'translate(-50%, -50%)',
        width: width * 0.6, height: width * 0.6, borderRadius: '50%',
        background: `radial-gradient(closest-side, ${TEAL}1a, transparent 70%)`,
        filter: 'blur(8px)',
      }} />
      <div style={{
        position: 'absolute', left: '12%', top: '85%',
        width: 380, height: 380, borderRadius: '50%',
        background: `radial-gradient(closest-side, ${VIOLET}14, transparent 70%)`,
      }} />
      <div style={{
        position: 'absolute', right: '8%', top: '8%',
        width: 320, height: 320, borderRadius: '50%',
        background: `radial-gradient(closest-side, ${TEAL}14, transparent 70%)`,
      }} />
      {/* dot grid */}
      <svg width={width} height={height} style={{ position: 'absolute', inset: 0, opacity: 0.35 }}>
        <defs>
          <pattern id="dotgrid" x="0" y="0" width="28" height="28" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="1" fill={`${MUTED}`} opacity="0.18" />
          </pattern>
        </defs>
        <rect width={width} height={height} fill="url(#dotgrid)" />
      </svg>
      {/* horizontal scanline highlight */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 0, height: 1,
        background: `linear-gradient(90deg, transparent, ${TEAL}40, transparent)`,
      }} />
    </div>
  );
}

// Merkle icon
function MerkleIcon({ size = 36 }) {
  const c = TEAL;
  return (
    <svg width={size} height={size} viewBox="0 0 36 36">
      <g stroke={c} strokeWidth="1" fill="none" opacity="0.9">
        <line x1="18" y1="6" x2="9" y2="16" />
        <line x1="18" y1="6" x2="27" y2="16" />
        <line x1="9" y1="16" x2="4" y2="28" />
        <line x1="9" y1="16" x2="14" y2="28" />
        <line x1="27" y1="16" x2="22" y2="28" />
        <line x1="27" y1="16" x2="32" y2="28" />
      </g>
      <g fill={c}>
        <circle cx="18" cy="6" r="2.4" />
        <circle cx="9" cy="16" r="2" />
        <circle cx="27" cy="16" r="2" />
        <circle cx="4" cy="28" r="1.6" />
        <circle cx="14" cy="28" r="1.6" />
        <circle cx="22" cy="28" r="1.6" />
        <circle cx="32" cy="28" r="1.6" />
      </g>
    </svg>
  );
}

// Main diagram — variant: 'master' (1600x900) | 'og' (1200x675) | 'square' (1080x1080)
function ArchitectureDiagram({ variant = 'master' }) {
  const dims = {
    master: { w: 1600, h: 900, scale: 1 },
    og: { w: 1200, h: 675, scale: 0.75 },
    square: { w: 1080, h: 1080, scale: 1 },
  }[variant];

  // Square crop centers on middle column only
  if (variant === 'square') {
    return <SquareDiagram />;
  }

  const W = dims.w;
  const H = dims.h;

  // Layout: 3 columns, padding around
  // For OG, just scale the master via CSS transform — same content, smaller frame
  if (variant === 'og') {
    return (
      <div style={{
        width: 1200, height: 675, background: BG, position: 'relative', overflow: 'hidden',
        borderRadius: 0,
      }}>
        <div style={{
          width: 1600, height: 900,
          transform: 'scale(0.75)',
          transformOrigin: 'top left',
          position: 'absolute', top: 0, left: 0,
        }}>
          <MasterDiagram />
        </div>
      </div>
    );
  }

  return <MasterDiagram />;
}

function MasterDiagram() {
  const W = 1600, H = 900;
  const PAD_X = 56;
  const TOP = 70;
  const BOTTOM_TRUST_H = 70;
  const colGap = 28;
  const colW = (W - PAD_X * 2 - colGap * 2) / 3; // ~ 489

  // Coordinates (left edge of cols)
  const col1X = PAD_X;
  const col2X = PAD_X + colW + colGap;
  const col3X = PAD_X + (colW + colGap) * 2;

  // Inputs
  const inputs = [
    { icon: '$', label: 'USDC payment on Base', sub: 'x402 protocol' },
    { icon: 'S', label: 'Stripe charge / dispute', sub: 'webhook ingest' },
    { icon: '✉', label: 'Conversational message', sub: 'WhatsApp · Telegram · SMS · chat' },
    { icon: 'A', label: 'AI agent tool call', sub: 'MCP · OpenAI Agent SDK · Anthropic CU' },
    { icon: '⛓', label: 'Cross-platform agent identity', sub: 'ERC-8004 soulbound · Arbitrum' },
  ];

  // Pipeline
  const steps = [
    { n: 1, title: 'KYA — Know Your Agent', sub: 'cross-platform identity lookup', latency: '<10ms' },
    { n: 2, title: 'OFAC SDN sanctions', sub: 'live Treasury XML refresh', latency: '<5ms' },
    { n: 3, title: 'LLM Firewall', sub: 'Sentinela L0→L1→L2→L3 + address detection', latency: '<10ms' },
    { n: 4, title: 'GuardGate', sub: 'capability-gated trust verification', latency: '<2ms' },
    { n: 5, title: 'GuardScore® API', sub: '4-component risk score', latency: '<20ms' },
    { n: 6, title: 'Kill Switch', sub: 'FORCE_3DS · BLOCK · FREEZE actuator', latency: '<2ms' },
  ];

  // Verdicts
  const verdicts = [
    { glyph: '✓', title: 'ALLOW', sub: 'release transaction / agent action', color: GREEN },
    { glyph: '✕', title: 'DENY', sub: 'blocked · audit logged', color: RED },
    { glyph: '!', title: 'ENHANCED SCREENING', sub: 'manual review queue', color: YELLOW },
    { glyph: '◇', title: 'HONEYPOT', sub: 'silent · attacker sees decoy 200 OK', color: MUTED_2, silent: true },
  ];

  // Vertical layout for left col
  const leftTitleY = TOP;
  const leftStartY = TOP + 30;
  const leftBoxH = 56;
  const leftGap = 14;

  // Middle column
  const midTitleY = TOP;
  const midHeaderH = 96; // wordmark card
  const midPipelineStartY = TOP + 30 + midHeaderH + 14;
  const stepH = 56;
  const stepGap = 10;
  const midPipelineEndY = midPipelineStartY + steps.length * stepH + (steps.length - 1) * stepGap;
  const dagStripY = midPipelineEndY + 14;
  const dagStripH = 60;

  // Right column
  const rightTitleY = TOP;
  const rightStartY = TOP + 30 + 36; // a bit lower so it's visually centered with pipeline
  const verdictH = 72;
  const verdictGap = 16;

  // Edge points
  const leftEdgePoints = inputs.map((_, i) => {
    const y = leftStartY + i * (leftBoxH + leftGap) + leftBoxH / 2;
    // funnel: all left inputs converge into the wordmark header on the middle column
    const endY = TOP + 30 + midHeaderH / 2;
    return {
      startX: col1X + colW,
      y,
      endY,
    };
  });

  const rightEdgePoints = verdicts.map((v, i) => {
    const y = rightStartY + i * (verdictH + verdictGap) + verdictH / 2;
    // fan-out from the kill switch (last step)
    const startY = midPipelineStartY + (steps.length - 1) * (stepH + stepGap) + stepH / 2;
    return {
      startY,
      y,
      endX: col3X,
    };
  });

  return (
    <div style={{
      width: W, height: H, position: 'relative', overflow: 'hidden',
      background: `radial-gradient(ellipse at 50% 30%, #0E1530 0%, ${BG} 55%, #06091A 100%)`,
      color: WHITE,
    }}>
      <Backdrop width={W} height={H} />

      {/* TOP-LEFT brand mark */}
      <div style={{ position: 'absolute', top: 22, left: PAD_X, display: 'flex', alignItems: 'center', gap: 14, zIndex: 3 }}>
        <div style={{
          width: 14, height: 14, borderRadius: 4,
          background: TEAL, boxShadow: `0 0 14px ${TEAL}`,
          position: 'relative', flexShrink: 0,
        }}>
          <div style={{ position: 'absolute', inset: 3, background: BG, borderRadius: 1 }} />
        </div>
        <Wordmark size={34} name="AGENTGUARD" mark="™" />
        <div style={{
          fontFamily: MONO, fontSize: 14, color: MUTED_2,
          letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500,
          paddingLeft: 14, marginLeft: 2,
          borderLeft: `1px solid ${TEAL}33`,
        }}>
          Architecture
        </div>
      </div>

      {/* TOP-RIGHT meta */}
      <div style={{
        position: 'absolute', top: 32, right: PAD_X,
        fontFamily: MONO, fontSize: 10.5, color: MUTED_2,
        letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500,
        zIndex: 3,
      }}>
        Listed on x402.org/ecosystem · Sub-50ms · Cryptographically signed
      </div>



      {/* COLUMN TITLES */}
      <div style={{ position: 'absolute', left: col1X, top: leftTitleY - 4, width: colW, zIndex: 3 }}>
        <ColumnTitle>Input · Agent Requests</ColumnTitle>
      </div>
      <div style={{ position: 'absolute', left: col2X, top: midTitleY - 4, width: colW, zIndex: 3, textAlign: 'center' }}>
        <ColumnTitle color={TEAL}>AgentGuard™ — Agent Compliance Layer</ColumnTitle>
      </div>
      <div style={{ position: 'absolute', left: col3X, top: rightTitleY - 4, width: colW, zIndex: 3, textAlign: 'right' }}>
        <ColumnTitle>Verdict · Cryptographically Signed</ColumnTitle>
      </div>

      {/* EDGES (under boxes but above backdrop) */}
      <Edges
        width={W}
        height={H}
        leftPoints={leftEdgePoints}
        rightPoints={rightEdgePoints}
        midLeftX={col2X}
        midRightX={col2X + colW}
        idSeed="m"
      />

      {/* LEFT COLUMN BOXES */}
      <div style={{ position: 'absolute', left: col1X, top: leftStartY, width: colW, display: 'flex', flexDirection: 'column', gap: leftGap, zIndex: 2 }}>
        {inputs.map((it, i) => (
          <div key={i} style={{ height: leftBoxH }}>
            <InputBox icon={it.icon} label={it.label} sub={it.sub} />
          </div>
        ))}
      </div>

      {/* MIDDLE COLUMN */}
      <div style={{ position: 'absolute', left: col2X, top: TOP + 30, width: colW, zIndex: 2 }}>
        {/* Wordmark header card */}
        <div style={{
          height: midHeaderH,
          borderRadius: 12,
          background: `linear-gradient(180deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`,
          border: `1px solid ${TEAL}66`,
          boxShadow: `0 0 30px ${TEAL}22, inset 0 1px 0 ${WHITE}10`,
          display: 'grid',
          placeItems: 'center',
          padding: '0 18px',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* corner ticks */}
          {['tl', 'tr', 'bl', 'br'].map(k => (
            <div key={k} style={{
              position: 'absolute',
              [k.includes('t') ? 'top' : 'bottom']: 6,
              [k.includes('l') ? 'left' : 'right']: 6,
              width: 10, height: 10,
              borderTop: k.includes('t') ? `1px solid ${TEAL}` : 'none',
              borderBottom: k.includes('b') ? `1px solid ${TEAL}` : 'none',
              borderLeft: k.includes('l') ? `1px solid ${TEAL}` : 'none',
              borderRight: k.includes('r') ? `1px solid ${TEAL}` : 'none',
              opacity: 0.7,
            }} />
          ))}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
            <Wordmark size={42} name="AGENTGUARD" mark="™" />
            <div style={{
              fontFamily: MONO, fontSize: 11, color: TEAL,
              opacity: 0.8, letterSpacing: '0.34em', textTransform: 'uppercase',
              fontWeight: 500,
            }}>
              one api call · cryptographically signed verdict · by MerchantGuard®
            </div>
          </div>
        </div>

        {/* Pipeline */}
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: stepGap }}>
          {steps.map((s, i) => (
            <div key={i} style={{ height: stepH }}>
              <PipelineStep n={s.n} title={s.title} sub={s.sub} latency={s.latency} />
            </div>
          ))}
        </div>

        {/* DAG strip */}
        <div style={{
          marginTop: 14,
          height: dagStripH,
          borderRadius: 10,
          background: `linear-gradient(90deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`,
          border: `1px dashed ${TEAL}66`,
          display: 'flex', alignItems: 'center', gap: 14,
          padding: '0 14px',
          boxShadow: `inset 0 1px 0 ${WHITE}06`,
        }}>
          <MerkleIcon size={36} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: MONO, fontSize: 12.5, color: WHITE, fontWeight: 700, letterSpacing: 0.4 }}>
              DAG TRUST ATTESTATION TOKEN
            </div>
            <div style={{ fontFamily: MONO, fontSize: 10.5, color: MUTED_2, letterSpacing: 0.2, marginTop: 2 }}>
              multi-agent provenance · Merkle-rooted · signed per call
            </div>
          </div>
          <div style={{
            fontFamily: MONO, fontSize: 10, color: TEAL,
            background: `${TEAL}14`, border: `1px solid ${TEAL}55`,
            borderRadius: 4, padding: '4px 8px', whiteSpace: 'nowrap', letterSpacing: 0.4,
          }}>SIG · Ed25519</div>
        </div>
      </div>

      {/* RIGHT COLUMN */}
      <div style={{ position: 'absolute', left: col3X, top: rightStartY, width: colW, display: 'flex', flexDirection: 'column', gap: verdictGap, zIndex: 2 }}>
        {verdicts.map((v, i) => (
          <div key={i} style={{ height: verdictH }}>
            <VerdictBox glyph={v.glyph} title={v.title} sub={v.sub} color={v.color} silent={v.silent} />
          </div>
        ))}
      </div>

      {/* BOTTOM TRUST BAR */}
      <div style={{
        position: 'absolute', left: PAD_X, right: PAD_X, bottom: 60,
        borderTop: `1px solid ${TEAL}22`, paddingTop: 12,
        display: 'flex', justifyContent: 'center', alignItems: 'center',
        zIndex: 3,
      }}>
        <div style={{ fontFamily: MONO, fontSize: 12, color: MUTED_2, letterSpacing: 0.4, lineHeight: 1.4, textAlign: 'center' }}>
          AgentGuard™ USPTO 99462472 published Apr 14
          <span style={{ color: TEAL, margin: '0 10px' }}>·</span>
          4 patent provisionals filed Feb 17, 2026
          <span style={{ color: TEAL, margin: '0 10px' }}>·</span>
          Listed live on x402.org/ecosystem
          <span style={{ color: TEAL, margin: '0 10px' }}>·</span>
          Sub-50ms total per call
        </div>
      </div>

      {/* FOOTER */}
      <div style={{
        position: 'absolute', left: PAD_X, right: PAD_X, bottom: 22,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 3, gap: 24,
      }}>
        <div style={{ fontFamily: MONO, fontSize: 11, color: MUTED, letterSpacing: 0.4 }}>
          MerchantGuard® · The compliance layer for the AI agent economy
        </div>
        <div style={{ fontFamily: MONO, fontSize: 11.5, color: WHITE, letterSpacing: 0.6, whiteSpace: 'nowrap' }}>
          merchantguard.ai
          <span style={{ color: TEAL, margin: '0 8px' }}>·</span>
          @merchantguardhq
        </div>
      </div>
    </div>
  );
}

// Square crop — 1080x1080, focuses on the middle compliance pipeline
function SquareDiagram() {
  const W = 1080, H = 1080;
  const PAD_X = 80;
  const TOP = 80;
  const colW = W - PAD_X * 2;

  const steps = [
    { n: 1, title: 'KYA — Know Your Agent', sub: 'cross-platform identity lookup', latency: '<10ms' },
    { n: 2, title: 'OFAC SDN sanctions', sub: 'live Treasury XML refresh', latency: '<5ms' },
    { n: 3, title: 'LLM Firewall', sub: 'Sentinela L0→L1→L2→L3 + address detection', latency: '<10ms' },
    { n: 4, title: 'GuardGate', sub: 'capability-gated trust verification', latency: '<2ms' },
    { n: 5, title: 'GuardScore® API', sub: '4-component risk score', latency: '<20ms' },
    { n: 6, title: 'Kill Switch', sub: 'FORCE_3DS · BLOCK · FREEZE actuator', latency: '<2ms' },
  ];

  return (
    <div style={{
      width: W, height: H, position: 'relative', overflow: 'hidden',
      background: `radial-gradient(ellipse at 50% 30%, #0E1530 0%, ${BG} 55%, #06091A 100%)`,
      color: WHITE,
    }}>
      <Backdrop width={W} height={H} />

      {/* Top label — AGENTGUARD pixel title */}
      <div style={{ position: 'absolute', left: PAD_X, top: 32, right: PAD_X, display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 3, gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 14, height: 14, borderRadius: 4,
            background: TEAL, boxShadow: `0 0 14px ${TEAL}`,
            position: 'relative', flexShrink: 0,
          }}>
            <div style={{ position: 'absolute', inset: 3, background: BG, borderRadius: 1 }} />
          </div>
          <Wordmark size={36} name="AGENTGUARD" mark="™" />
          <div style={{
            fontFamily: MONO, fontSize: 14, color: MUTED_2,
            letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 500,
            paddingLeft: 14, borderLeft: `1px solid ${TEAL}33`,
          }}>
            Architecture
          </div>
        </div>
        <div style={{
          fontFamily: MONO, fontSize: 10.5, color: MUTED_2,
          letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500,
          textAlign: 'right',
        }}>
          Listed on x402.org/ecosystem<br />Sub-50ms · Cryptographically signed
        </div>
      </div>

      {/* Wordmark header */}
      <div style={{ position: 'absolute', left: PAD_X, top: TOP + 50, width: colW, zIndex: 2 }}>
        <div style={{ textAlign: 'center', marginBottom: 14 }}>
          <div style={{ fontFamily: MONO, fontSize: 12, color: MUTED, letterSpacing: 2.4, textTransform: 'uppercase' }}>
            AgentGuard™ — Agent Compliance Layer
          </div>
        </div>
        <div style={{
          height: 150,
          borderRadius: 14,
          background: `linear-gradient(180deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`,
          border: `1px solid ${TEAL}66`,
          boxShadow: `0 0 36px ${TEAL}22, inset 0 1px 0 ${WHITE}10`,
          display: 'grid', placeItems: 'center',
          position: 'relative',
        }}>
          {['tl', 'tr', 'bl', 'br'].map(k => (
            <div key={k} style={{
              position: 'absolute',
              [k.includes('t') ? 'top' : 'bottom']: 8,
              [k.includes('l') ? 'left' : 'right']: 8,
              width: 12, height: 12,
              borderTop: k.includes('t') ? `1px solid ${TEAL}` : 'none',
              borderBottom: k.includes('b') ? `1px solid ${TEAL}` : 'none',
              borderLeft: k.includes('l') ? `1px solid ${TEAL}` : 'none',
              borderRight: k.includes('r') ? `1px solid ${TEAL}` : 'none',
              opacity: 0.7,
            }} />
          ))}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <Wordmark size={56} name="AGENTGUARD" mark="™" />
            <div style={{
              fontFamily: MONO, fontSize: 11, color: TEAL, opacity: 0.8,
              letterSpacing: '0.34em', textTransform: 'uppercase', fontWeight: 500,
              textAlign: 'center',
            }}>
              one api call · cryptographically signed verdict<br />by MerchantGuard®
            </div>
          </div>
        </div>

        {/* Pipeline */}
        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {steps.map((s, i) => (
            <div key={i} style={{ height: 76 }}>
              <PipelineStepLarge n={s.n} title={s.title} sub={s.sub} latency={s.latency} />
            </div>
          ))}
        </div>

        {/* DAG strip */}
        <div style={{
          marginTop: 18,
          height: 78,
          borderRadius: 12,
          background: `linear-gradient(90deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`,
          border: `1px dashed ${TEAL}66`,
          display: 'flex', alignItems: 'center', gap: 16,
          padding: '0 18px',
        }}>
          <MerkleIcon size={44} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: MONO, fontSize: 14, color: WHITE, fontWeight: 700, letterSpacing: 0.4 }}>
              DAG TRUST ATTESTATION TOKEN
            </div>
            <div style={{ fontFamily: MONO, fontSize: 11, color: MUTED_2, letterSpacing: 0.2, marginTop: 3 }}>
              multi-agent provenance · Merkle-rooted · signed per call
            </div>
          </div>
          <div style={{
            fontFamily: MONO, fontSize: 11, color: TEAL,
            background: `${TEAL}14`, border: `1px solid ${TEAL}55`,
            borderRadius: 4, padding: '5px 9px', whiteSpace: 'nowrap', letterSpacing: 0.5,
          }}>SIG · Ed25519</div>
        </div>
      </div>

      {/* Bottom trust bar */}
      <div style={{
        position: 'absolute', left: PAD_X, right: PAD_X, bottom: 70,
        borderTop: `1px solid ${TEAL}22`, paddingTop: 14,
        zIndex: 3,
      }}>
        <div style={{ fontFamily: MONO, fontSize: 11.5, color: MUTED_2, letterSpacing: 0.4, lineHeight: 1.6, textAlign: 'center' }}>
          AgentGuard™ USPTO 99462472
          <span style={{ color: TEAL, margin: '0 8px' }}>·</span>
          4 patent provisionals filed Feb 17, 2026
          <br />
          Listed live on x402.org/ecosystem
          <span style={{ color: TEAL, margin: '0 8px' }}>·</span>
          Sub-50ms total per call
        </div>
      </div>

      {/* Footer */}
      <div style={{
        position: 'absolute', left: PAD_X, right: PAD_X, bottom: 28,
        zIndex: 3,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
      }}>
        <div style={{ fontFamily: MONO, fontSize: 11, color: MUTED, letterSpacing: 0.4, textAlign: 'center' }}>
          MerchantGuard® · The compliance layer for the AI agent economy
        </div>
        <div style={{ fontFamily: MONO, fontSize: 12, color: WHITE, letterSpacing: 0.6, textAlign: 'center' }}>
          merchantguard.ai
          <span style={{ color: TEAL, margin: '0 10px' }}>·</span>
          @merchantguardhq
        </div>
      </div>
    </div>
  );
}

function PipelineStepLarge({ n, title, sub, latency }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '36px 1fr auto',
      alignItems: 'center',
      gap: 16,
      background: `linear-gradient(180deg, ${BG_PANEL} 0%, ${BG_PANEL_2} 100%)`,
      border: `1px solid ${TEAL}40`,
      borderRadius: 12,
      padding: '14px 16px',
      boxShadow: `inset 0 1px 0 ${WHITE}08, 0 0 0 1px ${TEAL}10, 0 8px 22px ${TEAL}10`,
      height: '100%',
    }}>
      <div style={{
        width: 34, height: 34, borderRadius: '50%',
        background: `${TEAL}1a`, border: `1px solid ${TEAL}88`,
        color: TEAL, fontFamily: MONO, fontSize: 15, fontWeight: 700,
        display: 'grid', placeItems: 'center',
      }}>{n}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: MONO, fontSize: 15, color: WHITE, fontWeight: 700, letterSpacing: 0.2 }}>{title}</div>
        <div style={{ fontFamily: MONO, fontSize: 12, color: MUTED_2, marginTop: 3, letterSpacing: 0.1 }}>{sub}</div>
      </div>
      <div style={{
        fontFamily: MONO, fontSize: 11.5, color: TEAL,
        background: `${TEAL}14`, border: `1px solid ${TEAL}55`,
        borderRadius: 5, padding: '5px 9px', whiteSpace: 'nowrap', letterSpacing: 0.5,
      }}>{latency}</div>
    </div>
  );
}

window.ArchitectureDiagram = ArchitectureDiagram;
window.MasterDiagram = MasterDiagram;
window.SquareDiagram = SquareDiagram;