// 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 (
);
}
// ────────────────────────────────────────────────────────────────────────────
// 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 (
);
}
window.HeroDiagram = HeroDiagram;
window.TEEDiagram = TEEDiagram;