// Animated encryption-flow diagram + How-it-works stepper + Lattice background
const { useState: useState2, useEffect: useEffect2 } = React;

function LatticeBackground() {
  // Animated lattice / dotted points connected by lines — quantum-cryptography motif
  const points = [];
  const cols = 8, rows = 6;
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      points.push({
        x: 40 + c * 70 + (r % 2) * 35,
        y: 40 + r * 70,
        delay: (r * cols + c) * 60,
      });
    }
  }
  return (
    <svg className="hero-bg" viewBox="0 0 600 480" preserveAspectRatio="xMidYMid meet">
      <defs>
        <radialGradient id="dotG" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#06b6c4" stopOpacity="1" />
          <stop offset="100%" stopColor="#06b6c4" stopOpacity="0" />
        </radialGradient>
      </defs>
      {/* connecting lines */}
      {points.map((p, i) => {
        const next = points[i + 1];
        if (!next || (i + 1) % cols === 0) return null;
        return (
          <line key={'l' + i} x1={p.x} y1={p.y} x2={next.x} y2={next.y}
            stroke="#0891a8" strokeWidth="0.5" opacity="0.18" />
        );
      })}
      {points.map((p, i) => {
        const below = points[i + cols];
        if (!below) return null;
        return (
          <line key={'lv' + i} x1={p.x} y1={p.y} x2={below.x} y2={below.y}
            stroke="#0891a8" strokeWidth="0.5" opacity="0.12" />
        );
      })}
      {points.map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r="2" fill="#0891a8" opacity="0.5" />
          <circle cx={p.x} cy={p.y} r="6" fill="url(#dotG)" opacity="0.5">
            <animate
              attributeName="r"
              values="3;9;3"
              dur="3.4s"
              begin={`${p.delay}ms`}
              repeatCount="indefinite"
            />
            <animate
              attributeName="opacity"
              values="0.1;0.7;0.1"
              dur="3.4s"
              begin={`${p.delay}ms`}
              repeatCount="indefinite"
            />
          </circle>
        </g>
      ))}
    </svg>
  );
}

function FlowDiagram() {
  const [tick, setTick] = useState2(0);
  useEffect2(() => {
    const t = setInterval(() => setTick(v => (v + 1) % 4), 1700);
    return () => clearInterval(t);
  }, []);

  const stages = [
    { label: 'Plaintext', sub: 'patient_record_8721', icon: <Icon.Doc />, color: '#0891a8' },
    { label: 'Hybrid encrypt', sub: 'X25519 + ML-KEM-768', icon: <Icon.Layers />, color: '#0891a8' },
    { label: 'Sign', sub: 'ML-DSA-65', icon: <Icon.Sig />, color: '#0891a8' },
    { label: 'Ciphertext', sub: 'AaQBz9fX...vN3kL2pQ', icon: <Icon.Lock />, color: '#047857' },
  ];

  return (
    <div className="diagram-wrap" style={{ position: 'relative' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28, position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span className="label">api.api4pqc.com/v1/kem/encapsulate</span>
        </div>
        <span className="pill"><span className="dot" /> Live</span>
      </div>

      <div style={{ position: 'relative', zIndex: 2 }}>
        <svg viewBox="0 0 800 240" style={{ width: '100%', height: 240 }}>
          {/* Connecting lines */}
          {stages.slice(0, -1).map((_, i) => {
            const x1 = 80 + i * 213;
            const x2 = x1 + 153;
            const active = tick > i;
            return (
              <g key={i}>
                <line x1={x1 + 60} y1={120} x2={x2} y2={120} stroke="#d3dbe4" strokeWidth="2" />
                {active && (
                  <line x1={x1 + 60} y1={120} x2={x2} y2={120}
                    stroke="#0891a8" strokeWidth="2"
                    strokeDasharray="4 6"
                    style={{ animation: 'flow 1.2s linear infinite' }} />
                )}
                {/* moving dot */}
                {tick === i + 1 && (
                  <circle r="5" fill="#06b6c4">
                    <animate attributeName="cx" from={x1 + 60} to={x2} dur="0.8s" />
                    <animate attributeName="cy" from="120" to="120" dur="0.8s" />
                  </circle>
                )}
              </g>
            );
          })}

          {/* Stage nodes */}
          {stages.map((s, i) => {
            const x = 80 + i * 213;
            const active = i === tick;
            const done = i < tick;
            return (
              <g key={i} transform={`translate(${x}, 90)`}>
                <rect
                  x="0" y="0" width="120" height="60"
                  rx="10"
                  fill={done || active ? 'white' : '#fafcfd'}
                  stroke={active ? s.color : (done ? s.color : '#d3dbe4')}
                  strokeWidth={active ? '2' : '1'}
                  style={{ transition: 'all 240ms', filter: active ? 'drop-shadow(0 4px 12px rgba(8,145,168,0.18))' : 'none' }}
                />
                <foreignObject x="0" y="0" width="120" height="60">
                  <div style={{
                    padding: '10px 14px',
                    height: '100%',
                    display: 'flex', flexDirection: 'column', justifyContent: 'center',
                    fontFamily: 'var(--sans)',
                    color: active ? s.color : (done ? '#047857' : '#4a5b73'),
                  }}>
                    <div style={{ display: 'flex', gap: 6, alignItems: 'center', fontSize: 12.5, fontWeight: 500 }}>
                      <span style={{ display: 'inline-flex', width: 14, height: 14 }}>
                        {React.cloneElement(s.icon, { size: 13 })}
                      </span>
                      {s.label}
                    </div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, color: '#6b7a90', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {s.sub}
                    </div>
                  </div>
                </foreignObject>
              </g>
            );
          })}
        </svg>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24, fontFamily: 'var(--mono)', fontSize: 11, color: '#6b7a90', position: 'relative', zIndex: 2 }}>
        <span>Per-row AAD: tenant_id || id || version</span>
        <span>Ciphertext: 1088 B · Shared secret: 32 B</span>
        <span>Algorithm: ML-KEM-768 (NIST FIPS 203)</span>
      </div>
    </div>
  );
}

window.FlowDiagram = FlowDiagram;
window.LatticeBackground = LatticeBackground;