// diagrams.jsx, animated SVG diagrams for the TEE explainer
// All components take props.L (the localised diagram labels) so language toggling Just Works.

const { useEffect, useRef, useState } = React;

// ────────────────────────────────────────────────────────────────────────────
// HeroDiagram, ambient cross-section: data particles streaming into an enclave
// at the centre of a host machine. Loops forever.
// ────────────────────────────────────────────────────────────────────────────
function HeroDiagram({ L }) {
  // a handful of particles travelling in from each edge to the centre
  const tracks = [];
  const N = 14;
  for (let i = 0; i < N; i++) {
    const angle = (i / N) * Math.PI * 2;
    const r1 = 220;
    const r2 = 78; // edge of enclave
    const x1 = 250 + Math.cos(angle) * r1;
    const y1 = 250 + Math.sin(angle) * r1;
    const x2 = 250 + Math.cos(angle) * r2;
    const y2 = 250 + Math.sin(angle) * r2;
    tracks.push({ x1, y1, x2, y2, delay: (i / N) * 3.2, key: i });
  }

  // Colors picked for the DARK navy hero panel
  const CIPHER = "#7da3d6";       // light blue particles
  const ACCENT = "#e87e3c";       // orange (outbound)
  const ENCL = "#5fb37a";         // bright green for enclave on dark
  const ENCL_GLOW = "rgba(95,179,122,0.32)";
  const LINE = "rgba(255,255,255,0.10)";
  const LABEL = "#aeb6c6";

  return (
    <svg viewBox="0 0 500 500" className="diagram on-dark" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <radialGradient id="enclaveGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={ENCL_GLOW} stopOpacity="1" />
          <stop offset="65%" stopColor={ENCL_GLOW} stopOpacity="0.45" />
          <stop offset="100%" stopColor={ENCL_GLOW} stopOpacity="0" />
        </radialGradient>
        <radialGradient id="hostFade" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#0d1421" stopOpacity="0" />
          <stop offset="60%" stopColor="#0d1421" stopOpacity="0" />
          <stop offset="100%" stopColor="#0d1421" stopOpacity="1" />
        </radialGradient>
      </defs>

      {/* concentric "host machine" layers */}
      {[210, 170, 130].map((r, i) => (
        <circle key={r} cx="250" cy="250" r={r}
          fill="none" stroke="#ffffff" strokeOpacity={0.08 - i * 0.018}
          strokeDasharray={i === 0 ? "2 5" : i === 1 ? "1 4" : "1 3"} />
      ))}

      {/* enclave glow */}
      <circle cx="250" cy="250" r="130" fill="url(#enclaveGlow)" />

      {/* particle tracks */}
      {tracks.map(t => (
        <line key={`g${t.key}`} x1={t.x1} y1={t.y1} x2={t.x2} y2={t.y2}
          stroke={CIPHER} strokeOpacity={0.09} strokeWidth="0.6" />
      ))}

      {/* moving particles, ciphertext in */}
      {tracks.map(t => (
        <g key={`p${t.key}`}>
          <circle r="2.6" fill={CIPHER}>
            <animate attributeName="cx" from={t.x1} to={t.x2}
              dur="3.2s" begin={`${t.delay}s`} repeatCount="indefinite" />
            <animate attributeName="cy" from={t.y1} to={t.y2}
              dur="3.2s" begin={`${t.delay}s`} repeatCount="indefinite" />
            <animate attributeName="opacity"
              values="0;1;1;0.1" keyTimes="0;0.15;0.85;1"
              dur="3.2s" begin={`${t.delay}s`} repeatCount="indefinite" />
            <animate attributeName="r"
              values="2.6;2.6;1.4" keyTimes="0;0.85;1"
              dur="3.2s" begin={`${t.delay}s`} repeatCount="indefinite" />
          </circle>
        </g>
      ))}

      {/* outbound particles, accent orange (response/ciphertext) */}
      {tracks.slice(0, 8).map((t, i) => (
        <circle key={`o${i}`} r="2" fill={ACCENT}>
          <animate attributeName="cx" from={t.x2} to={t.x1}
            dur="3.2s" begin={`${t.delay + 1.6}s`} repeatCount="indefinite" />
          <animate attributeName="cy" from={t.y2} to={t.y1}
            dur="3.2s" begin={`${t.delay + 1.6}s`} repeatCount="indefinite" />
          <animate attributeName="opacity"
            values="0;1;1;0" keyTimes="0;0.1;0.85;1"
            dur="3.2s" begin={`${t.delay + 1.6}s`} repeatCount="indefinite" />
        </circle>
      ))}

      {/* enclave outline */}
      <circle cx="250" cy="250" r="78" fill="#131b2c" stroke={ENCL} strokeWidth="1.4" />
      <circle cx="250" cy="250" r="78" fill="none" stroke={ENCL} strokeOpacity="0.25" strokeWidth="6" />

      {/* enclave inner: soft pulse */}
      <circle cx="250" cy="250" r="50" fill={ENCL} opacity="0.18">
        <animate attributeName="r" values="46;52;46" dur="4s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.14;0.28;0.14" dur="4s" repeatCount="indefinite" />
      </circle>

      {/* padlock */}
      <g transform="translate(250 250)">
        <rect x="-14" y="-6" width="28" height="20" rx="2" fill={ENCL} />
        <path d="M -8 -6 L -8 -12 a 8 8 0 0 1 16 0 L 8 -6"
          fill="none" stroke={ENCL} strokeWidth="2.2" strokeLinecap="round" />
        <circle cx="0" cy="4" r="2" fill="#0d1421" />
      </g>

      {/* edge fade */}
      <rect x="0" y="0" width="500" height="500" fill="url(#hostFade)" />

      {/* labels */}
      <text x="250" y="356" textAnchor="middle"
        fill={ENCL} fontWeight="600" letterSpacing="0.1em" fontSize="11">
        {L.enclave.toUpperCase()}
      </text>
      <text x="22" y="28" fontSize="9.5" fill={LABEL} letterSpacing="0.12em" fontWeight="500">
        {L.hostMachine.toUpperCase()}
      </text>
      <text x="478" y="484" textAnchor="end" fontSize="9.5" fill={LABEL} letterSpacing="0.12em">
        <tspan fill={CIPHER}>● </tspan>{L.ciphertext.toUpperCase()}
        <tspan dx="8" fill={ACCENT}>● </tspan>{L.response.toUpperCase()}
      </text>
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// TEEDiagram, explicit cross-section. Client on the left, host machine on
// the right with an enclave inside. Ciphertext travels in, decrypts inside,
// re-encrypts on the way out.
// ────────────────────────────────────────────────────────────────────────────
function TEEDiagram({ L }) {
  // palette: light grey base + navy + green enclave + orange accent
  const INK = "#131a26";
  const INK2 = "#3b4555";
  const INK3 = "#6c7585";
  const PAPER = "#ffffff";
  const LINE = "rgba(19,26,38,0.15)";
  const CIPHER = "#2f4a6b";
  const CIPHER_BG = "#d6dde6";
  const ENCL = "#2d7a4d";
  const ENCL2 = "#1f5a37";
  const ENCL_BG = "#d6ecdf";
  const DANGER = "#cf4b3a";
  const DANGER2 = "#a23829";
  const DANGER_BG = "#f7d8d2";
  const ACCENT = "#e87e3c";

  return (
    <svg viewBox="0 0 1100 480" className="diagram" preserveAspectRatio="xMidYMid meet">
      <defs>
        <marker id="arr-cipher-t" viewBox="0 0 10 10" refX="9" refY="5"
          markerWidth="6" markerHeight="6" orient="auto">
          <path d="M0 0 L10 5 L0 10 z" fill={CIPHER} />
        </marker>
      </defs>

      {/* host machine */}
      <rect x="370" y="50" width="700" height="380" rx="10"
        fill={PAPER} stroke={INK} strokeOpacity="0.18" strokeDasharray="3 4" />
      <text x="390" y="78" fontSize="10.5" fill={INK3} letterSpacing="0.12em" fontWeight="500">
        {L.hostMachine.toUpperCase()} · OS · HYPERVISOR · ADMIN
      </text>

      {/* danger zone band */}
      <rect x="386" y="96" width="668" height="58" rx="6"
        fill={DANGER_BG} stroke={DANGER} strokeOpacity="0.5" strokeDasharray="2 3" />
      <text x="406" y="120" fontSize="11.5" fill={DANGER2} letterSpacing="0.04em" fontWeight="600"
        fontFamily="ui-sans-serif, sans-serif">
        {L.operator}: {L.normallyPlain.toLowerCase()}
      </text>
      <text x="406" y="139" fontSize="10.5" fill={DANGER}
        fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
        {L.normallyDetail}
      </text>

      {/* CPU enclave */}
      <rect x="430" y="194" width="270" height="200" rx="8"
        fill={ENCL_BG} stroke={ENCL} strokeWidth="1.4"/>
      <text x="446" y="218" fontSize="11" fill={ENCL2} letterSpacing="0.08em" fontWeight="600">
        ◆ {L.cpu.toUpperCase()}
      </text>
      <text x="446" y="236" fontSize="10" fill={ENCL} letterSpacing="0.04em">
        Intel TDX · AMD SEV-SNP
      </text>
      <g transform="translate(565 305)">
        <rect x="-58" y="-26" width="116" height="56" rx="4" fill={PAPER} stroke={ENCL} />
        <text x="0" y="-6" textAnchor="middle" fontSize="11" fill={INK} fontWeight="600"
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          {L.tokenize}
        </text>
        <text x="0" y="11" textAnchor="middle" fontSize="11" fill={INK2}
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          {L.orchestrate}
        </text>
      </g>

      {/* GPU enclave */}
      <rect x="730" y="194" width="300" height="200" rx="8"
        fill={ENCL_BG} stroke={ENCL} strokeWidth="1.4"/>
      <text x="746" y="218" fontSize="11" fill={ENCL2} letterSpacing="0.08em" fontWeight="600">
        ◆ {L.gpu.toUpperCase()}
      </text>
      <text x="746" y="236" fontSize="10" fill={ENCL} letterSpacing="0.04em">
        NVIDIA B200 · H100 CC
      </text>
      <g transform="translate(880 305)">
        <rect x="-66" y="-32" width="132" height="68" rx="4" fill={PAPER} stroke={ENCL} />
        <text x="0" y="-13" textAnchor="middle" fontSize="11" fill={INK} fontWeight="600"
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          {L.modelWeights}
        </text>
        <text x="0" y="5" textAnchor="middle" fontSize="10.5" fill={INK2}
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          {L.inferenceKernel}
        </text>
        <text x="0" y="22" textAnchor="middle" fontSize="10.5" fill={INK2}
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          {L.kvCache}
        </text>
      </g>

      {/* trust label */}
      <text x="730" y="418" textAnchor="middle" fontSize="11" fill={ENCL2}
        letterSpacing="0.1em" fontWeight="600">
        {`◆ ${L.enclave.toUpperCase()} · ${L.hwEnforced} ◆`}
      </text>

      {/* client */}
      <rect x="40" y="194" width="220" height="140" rx="10"
        fill={PAPER} stroke={INK} strokeOpacity="0.22"/>
      <text x="60" y="218" fontSize="11" fill={INK} letterSpacing="0.08em" fontWeight="600">
        {L.client.toUpperCase()}
      </text>
      <text x="60" y="252" fontSize="14" fill={INK} fontWeight="500"
        fontFamily="ui-sans-serif, sans-serif" letterSpacing="-0.005em">
        {L.yourPrompt}
      </text>
      <text x="60" y="278" fontSize="12" fill={INK2}
        fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
        "summarise this contract"
      </text>

      {/* ingress: ciphertext particles */}
      <path d="M 260 232 L 426 232" stroke={CIPHER} strokeWidth="1.5"
        strokeDasharray="4 4" fill="none" />
      <text x="343" y="222" textAnchor="middle" fontSize="10.5" fill={CIPHER}
        letterSpacing="0.06em" fontWeight="600">
        {L.ciphertext.toUpperCase()}
      </text>
      {[0, 0.8, 1.6, 2.4].map((d, i) => (
        <circle key={`in${i}`} r="3.2" fill={CIPHER} opacity="0">
          <animateMotion dur="3.2s" repeatCount="indefinite" begin={`${d}s`}
            path="M 260 232 L 426 232" />
          <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.9;1"
            dur="3.2s" begin={`${d}s`} repeatCount="indefinite" />
        </circle>
      ))}

      {/* INSIDE: plaintext between enclaves (now bigger gap & label outside path) */}
      <path d="M 700 305 L 730 305" stroke={ENCL} strokeWidth="1.6" fill="none" />
      {[0, 1.4, 2.8].map((d, i) => (
        <circle key={`mid${i}`} r="3" fill={ENCL} opacity="0">
          <animateMotion dur="4.2s" repeatCount="indefinite" begin={`${d}s`}
            path="M 700 305 L 730 305" />
            <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.9;1" dur="4.2s" repeatCount="indefinite" begin={`${d}s`} />
        </circle>
      ))}

      {/* egress: ciphertext response — connects CPU enclave back to client box */}
      <path d="M 430 300 L 262 300" stroke={ACCENT} strokeWidth="1.5"
        strokeDasharray="4 4" fill="none" markerEnd="url(#arr-cipher-t)" />
      <text x="345" y="316" textAnchor="middle" fontSize="10.5" fill={ACCENT}
        letterSpacing="0.06em" fontWeight="600">
        {L.ciphertext.toUpperCase()} ({L.response})
      </text>
      {[0.4, 1.2, 2.0, 2.8].map((d, i) => (
        <circle key={`out${i}`} r="3.2" fill={ACCENT} opacity="0">
          <animateMotion dur="3.2s" repeatCount="indefinite" begin={`${d}s`}
            path="M 428 300 L 264 300" />
          <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.9;1"
            dur="3.2s" begin={`${d}s`} repeatCount="indefinite" />
        </circle>
      ))}

      {/* operator's crossed-out eyes peering down */}
      <g>
        {[470, 590, 730, 870, 990].map((x, i) => (
          <g key={i} transform={`translate(${x} 174)`}>
            <ellipse cx="0" cy="0" rx="9" ry="5" fill={PAPER} stroke={INK3} strokeWidth="1"/>
            <line x1="-9" y1="-5" x2="9" y2="5" stroke={INK3} strokeWidth="1.4" strokeLinecap="round"/>
          </g>
        ))}
      </g>
    </svg>
  );
}

window.HeroDiagram = HeroDiagram;
window.TEEDiagram = TEEDiagram;
