// diagrams2-eli5.jsx — ELI5 comparison panel + ELI5 attestation flow

// ────────────────────────────────────────────────────────────────────────────
// ComparisonPanelELI5 — same viewBox (600x320). Picture-book metaphors:
//   onprem  → your house, your computer
//   cloud   → cloud (rented), full of peeking eyes
//   tee     → cloud (rented), with a sealed safe inside; eyes crossed out
// ────────────────────────────────────────────────────────────────────────────
function ComparisonPanelELI5({ L, mode, modeLabel }) {
  const isOnPrem = mode === "onprem";
  const isCloud  = mode === "cloud";
  const isTEE    = mode === "tee";

  return (
    <svg viewBox="0 0 600 320" className="diagram" preserveAspectRatio="xMidYMid meet">
      <text x="20" y="22" fontSize="10" fill="#6c7585" letterSpacing="0.12em" fontWeight="500">
        {modeLabel || (isOnPrem ? "YOUR OWN COMPUTERS" : isCloud ? "REGULAR CLOUD" : "CLOUD WITH A TEE")}
      </text>

      {/* CLIENT (left) — person icon */}
      <g transform="translate(80 165)">
        <circle r="36" fill="#ffffff" stroke="#131a26" strokeOpacity="0.22" strokeWidth="1.4"/>
        {/* head + shoulders */}
        <circle cx="0" cy="-8" r="9" fill="none" stroke="#131a26" strokeWidth="1.5"/>
        <path d="M -16 14 Q 0 -2 16 14" fill="none" stroke="#131a26" strokeWidth="1.5"/>
        <text x="0" y="60" textAnchor="middle" fontSize="11" fill="#131a26" fontWeight="600" letterSpacing="0.04em"
          fontFamily="ui-sans-serif, sans-serif">
          you
        </text>
      </g>

      {/* PROCESSING (right) */}
      {isOnPrem && (
        <g transform="translate(420 165)">
          {/* big "your house" wrapping the computer */}
          <rect x="-130" y="-95" width="260" height="195" rx="14"
            fill="#d6ecdf" fillOpacity="0.6"
            stroke="#2d7a4d" strokeOpacity="0.55" strokeDasharray="5 5"/>
          <text x="-114" y="-72" fontSize="10" fill="#1f5a37" letterSpacing="0.1em" fontWeight="600">
            YOUR HOUSE
          </text>

          {/* house */}
          <path d="M -60 -30 L 0 -75 L 60 -30 L 60 60 L -60 60 Z"
            fill="#ffffff" stroke="#2d7a4d" strokeWidth="1.6" strokeLinejoin="round"/>
          {/* computer inside */}
          <rect x="-32" y="-12" width="64" height="42" rx="3"
            fill="#0d1421"/>
          <rect x="-26" y="-6" width="52" height="30" fill="none" stroke="#5fb37a" strokeWidth="0.8"/>
          {/* tiny "AI" inside screen */}
          <text x="0" y="14" textAnchor="middle" fontSize="11" fill="#5fb37a" fontWeight="700">
            AI
          </text>
          <rect x="-12" y="30" width="24" height="6" fill="#0d1421"/>

          <text x="0" y="90" textAnchor="middle" fontSize="12" fill="#1f5a37" fontWeight="600"
            fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
            your computer
          </text>
        </g>
      )}

      {isCloud && (
        <g transform="translate(420 165)">
          {/* a cloud */}
          <path d="M -100 20 Q -120 20 -120 0 Q -120 -22 -98 -22 Q -90 -42 -60 -42 Q -38 -62 -10 -56 Q 18 -78 50 -60 Q 80 -68 90 -42 Q 118 -38 118 -10 Q 118 20 90 20 Z"
            fill="#f7d8d2" stroke="#cf4b3a" strokeWidth="1.6"/>

          {/* peeping eyes scattered */}
          {[[-60, -22], [0, -42], [50, -28], [-30, -2], [40, -2], [80, -16]].map(([x, y], i) => (
            <g key={i} transform={`translate(${x} ${y})`}>
              <ellipse cx="0" cy="0" rx="9" ry="5" fill="#ffffff" stroke="#a23829" strokeWidth="1.1"/>
              <circle cx="0" cy="0" r="2.4" fill="#a23829"/>
            </g>
          ))}

          {/* AI text */}
          <text x="0" y="48" textAnchor="middle" fontSize="14" fill="#a23829" fontWeight="700"
            fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
            AI runs here
          </text>
          <text x="0" y="68" textAnchor="middle" fontSize="11" fill="#cf4b3a"
            fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
            they can peek at anything
          </text>

          <text x="0" y="100" textAnchor="middle" fontSize="11" fill="#cf4b3a" fontWeight="500"
            fontFamily="ui-sans-serif, sans-serif">
            someone else's cloud
          </text>
        </g>
      )}

      {isTEE && (
        <g transform="translate(420 165)">
          {/* a cloud */}
          <path d="M -100 20 Q -120 20 -120 0 Q -120 -22 -98 -22 Q -90 -42 -60 -42 Q -38 -62 -10 -56 Q 18 -78 50 -60 Q 80 -68 90 -42 Q 118 -38 118 -10 Q 118 20 90 20 Z"
            fill="#f0f2f6" stroke="#6c7585" strokeWidth="1.4"/>

          {/* the safe in the middle of the cloud */}
          <rect x="-38" y="-38" width="76" height="60" rx="6"
            fill="#d6ecdf" stroke="#2d7a4d" strokeWidth="1.6"/>
          <rect x="-30" y="-30" width="60" height="44" rx="3"
            fill="#ffffff" stroke="#2d7a4d" strokeWidth="0.8"/>
          {/* lock dial */}
          <circle cx="0" cy="-8" r="8" fill="none" stroke="#2d7a4d" strokeWidth="1.4"/>
          <line x1="0" y1="-8" x2="5" y2="-3" stroke="#2d7a4d" strokeWidth="1.4" strokeLinecap="round"/>
          <text x="0" y="11" textAnchor="middle" fontSize="9" fill="#1f5a37" fontWeight="700"
            fontFamily="ui-sans-serif, sans-serif" letterSpacing="0.04em">
            AI
          </text>

          {/* crossed out eyes around the safe */}
          {[[-70, -28], [-58, -10], [55, -28], [60, -8], [10, -56], [-15, -56]].map(([x, y], i) => (
            <g key={i} transform={`translate(${x} ${y})`}>
              <ellipse cx="0" cy="0" rx="8" ry="4.5" fill="#ffffff" stroke="#6c7585" strokeWidth="1"/>
              <line x1="-9" y1="-5" x2="9" y2="5" stroke="#6c7585" strokeWidth="1.4" strokeLinecap="round"/>
            </g>
          ))}

          <text x="0" y="48" textAnchor="middle" fontSize="13" fill="#1f5a37" fontWeight="700"
            fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
            sealed safe
          </text>
          <text x="0" y="66" textAnchor="middle" fontSize="11" fill="#2d7a4d"
            fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
            nobody peeks. not even them.
          </text>
          <text x="0" y="100" textAnchor="middle" fontSize="11" fill="#6c7585" fontWeight="500"
            fontFamily="ui-sans-serif, sans-serif">
            someone else's cloud, locked
          </text>
        </g>
      )}

      {/* Arrows: ingress (top) + egress (bottom) */}
      {(() => {
        const inColor  = isOnPrem ? "#1f5a37" : isCloud ? "#a23829" : "#2f4a6b";
        const outColor = isOnPrem ? "#1f5a37" : isCloud ? "#a23829" : "#cf6624";
        const inLabel  = isOnPrem ? "" : isCloud ? "in the open" : "sealed";
        const outLabel = isOnPrem ? "" : isCloud ? "in the open" : "sealed";

        return (
          <g>
            <path d="M 144 140 L 354 140" stroke={inColor} strokeWidth="1.6"
              strokeDasharray={isCloud || isOnPrem ? "0" : "4 4"} fill="none"/>
            {inLabel && (
              <text x="245" y="130" textAnchor="middle" fontSize="11" fill={inColor}
                fontWeight="600" letterSpacing="0.04em" fontFamily="ui-sans-serif, sans-serif">
                {inLabel}
              </text>
            )}
            {[0, 1, 2].map(i => (
              <rect key={`pin${i}`} x="-7" y="-4" width="14" height="9" rx="1" fill={inColor} opacity="0">
                <animateMotion dur="2.8s" repeatCount="indefinite" begin={`${i * 0.95}s`}
                  path="M 144 140 L 350 140"/>
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1"
                  dur="2.8s" begin={`${i * 0.95}s`} repeatCount="indefinite" />
              </rect>
            ))}

            <path d="M 354 190 L 144 190" stroke={outColor} strokeWidth="1.6"
              strokeDasharray={isCloud || isOnPrem ? "0" : "4 4"} fill="none"/>
            {outLabel && (
              <text x="245" y="208" textAnchor="middle" fontSize="11" fill={outColor}
                fontWeight="600" letterSpacing="0.04em" fontFamily="ui-sans-serif, sans-serif">
                {outLabel}
              </text>
            )}
            {[0.4, 1.3, 2.2].map((d, i) => (
              <rect key={`pout${i}`} x="-7" y="-4" width="14" height="9" rx="1" fill={outColor} opacity="0">
                <animateMotion dur="2.8s" repeatCount="indefinite" begin={`${d}s`}
                  path="M 354 190 L 148 190"/>
                <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1"
                  dur="2.8s" begin={`${d}s`} repeatCount="indefinite" />
              </rect>
            ))}
          </g>
        );
      })()}
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// AttestationFlowELI5 — same 4 steps, plain language, no vendor names.
// Same viewBox so the LvlStack swap is height-stable.
// ────────────────────────────────────────────────────────────────────────────
function AttestationFlowELI5({ L }) {
  const [step, setStep] = React.useState(0);
  const [auto, setAuto] = React.useState(true);

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

  const onPick = (i) => { setAuto(false); setStep(i); };
  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-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="#131a26" />
          </marker>
          <marker id="arr-r-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="#2d7a4d" />
          </marker>
        </defs>

        <text x="20" y="28" fontSize="10" fill="#6c7585" letterSpacing="0.12em" fontWeight="500">
          HOW YOU CHECK IT'S REAL
        </text>

        {/* CLIENT */}
        <g>
          <rect x="40" y="100" width="200" height="200" rx="10"
            fill="#ffffff" stroke="#131a26" strokeOpacity="0.22"/>
          <text x="56" y="124" fontSize="11" fill="#131a26" letterSpacing="0.08em" fontWeight="600">
            YOU
          </text>
          <g transform="translate(140 200)">
            <circle cx="0" cy="-12" r="14" fill="none" stroke="#131a26" strokeWidth="1.5"/>
            <path d="M -22 16 Q 0 -8 22 16" fill="none" stroke="#131a26" strokeWidth="1.5"/>
          </g>
          {/* checkmark when verified */}
          {step >= 4 && (
            <g transform="translate(140 270)">
              <circle r="16" fill="#d6ecdf" stroke="#2d7a4d" strokeWidth="1.4"/>
              <path d="M -6 0 L -2 4 L 7 -5" fill="none"
                stroke="#1f5a37" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            </g>
          )}
        </g>

        {/* SAFE (remote) */}
        <g>
          <rect x="430" y="60" width="260" height="280" rx="10"
            fill="#ffffff" stroke="#131a26" strokeOpacity="0.18" strokeDasharray="3 4"/>
          <text x="446" y="84" fontSize="10" fill="#6c7585" letterSpacing="0.12em" fontWeight="500">
            SOMEONE ELSE'S COMPUTER
          </text>
          <rect x="450" y="100" width="220" height="200" rx="8"
            fill="#d6ecdf" stroke="#2d7a4d" strokeWidth="1.4"/>
          <text x="466" y="124" fontSize="11" fill="#1f5a37" letterSpacing="0.08em" fontWeight="600">
            ◆ THE SEALED SAFE
          </text>

          {/* receipt printer 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="6" fill="#ffffff" stroke="#2d7a4d"/>
            <text x="0" y="-26" textAnchor="middle" fontSize="11" fill="#1f5a37" fontWeight="600"
              fontFamily="ui-sans-serif, sans-serif">
              receipt
            </text>
            {/* lines on receipt */}
            <line x1="-40" y1="-12" x2="40" y2="-12" stroke="#2d7a4d" strokeWidth="1"/>
            <line x1="-40" y1="-2"  x2="40" y2="-2"  stroke="#2d7a4d" strokeWidth="1"/>
            <line x1="-40" y1="8"   x2="20" y2="8"   stroke="#2d7a4d" strokeWidth="1"/>
            {/* signature */}
            <path d="M -30 26 Q -10 16 10 26 T 36 26"
              fill="none" stroke="#1f5a37" strokeWidth="1.4" strokeLinecap="round"/>
          </g>
        </g>

        {/* CHIP MAKER */}
        <g>
          <rect x="860" y="100" width="200" height="200" rx="10"
            fill="#ffffff" stroke="#131a26" strokeOpacity="0.22"/>
          <text x="876" y="124" fontSize="11" fill="#131a26" letterSpacing="0.08em" fontWeight="600">
            CHIP MAKER
          </text>
          <text x="876" y="146" fontSize="11" fill="#3b4555"
            fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
            who made the chip
          </text>
          {/* stamp visual */}
          <g transform="translate(960 230)" opacity={isActive(3) ? 1 : 0.25}>
            <circle r="32" fill="none" stroke="#131a26" strokeWidth="1.6"/>
            <circle r="22" fill="none" stroke="#131a26" strokeWidth="1"/>
            <text x="0" y="-2" textAnchor="middle" fontSize="9" fill="#131a26" fontWeight="700"
              fontFamily="ui-sans-serif, sans-serif" letterSpacing="0.04em">
              REAL
            </text>
            <text x="0" y="10" textAnchor="middle" fontSize="9" fill="#131a26" fontWeight="700"
              fontFamily="ui-sans-serif, sans-serif" letterSpacing="0.04em">
              CHIP
            </text>
          </g>
        </g>

        {/* 1) client → safe: random number */}
        <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-e5)"/>
          <text x="335" y="160" textAnchor="middle" fontSize="11" fill="#131a26" letterSpacing="0.04em" fontWeight="600"
            fontFamily="ui-sans-serif, sans-serif">
            a random number
          </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) self-measure */}
        <g opacity={isActive(2) ? 1 : 0}>
          <text x="640" y="80" textAnchor="middle" fontSize="11" fill="#1f5a37" fontWeight="600"
            fontFamily="ui-sans-serif, sans-serif" letterSpacing="0">
            prints + signs its own receipt
          </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) safe → chip maker: receipt */}
        <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-e5)"/>
          <text x="775" y="190" textAnchor="middle" fontSize="11" fill="#131a26" letterSpacing="0.04em" fontWeight="600"
            fontFamily="ui-sans-serif, sans-serif">
            the receipt
          </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) chip maker → client: verdict */}
        <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-e5)"/>
          <text x="550" y="385" textAnchor="middle" fontSize="11" fill="#1f5a37" letterSpacing="0.04em" fontWeight="600"
            fontFamily="ui-sans-serif, sans-serif">
            ✓ yes, this is a real safe. send your data.
          </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>

      <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 }}>
          4 STEPS
        </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.ComparisonPanelELI5 = ComparisonPanelELI5;
window.AttestationFlowELI5 = AttestationFlowELI5;
