// diagrams2.jsx, comparison animation + remote attestation handshake

const { useEffect: useEffect2, useState: useState2, useRef: useRef2 } = React;

// ────────────────────────────────────────────────────────────────────────────
// ComparisonAnimated, three panels side-by-side showing the same prompt flow
// through 3 deployment modes. Trust boundary differs in each.
// ────────────────────────────────────────────────────────────────────────────
function ComparisonPanel({ L, mode, modeLabel }) {
  const isOnPrem = mode === "onprem";
  const isCloud  = mode === "cloud";
  const isTEE    = mode === "tee";

  // outer trust boundary
  // on-prem: surrounds the whole flow (client + processing both yours)
  // cloud:   surrounds only the cloud zone (operator-owned)
  // tee:     cloud zone is operator-owned, but enclave inside is yours
  return (
    <svg viewBox="0 0 600 320" className="diagram" preserveAspectRatio="xMidYMid meet">
      <defs>
        <pattern id={`hatch-${mode}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="#cf4b3a" strokeOpacity="0.18" strokeWidth="2"/>
        </pattern>
      </defs>

      {/* Title strip */}
      <text x="20" y="22" fontSize="10" fill="#6c7585" letterSpacing="0.12em">
        {(L.dataFlow || "DATA FLOW")} · {modeLabel || (mode === "onprem" ? "ON‑PREMISES" : mode === "cloud" ? "STANDARD CLOUD" : "TEE IN CLOUD")}
      </text>

      {/* CLIENT box (left) */}
      <rect x="24" y="116" width="120" height="120" rx="4"
        fill="#ffffff" stroke="#131a26" strokeOpacity="0.22"/>
      <text x="84" y="146" textAnchor="middle" fontSize="10.5" fill="#131a26"
        fontWeight="600" letterSpacing="0.06em">
        {L.client.toUpperCase()}
      </text>
      <text x="84" y="180" textAnchor="middle" fontSize="13"
        fontFamily="ui-sans-serif, sans-serif" fontWeight="500" fill="#131a26">
        {L.yourPrompt}
      </text>

      {/* Cloud zone box, for cloud and tee modes */}
      {!isOnPrem && (
        <g>
          <rect x="246" y="62" width="330" height="208" rx="4"
            fill={`url(#hatch-${mode})`}
            stroke="#cf4b3a" strokeOpacity="0.5" strokeDasharray="4 4"/>
          <text x="262" y="84" fontSize="10" fill="#a23829" letterSpacing="0.1em" fontWeight="600">
            {L.cloudZoneSees}, {isCloud ? L.seesPlain : L.seesCipherOnly}
          </text>
        </g>
      )}

      {/* On-prem trust band, wraps everything */}
      {isOnPrem && (
        <g>
          <rect x="20" y="62" width="556" height="208" rx="4"
            fill="#d6ecdf" fillOpacity="0.55"
            stroke="#2d7a4d" strokeOpacity="0.5" strokeDasharray="4 4"/>
          <text x="36" y="84" fontSize="10" fill="#1f5a37" letterSpacing="0.1em" fontWeight="600">
            {L.trustDomain}
          </text>
        </g>
      )}

      {/* GPU/processing box */}
      {isOnPrem ? (
        <g>
          <rect x="300" y="130" width="220" height="120" rx="4"
            fill="#ffffff" stroke="#2d7a4d" strokeOpacity="0.6"/>
          <text x="410" y="158" textAnchor="middle" fontSize="10.5" fill="#1f5a37"
            fontWeight="600" letterSpacing="0.06em">
            {L.yourGpu}
          </text>
          <text x="410" y="190" textAnchor="middle" fontSize="13"
            fontFamily="ui-sans-serif, sans-serif" fontWeight="500" fill="#131a26">
            {L.enclaveInf}
          </text>
          <text x="410" y="216" textAnchor="middle" fontSize="10" fill="#3b4555"
            letterSpacing="0.04em">
            {L.yourGpuFoot}
          </text>
        </g>
      ) : isCloud ? (
        <g>
          <rect x="300" y="130" width="220" height="120" rx="4"
            fill="#f7d8d2" stroke="#cf4b3a" strokeOpacity="0.7"/>
          <text x="410" y="158" textAnchor="middle" fontSize="10.5" fill="#a23829"
            fontWeight="600" letterSpacing="0.06em">
            {L.hostGpu}
          </text>
          <text x="410" y="190" textAnchor="middle" fontSize="13"
            fontFamily="ui-sans-serif, sans-serif" fontWeight="500" fill="#a23829">
            {L.hostGpuPlain}
          </text>
          <text x="410" y="216" textAnchor="middle" fontSize="10" fill="#cf4b3a"
            letterSpacing="0.04em">
            {L.hostGpuFoot}
          </text>
        </g>
      ) : (
        <g>
          {/* TEE: enclave inside cloud zone */}
          <rect x="300" y="130" width="220" height="120" rx="4"
            fill="#d6ecdf" stroke="#2d7a4d" strokeWidth="1.4"/>
          <text x="312" y="150" fontSize="9.5" fill="#1f5a37" letterSpacing="0.08em" fontWeight="600">
            {L.hwEnclave}
          </text>
          <text x="410" y="186" textAnchor="middle" fontSize="13"
            fontFamily="ui-sans-serif, sans-serif" fontWeight="500" fill="#131a26">
            {L.enclaveInf}
          </text>
          <text x="410" y="208" textAnchor="middle" fontSize="10" fill="#1f5a37"
            letterSpacing="0.04em">
            {L.enclaveFoot}
          </text>
          <text x="410" y="226" textAnchor="middle" fontSize="9" fill="#1f5a37"
            letterSpacing="0.04em">
            B200 / TDX / SEV‑SNP
          </text>
        </g>
      )}

      {/* Ingress arrow */}
      <path d="M 144 150 L 300 150" stroke={isOnPrem ? "#1f5a37" : "#2f4a6b"} strokeWidth="1.4"
        strokeDasharray={isCloud ? "0" : "3 4"} fill="none" />
      <text x="222" y="140" textAnchor="middle" fontSize="9.5"
        fill={isOnPrem ? "#1f5a37" : isCloud ? "#a23829" : "#2f4a6b"}
        letterSpacing="0.08em">
        {isCloud ? L.plaintextLine : isOnPrem ? L.localWire : L.ciphertext.toUpperCase()}
      </text>
      {/* particles */}
      {[0, 1, 2].map(i => (
        <circle key={i} r="3" fill={isOnPrem ? "#2d7a4d" : isCloud ? "#cf4b3a" : "#2f4a6b"} opacity="0">
          <animateMotion dur="2.6s" repeatCount="indefinite" begin={`${i * 0.85}s`}
            path="M 146 150 L 298 150"/>
            <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.9;1" dur="2.6s" repeatCount="indefinite" begin={`${i * 0.85}s`} />
        </circle>
      ))}

      {/* Egress arrow */}
      <path d="M 300 205 L 144 205" stroke={isOnPrem ? "#1f5a37" : "#2f4a6b"} strokeWidth="1.4"
        strokeDasharray={isCloud ? "0" : "3 4"} fill="none" />
      <text x="222" y="222" textAnchor="middle" fontSize="9.5"
        fill={isOnPrem ? "#1f5a37" : isCloud ? "#a23829" : "#2f4a6b"}
        letterSpacing="0.08em">
        {isCloud ? L.plaintextLine : L.response.toUpperCase()}
      </text>
      {[0.4, 1.3, 2.2].map((d, i) => (
        <circle key={`o${i}`} r="3" fill={isOnPrem ? "#2d7a4d" : isCloud ? "#cf4b3a" : "#2f4a6b"} opacity="0">
          <animateMotion dur="2.6s" repeatCount="indefinite" begin={`${d}s`}
            path="M 298 205 L 148 205"/>
            <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.9;1" dur="2.6s" repeatCount="indefinite" begin={`${d}s`} />
        </circle>
      ))}

      {/* Eyes (operator can see), only on cloud */}
      {isCloud && (
        <g transform="translate(410 100)">
          {[-40, 0, 40].map((dx, i) => (
            <g key={i} transform={`translate(${dx} 0)`}>
              <ellipse cx="0" cy="0" rx="11" ry="6" fill="#ffffff" stroke="#a23829" strokeWidth="1.2"/>
              <circle cx="0" cy="0" r="3" fill="#a23829"/>
            </g>
          ))}
          <text x="0" y="20" textAnchor="middle" fontSize="9" fill="#a23829" letterSpacing="0.08em" fontWeight="600">
            {L.opTrio}
          </text>
        </g>
      )}
      {isTEE && (
        <g transform="translate(410 100)">
          {[-40, 0, 40].map((dx, i) => (
            <g key={i} transform={`translate(${dx} 0)`}>
              <ellipse cx="0" cy="0" rx="11" ry="6" fill="#ffffff" stroke="#6c7585" strokeWidth="1"/>
              <line x1="-9" y1="-5" x2="9" y2="5" stroke="#6c7585" strokeWidth="1.3"/>
            </g>
          ))}
          <text x="0" y="20" textAnchor="middle" fontSize="9" fill="#1f5a37" letterSpacing="0.08em" fontWeight="600">
            {L.opTrioBlind}
          </text>
        </g>
      )}
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// AttestationFlow, 4-step animated handshake. Step auto-advances; can also
// be controlled by the user via a stepper at the bottom.
// ────────────────────────────────────────────────────────────────────────────
function AttestationFlow({ L }) {
  const [step, setStep] = useState2(0);
  const [auto, setAuto] = useState2(true);

  useEffect2(() => {
    if (!auto) return;
    const t = setInterval(() => setStep(s => (s + 1) % 5), 2400);
    return () => clearInterval(t);
  }, [auto]);

  const onPick = (i) => { setAuto(false); setStep(i); };

  // step 0 = idle, 1..4 = active
  const isActive = (i) => step === i;
  const isPast = (i) => step >= i;

  return (
    <div className="card" style={{ padding: 0 }}>
      <svg viewBox="0 0 1100 420" className="diagram" preserveAspectRatio="xMidYMid meet">
        <defs>
          <marker id="arr-a" 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="#131a26" />
          </marker>
          <marker id="arr-r" 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="#2d7a4d" />
          </marker>
        </defs>

        <text x="20" y="28" fontSize="10" fill="#6c7585" letterSpacing="0.12em">
          {L.stepsBadge}
        </text>

        {/* THREE ACTORS */}
        {/* client */}
        <g>
          <rect x="40" y="100" width="200" height="200" rx="6"
            fill="#ffffff" stroke="#131a26" strokeOpacity="0.22"/>
          <text x="56" y="124" fontSize="10.5" fill="#131a26" letterSpacing="0.08em" fontWeight="600">
            {L.client.toUpperCase()}
          </text>
          <text x="56" y="146" fontSize="11" fill="#3b4555">verifier</text>
          {/* checkmark when verified */}
          {step >= 4 && (
            <g transform="translate(140 220)">
              <circle r="22" fill="#d6ecdf" stroke="#2d7a4d" strokeWidth="1.5"/>
              <path d="M -8 0 L -2 6 L 9 -6" fill="none"
                stroke="#1f5a37" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
            </g>
          )}
        </g>

        {/* remote enclave */}
        <g>
          <rect x="430" y="60" width="260" height="280" rx="6"
            fill="#ffffff" stroke="#131a26" strokeOpacity="0.18" strokeDasharray="3 4"/>
          <text x="446" y="84" fontSize="10" fill="#6c7585" letterSpacing="0.12em">
            {L.remote.toUpperCase()}
          </text>
          <rect x="450" y="100" width="220" height="200" rx="4"
            className="enclave-fill"/>
          <text x="466" y="124" fontSize="10.5" fill="#1f5a37" letterSpacing="0.08em" fontWeight="600">
            ◆ {L.enclave.toUpperCase()}
          </text>
          <text x="466" y="142" fontSize="9.5" fill="#2d7a4d">B200 + TDX</text>

          {/* self-measure visual, active on step 2 */}
          <g transform="translate(560 220)" opacity={isActive(2) ? 1 : 0.25}>
            <rect x="-58" y="-44" width="116" height="88" rx="3" fill="#ffffff" stroke="#2d7a4d"/>
            <text x="0" y="-26" textAnchor="middle" fontSize="9" fill="#1f5a37" letterSpacing="0.06em" fontWeight="600">
              MEASURE
            </text>
            <text x="0" y="-10" textAnchor="middle" fontSize="9" fill="#3b4555"
              fontFamily="JetBrains Mono, monospace" letterSpacing="0">
              hash(code)
            </text>
            <text x="0" y="4" textAnchor="middle" fontSize="9" fill="#3b4555"
              fontFamily="JetBrains Mono, monospace" letterSpacing="0">
              + hash(weights)
            </text>
            <text x="0" y="18" textAnchor="middle" fontSize="9" fill="#3b4555"
              fontFamily="JetBrains Mono, monospace" letterSpacing="0">
              + nonce
            </text>
            <text x="0" y="36" textAnchor="middle" fontSize="9" fill="#1f5a37" letterSpacing="0.04em">
              → sign w/ chip key
            </text>
          </g>
        </g>

        {/* vendor */}
        <g>
          <rect x="860" y="100" width="200" height="200" rx="6"
            fill="#ffffff" stroke="#131a26" strokeOpacity="0.22"/>
          <text x="876" y="124" fontSize="10.5" fill="#131a26" letterSpacing="0.08em" fontWeight="600">
            {L.vendor.toUpperCase()}
          </text>
          <text x="876" y="146" fontSize="11" fill="#3b4555">Intel · NVIDIA · AMD</text>
          <g transform="translate(960 220)" opacity={isActive(3) ? 1 : 0.25}>
            <rect x="-44" y="-18" width="88" height="36" rx="3" fill="#ffffff" stroke="#131a26" strokeOpacity="0.5"/>
            <text x="0" y="-2" textAnchor="middle" fontSize="9" fill="#131a26" letterSpacing="0.04em" fontWeight="600">
              verify chip
            </text>
            <text x="0" y="12" textAnchor="middle" fontSize="9" fill="#3b4555" letterSpacing="0.04em">
              not revoked?
            </text>
          </g>
        </g>

        {/* ── ARROWS ── */}

        {/* 1) client → enclave: nonce */}
        <g opacity={isActive(1) ? 1 : 0}>
          <path d="M 240 170 L 430 170" stroke="#131a26" strokeWidth="1.4"
            fill="none" markerEnd="url(#arr-a)"/>
          <text x="335" y="160" textAnchor="middle" fontSize="10" fill="#131a26" letterSpacing="0.08em" fontWeight="500">
            {L.nonce}
          </text>
          {isActive(1) && [0, 0.6, 1.2].map((d, i) => (
            <circle key={i} r="3" fill="#131a26" opacity="0">
              <animateMotion dur="1.5s" repeatCount="indefinite" begin={`${d}s`}
                path="M 240 170 L 425 170"/>
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="1.5s" repeatCount="indefinite" begin={`${d}s`} />
            </circle>
          ))}
        </g>

        {/* 2) enclave self-loop measure (shown via the box highlight) */}
        <g opacity={isActive(2) ? 1 : 0}>
          <text x="620" y="80" textAnchor="middle" fontSize="10" fill="#1f5a37" letterSpacing="0.08em" fontWeight="500">
            SELF‑MEASURE + SIGN
          </text>
          {isActive(2) && (
            <path d="M 470 320 a 90 30 0 1 0 180 0" fill="none"
              stroke="#2d7a4d" strokeWidth="1.4" strokeDasharray="3 3">
              <animate attributeName="stroke-dashoffset" from="60" to="0"
                dur="1.2s" repeatCount="indefinite"/>
            </path>
          )}
        </g>

        {/* 3) enclave → vendor: quote */}
        <g opacity={isActive(3) ? 1 : 0}>
          <path d="M 690 200 L 860 200" stroke="#131a26" strokeWidth="1.4"
            fill="none" markerEnd="url(#arr-a)"/>
          <text x="775" y="190" textAnchor="middle" fontSize="10" fill="#131a26" letterSpacing="0.08em" fontWeight="500">
            QUOTE →
          </text>
          {isActive(3) && [0, 0.6, 1.2].map((d, i) => (
            <circle key={i} r="3" fill="#131a26" opacity="0">
              <animateMotion dur="1.5s" repeatCount="indefinite" begin={`${d}s`}
                path="M 690 200 L 855 200"/>
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="1.5s" repeatCount="indefinite" begin={`${d}s`} />
            </circle>
          ))}
        </g>

        {/* 4) vendor → client: verdict + then encrypted data starts */}
        <g opacity={isActive(4) ? 1 : 0}>
          <path d="M 860 240 C 600 380, 400 380, 240 240" stroke="#2d7a4d" strokeWidth="1.4"
            fill="none" markerEnd="url(#arr-r)"/>
          <text x="550" y="385" textAnchor="middle" fontSize="10" fill="#1f5a37" letterSpacing="0.08em" fontWeight="500">
            ✓ ATTESTATION VERIFIED · {L.keyRelease.toUpperCase()}
          </text>
          {isActive(4) && [0, 0.4, 0.8].map((d, i) => (
            <circle key={i} r="3" fill="#2d7a4d" opacity="0">
              <animateMotion dur="1.6s" repeatCount="indefinite" begin={`${d}s`}
                path="M 860 240 C 600 380, 400 380, 245 240"/>
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="1.6s" repeatCount="indefinite" begin={`${d}s`} />
            </circle>
          ))}
        </g>
      </svg>

      {/* stepper */}
      <div style={{
        borderTop: "1px solid var(--line)", padding: "16px 24px",
        display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center",
      }}>
        <span className="mono" style={{ color: "var(--ink-3)", marginRight: 8 }}>
          {L.stepsBadge}
        </span>
        {[1, 2, 3, 4].map(i => (
          <button key={i} onClick={() => onPick(i)}
            style={{
              padding: "5px 12px",
              border: `1px solid ${step === i ? "var(--ink)" : "var(--line-2)"}`,
              borderRadius: 999,
              background: step === i ? "var(--ink)" : "transparent",
              color: step === i ? "var(--paper)" : "var(--ink-2)",
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.06em",
            }}>
            0{i}
          </button>
        ))}
        <button onClick={() => { setAuto(true); setStep(0); }}
          style={{
            marginLeft: "auto", padding: "5px 12px",
            border: "1px solid var(--line-2)", borderRadius: 999,
            color: "var(--ink-3)", fontFamily: "var(--font-mono)",
            fontSize: 11, letterSpacing: "0.06em",
          }}>
          {auto ? "AUTO ▸" : "REPLAY ↻"}
        </button>
      </div>
    </div>
  );
}

window.ComparisonPanel = ComparisonPanel;
window.AttestationFlow = AttestationFlow;