// diagrams-eli5.jsx
// Super-simple "ELI5" versions of the same diagrams. No vendor names, no
// register/quote vocabulary. Same VIEWBOX as the technical diagrams so the
// LvlStack swap leaves page heights stable.

// ────────────────────────────────────────────────────────────────────────────
// HeroDiagramELI5
// A safe at the centre of a network. Envelopes fly in, the safe opens
// briefly, envelopes fly out. Same canvas/colors as the technical hero.
// ────────────────────────────────────────────────────────────────────────────
function HeroDiagramELI5({ L }) {
  const N = 10;
  const tracks = [];
  for (let i = 0; i < N; i++) {
    const angle = (i / N) * Math.PI * 2 + 0.3;
    const r1 = 220, r2 = 92;
    tracks.push({
      x1: 250 + Math.cos(angle) * r1,
      y1: 250 + Math.sin(angle) * r1,
      x2: 250 + Math.cos(angle) * r2,
      y2: 250 + Math.sin(angle) * r2,
      delay: (i / N) * 3.4,
      key: i,
    });
  }

  const CIPHER = "#7da3d6";
  const ACCENT = "#e87e3c";
  const ENCL = "#5fb37a";
  const ENCL_GLOW = "rgba(95,179,122,0.32)";
  const LABEL = "#aeb6c6";

  return (
    <svg viewBox="0 0 500 500" className="diagram on-dark" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <radialGradient id="encGlowE" 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="hostFadeE" 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 layers */}
      {[210, 170].map((r, i) => (
        <circle key={r} cx="250" cy="250" r={r}
          fill="none" stroke="#ffffff" strokeOpacity={0.08 - i * 0.02}
          strokeDasharray={i === 0 ? "2 5" : "1 4"} />
      ))}

      <circle cx="250" cy="250" r="140" fill="url(#encGlowE)" />

      {/* envelope-style particles in */}
      {tracks.map(t => (
        <g key={`in${t.key}`}>
          <rect x={-5} y={-3} width="10" height="6" rx="0.5" fill={CIPHER} opacity="0">
            <animateMotion dur="3.4s" repeatCount="indefinite" begin={`${t.delay}s`}
              path={`M ${t.x1} ${t.y1} L ${t.x2} ${t.y2}`} />
            <animate attributeName="opacity"
              values="0;1;1;0.1" keyTimes="0;0.15;0.8;1"
              dur="3.4s" begin={`${t.delay}s`} repeatCount="indefinite" />
          </rect>
        </g>
      ))}

      {/* envelopes out (orange) */}
      {tracks.slice(0, 6).map((t, i) => (
        <rect key={`out${i}`} x={-5} y={-3} width="10" height="6" rx="0.5" fill={ACCENT} opacity="0">
          <animateMotion dur="3.4s" repeatCount="indefinite" begin={`${t.delay + 1.7}s`}
            path={`M ${t.x2} ${t.y2} L ${t.x1} ${t.y1}`} />
          <animate attributeName="opacity"
            values="0;1;1;0" keyTimes="0;0.1;0.85;1"
            dur="3.4s" begin={`${t.delay + 1.7}s`} repeatCount="indefinite" />
        </rect>
      ))}

      {/* the safe */}
      <circle cx="250" cy="250" r="92" fill="#131b2c" stroke={ENCL} strokeWidth="1.6" />
      <circle cx="250" cy="250" r="92" fill="none" stroke={ENCL} strokeOpacity="0.18" strokeWidth="8" />

      {/* gentle pulse */}
      <circle cx="250" cy="250" r="60" fill={ENCL} opacity="0.16">
        <animate attributeName="r" values="55;65;55" dur="4s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.12;0.24;0.12" dur="4s" repeatCount="indefinite" />
      </circle>

      {/* a shield + padlock combined */}
      <g transform="translate(250 246)">
        <path d="M 0 -30 L 22 -22 L 22 6 Q 22 26 0 36 Q -22 26 -22 6 L -22 -22 Z"
          fill={ENCL} opacity="0.95"/>
        <rect x="-10" y="-6" width="20" height="16" rx="2" fill="#0d1421"/>
        <path d="M -6 -6 L -6 -12 a 6 6 0 0 1 12 0 L 6 -6"
          fill="none" stroke="#0d1421" strokeWidth="2" strokeLinecap="round"/>
      </g>

      <rect x="0" y="0" width="500" height="500" fill="url(#hostFadeE)" />

      {/* labels */}
      <text x="250" y="370" textAnchor="middle"
        fill={ENCL} fontWeight="600" letterSpacing="0.1em" fontSize="11">
        THE SEALED SAFE
      </text>
      <text x="22" y="28" fontSize="9.5" fill={LABEL} letterSpacing="0.12em" fontWeight="500">
        SOMEONE ELSE'S COMPUTER
      </text>
      <text x="478" y="484" textAnchor="end" fontSize="9.5" fill={LABEL} letterSpacing="0.12em">
        <tspan fill={CIPHER}>■ </tspan>YOUR MESSAGE
        <tspan dx="10" fill={ACCENT}>■ </tspan>THE ANSWER
      </text>
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// TEEDiagramELI5 — postal metaphor. Client (house) sends a sealed envelope
// to a safe inside a building, the safe opens privately, sends a sealed
// reply back. No vendor names. Same viewBox as TEEDiagram.
// ────────────────────────────────────────────────────────────────────────────
function TEEDiagramELI5({ L }) {
  return (
    <svg viewBox="0 0 1100 480" className="diagram" preserveAspectRatio="xMidYMid meet">
      <defs>
        <marker id="arr-c-e5" 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="#2f4a6b" />
        </marker>
      </defs>

      {/* host building */}
      <rect x="370" y="50" width="700" height="380" rx="10"
        fill="#ffffff" stroke="#131a26" strokeOpacity="0.18" strokeDasharray="3 4" />
      <text x="390" y="80" fontSize="11" fill="#6c7585" letterSpacing="0.12em" fontWeight="500">
        SOMEONE ELSE'S COMPUTER
      </text>

      {/* "operator can normally peek" band — shown as eyes that get crossed out */}
      <rect x="386" y="98" width="668" height="60" rx="6"
        fill="#fbe5d3" stroke="#cf6624" strokeOpacity="0.5" strokeDasharray="2 3" />
      <text x="406" y="122" fontSize="11" fill="#a23829" letterSpacing="0.04em" fontWeight="600"
        fontFamily="ui-sans-serif, sans-serif">
        Normally, the people who run this computer can look inside.
      </text>
      <text x="406" y="142" fontSize="10.5" fill="#cf6624" letterSpacing="0.02em"
        fontFamily="ui-sans-serif, sans-serif">
        With a TEE, even they only see scrambled junk.
      </text>

      {/* the SAFE inside, big and friendly */}
      <rect x="450" y="200" width="560" height="210" rx="14"
        fill="#d6ecdf" stroke="#2d7a4d" strokeWidth="1.6"/>
      <text x="470" y="228" fontSize="11" fill="#1f5a37" letterSpacing="0.1em" fontWeight="600">
        ◆ THE SEALED SAFE
      </text>
      <text x="470" y="248" fontSize="11" fill="#2d7a4d" letterSpacing="0.04em"
        fontFamily="ui-sans-serif, sans-serif">
        Built into the chip. Locked from outside.
      </text>

      {/* what happens inside: opens letter, thinks, seals reply */}
      <g transform="translate(550 330)">
        <rect x="-46" y="-30" width="92" height="60" rx="6" fill="#ffffff" stroke="#2d7a4d"/>
        <text x="0" y="-8" textAnchor="middle" fontSize="11" fill="#131a26" fontWeight="600"
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          open
        </text>
        <text x="0" y="10" textAnchor="middle" fontSize="11" fill="#131a26"
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          letter
        </text>
      </g>

      <g transform="translate(730 330)">
        <rect x="-46" y="-30" width="92" height="60" rx="6" fill="#ffffff" stroke="#2d7a4d"/>
        <text x="0" y="-8" textAnchor="middle" fontSize="11" fill="#131a26" fontWeight="600"
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          think
        </text>
        <text x="0" y="10" textAnchor="middle" fontSize="11" fill="#131a26"
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          with AI
        </text>
      </g>

      <g transform="translate(910 330)">
        <rect x="-46" y="-30" width="92" height="60" rx="6" fill="#ffffff" stroke="#2d7a4d"/>
        <text x="0" y="-8" textAnchor="middle" fontSize="11" fill="#131a26" fontWeight="600"
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          seal
        </text>
        <text x="0" y="10" textAnchor="middle" fontSize="11" fill="#131a26"
          fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
          reply
        </text>
      </g>

      {/* tiny arrows inside the safe */}
      <path d="M 600 330 L 680 330" stroke="#2d7a4d" strokeWidth="1.5" fill="none"/>
      <path d="M 780 330 L 860 330" stroke="#2d7a4d" strokeWidth="1.5" fill="none"/>

      {/* client house */}
      <rect x="40" y="190" width="220" height="160" rx="10"
        fill="#ffffff" stroke="#131a26" strokeOpacity="0.22"/>
      <text x="60" y="218" fontSize="11" fill="#131a26" letterSpacing="0.08em" fontWeight="600">
        YOU
      </text>
      {/* tiny house icon */}
      <g transform="translate(180 215)">
        <path d="M -14 6 L 0 -8 L 14 6 L 14 16 L -14 16 Z"
          fill="none" stroke="#131a26" strokeWidth="1.5" strokeLinejoin="round"/>
        <rect x="-4" y="6" width="8" height="10" fill="none" stroke="#131a26" strokeWidth="1.2"/>
      </g>
      <text x="60" y="270" fontSize="15" fill="#131a26" fontWeight="500"
        fontFamily="ui-sans-serif, sans-serif" letterSpacing="-0.005em">
        your question
      </text>
      <text x="60" y="295" fontSize="13" fill="#3b4555"
        fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
        "summarise my contract"
      </text>

      {/* ingress: sealed envelope flying right — connects YOU box to safe */}
      <path d="M 260 250 L 450 250" stroke="#2f4a6b" strokeWidth="1.4"
        strokeDasharray="4 5" fill="none" />
      <text x="355" y="238" textAnchor="middle" fontSize="11" fill="#2f4a6b" letterSpacing="0.04em"
        fontWeight="600" fontFamily="ui-sans-serif, sans-serif">
        sealed envelope
      </text>
      {[0, 1, 2].map(i => (
        <g key={`in${i}`}>
          <rect x="-7" y="-4" width="14" height="9" rx="1" fill="#2f4a6b" opacity="0">
            <animateMotion dur="3.2s" repeatCount="indefinite" begin={`${i * 1.05}s`}
              path="M 262 250 L 448 250"/>
            <animate attributeName="opacity"
              values="0;1;1;0" keyTimes="0;0.08;0.9;1"
              dur="3.2s" begin={`${i * 1.05}s`} repeatCount="indefinite" />
          </rect>
        </g>
      ))}

      {/* egress: sealed reply flying left — connects safe back to YOU box */}
      <path d="M 450 320 L 262 320" stroke="#cf6624" strokeWidth="1.4"
        strokeDasharray="4 5" fill="none" markerEnd="url(#arr-c-e5)"/>
      <text x="355" y="308" textAnchor="middle" fontSize="11" fill="#cf6624" letterSpacing="0.04em"
        fontWeight="600" fontFamily="ui-sans-serif, sans-serif">
        sealed reply
      </text>
      {[0.4, 1.4, 2.4].map((d, i) => (
        <rect key={`o${i}`} x="-7" y="-4" width="14" height="9" rx="1" fill="#e87e3c" opacity="0">
          <animateMotion dur="3.2s" repeatCount="indefinite" begin={`${d}s`}
            path="M 448 320 L 264 320"/>
          <animate attributeName="opacity"
            values="0;1;1;0" keyTimes="0;0.08;0.9;1"
            dur="3.2s" begin={`${d}s`} repeatCount="indefinite" />
        </rect>
      ))}

      {/* the band of crossed-out eyes */}
      <g>
        {[470, 590, 730, 870, 990].map((x, i) => (
          <g key={i} transform={`translate(${x} 175)`}>
            <ellipse cx="0" cy="0" rx="11" ry="6" fill="#ffffff" stroke="#a23829" strokeWidth="1.2"/>
            <line x1="-10" y1="-5" x2="10" y2="5" stroke="#a23829" strokeWidth="1.6" strokeLinecap="round"/>
          </g>
        ))}
      </g>
    </svg>
  );
}

window.HeroDiagramELI5 = HeroDiagramELI5;
window.TEEDiagramELI5 = TEEDiagramELI5;
