// ChainReveal — phase 5 hero moment: F-02 + F-01 → CHAIN-01
// Two finding cards connected by an animated line + combined CVSS stamp.

function ChainReveal({ visible }) {
  const { React } = window;
  const { useEffect, useState } = React;
  const [stage, setStage] = useState(0); // 0: idle, 1: two cards, 2: line drawn, 3: stamp

  useEffect(() => {
    if (!visible) { setStage(0); return; }
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setStage(3); return; }
    const timers = [
      setTimeout(() => setStage(1), 150),
      setTimeout(() => setStage(2), 900),
      setTimeout(() => setStage(3), 1800),
    ];
    return () => timers.forEach(clearTimeout);
  }, [visible]);

  return (
    <div className={`chain-reveal stage-${stage}`}>
      <div className="chain-caption-top">phase 5 · chain analysis</div>

      <div className="chain-cards">
        <div className="chain-card chain-card--a">
          <div className="chain-card-id">F-02</div>
          <div className="chain-card-kind">Vuln::Idor</div>
          <div className="chain-card-cvss">
            <span className="chain-cvss-num">6.5</span>
            <span className="chain-cvss-lbl">medium</span>
          </div>
          <div className="chain-card-meta">GET /v2/users/:id/receipts</div>
        </div>

        <svg className="chain-svg" viewBox="0 0 320 140" preserveAspectRatio="none">
          <defs>
            <linearGradient id="chainGrad" x1="0" x2="1" y1="0" y2="0">
              <stop offset="0"   stopColor="#E8847C" />
              <stop offset="0.5" stopColor="#EF4444" />
              <stop offset="1"   stopColor="#2D4A3E" />
            </linearGradient>
          </defs>
          <path className="chain-path" d="M 10 70 C 110 70, 210 70, 310 70"
                stroke="url(#chainGrad)" strokeWidth="2.5" fill="none"
                strokeDasharray="6 6" />
          <circle className="chain-knot" cx="160" cy="70" r="5" fill="#EF4444" />
        </svg>

        <div className="chain-card chain-card--b">
          <div className="chain-card-id">F-01</div>
          <div className="chain-card-kind">Vuln::SqlInjection</div>
          <div className="chain-card-cvss">
            <span className="chain-cvss-num">7.5</span>
            <span className="chain-cvss-lbl">high</span>
          </div>
          <div className="chain-card-meta">payments/query.py:142</div>
        </div>
      </div>

      <div className="chain-stamp">
        <div className="chain-stamp-id">CHAIN-01 · ACCOUNT TAKEOVER</div>
        <div className="chain-stamp-cvss">
          <span className="chain-stamp-num">9.3</span>
          <span className="chain-stamp-lbl">critical (combined cvss)</span>
        </div>
        <div className="chain-stamp-caption">individually medium. chained, critical.</div>
      </div>
    </div>
  );
}
window.ChainReveal = ChainReveal;