// 3-layer architecture diagram — the centerpiece visual.
// Layer 1: Rules / anomaly detection  (deterministic, fast)
// Layer 2: AI Model A                  (first LLM / ML scorer)
// Layer 3: AI Model B                  (second LLM / ML scorer, different model)

// ─── HERO variant: perspective-stacked 3 layers with a transaction flowing through.
function LayerStack({ animated = true, activeLayer = null }) {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!animated) return;
    const t = setInterval(() => setTick(x => x + 1), 2600);
    return () => clearInterval(t);
  }, [animated]);

  // Three evaluations, cycling
  const samples = [
    { id: 'pay_01K5Z0QXM3', amt: '4,820 USDT', dec: 'BLOCK',   tone: 'block',   score: 92, reason: 'IP on global blocklist · velocity +21%' },
    { id: 'pay_01K5Z0PN7C', amt: '180 USDT',    dec: 'APPROVE', tone: 'approve', score: 8,  reason: 'known client · known IP · in hours' },
    { id: 'pay_01K5Z0P4BX', amt: '12,500 USDT', dec: 'REVIEW',  tone: 'review',  score: 64, reason: 'amount > 2× baseline · new destination' },
  ];
  const cur = samples[tick % samples.length];

  const layers = [
    { n: 1, key: 'rules',  title: 'Rules & anomaly detection',     sub: 'Deterministic · 40+ signals',
      pills: ['velocity', 'baselines', 'blocklists', 'geo/ISP'],
      z: 0, color: 'rgba(99,212,230,0.22)', stroke: 'rgba(99,212,230,0.5)' },
    { n: 2, key: 'modelA', title: 'AI scoring · Model α',            sub: 'Contextual risk in sub-20ms',
      pills: ['client history', 'behaviour graph', 'time-of-day', 'tx shape'],
      z: 1, color: 'rgba(147,135,255,0.22)', stroke: 'rgba(147,135,255,0.55)' },
    { n: 3, key: 'modelB', title: 'AI reasoning · Model β',           sub: 'Second model for disagreement',
      pills: ['narrative', 'explanation', 'escalation', 'confidence'],
      z: 2, color: 'rgba(129,168,255,0.22)', stroke: 'rgba(129,168,255,0.55)' },
  ];

  return (
    <div className="ls-wrap">
      {/* Input badge — the transaction entering at the top */}
      <div className="ls-input">
        <div className="ls-input-head">
          <span style={{ color: 'var(--fg-muted)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 }}>Incoming tx</span>
          <span className="mono" style={{ color: 'var(--fg-muted)', fontSize: 11 }}>{cur.id}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
          <span className="mono" style={{ fontSize: 16, fontWeight: 600 }}>{cur.amt}</span>
          <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>inxy_main · TRON</span>
        </div>
      </div>

      {/* The 3 layers */}
      <div className="ls-deck">
        {layers.map((l, i) => (
          <div key={l.key}
            className={'ls-layer ls-layer-' + (i + 1) + (activeLayer === l.key ? ' is-active' : '')}
            style={{ '--c': l.color, '--s': l.stroke, '--delay': (i * 220) + 'ms', '--idx': i }}
          >
            <div className="ls-layer-inner">
              <div className="ls-layer-meta">
                <span className="ls-layer-n">L{l.n}</span>
                <div>
                  <div className="ls-layer-title">{l.title}</div>
                  <div className="ls-layer-sub">{l.sub}</div>
                </div>
                <span className="ls-layer-time mono">
                  {l.key === 'rules'  ? '3 ms' :
                   l.key === 'modelA' ? '14 ms' : '22 ms'}
                </span>
              </div>
              <div className="ls-layer-pills">
                {l.pills.map(p => <span key={p} className="ls-chip">{p}</span>)}
              </div>
              <div className="ls-layer-grid" aria-hidden />
            </div>
            {/* the 'beam' tracing through */}
            {animated && <div className="ls-beam" style={{ animationDelay: (i * 0.14) + 's' }} />}
          </div>
        ))}
      </div>

      {/* Output verdict */}
      <div className={'ls-output ls-output-' + cur.tone}>
        <div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--fg-muted)', fontWeight: 600 }}>Verdict · 39 ms</div>
          <div className="hstack" style={{ marginTop: 4, gap: 10 }}>
            <span style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>{cur.dec}</span>
            <span className="ls-score mono">{cur.score}</span>
          </div>
        </div>
        <div style={{ fontSize: 12, color: 'var(--fg-muted)', textAlign: 'right', maxWidth: 220 }}>{cur.reason}</div>
      </div>

      <style>{`
        .ls-wrap {
          position: relative;
          width: 100%;
          max-width: 560px;
          margin: 0 auto;
          padding: 24px 0;
        }
        .ls-input, .ls-output {
          width: 92%; margin: 0 auto;
          display: flex; justify-content: space-between; align-items: center;
          padding: 12px 16px;
          border-radius: 12px;
          border: 1px solid var(--border-strong);
          background: var(--surface-strong);
        }
        .ls-input { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; }
        .ls-input-head { display: flex; justify-content: space-between; align-items: center; }
        .ls-output { margin-top: 22px; gap: 20px; align-items: flex-start; }
        .ls-output-approve { border-color: rgba(101,217,124,0.35); background: linear-gradient(0deg, rgba(101,217,124,0.10), rgba(101,217,124,0.04)); }
        .ls-output-review  { border-color: rgba(255,181,71,0.35);  background: linear-gradient(0deg, rgba(255,181,71,0.10),  rgba(255,181,71,0.04)); }
        .ls-output-block   { border-color: rgba(255,94,120,0.45);  background: linear-gradient(0deg, rgba(255,94,120,0.12),  rgba(255,94,120,0.05)); }
        .ls-score {
          font-size: 14px; font-weight: 600;
          padding: 3px 10px; border-radius: 999px;
          background: rgba(255,255,255,0.08);
        }

        .ls-deck {
          position: relative;
          padding: 22px 0;
          perspective: 1400px;
          display: grid; gap: 14px;
        }

        .ls-layer {
          position: relative;
          border-radius: 14px;
          border: 1px solid var(--s);
          background:
            radial-gradient(120% 160% at 20% 0%, var(--c) 0%, transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
          transform-style: preserve-3d;
          transform: rotateX(16deg) translateZ(calc(var(--idx) * -2px));
          box-shadow:
            0 1px 0 rgba(255,255,255,0.04) inset,
            0 20px 40px -20px rgba(0,0,0,0.4);
          overflow: hidden;
        }
        .ls-layer-inner { padding: 14px 18px; position: relative; z-index: 2; }
        .ls-layer-meta { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
        .ls-layer-n {
          width: 28px; height: 28px; border-radius: 8px;
          display: inline-flex; align-items: center; justify-content: center;
          font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
          background: rgba(255,255,255,0.08);
          border: 1px solid var(--s);
          color: var(--fg);
        }
        .ls-layer-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; }
        .ls-layer-sub { font-size: 12px; color: var(--fg-muted); margin-top: 1px; }
        .ls-layer-time {
          font-size: 11px; color: var(--fg-muted);
          padding: 3px 8px; border-radius: 6px;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--border);
        }
        .ls-layer-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
        .ls-chip {
          font-size: 11px; padding: 3px 8px; border-radius: 999px;
          background: rgba(255,255,255,0.04); border: 1px solid var(--border);
          color: var(--fg-muted);
        }
        .ls-layer-grid {
          position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
          background-image:
            linear-gradient(rgba(124,92,252,0.20) 1px, transparent 1px),
            linear-gradient(90deg, rgba(124,92,252,0.20) 1px, transparent 1px);
          background-size: 24px 24px;
          mask-image: radial-gradient(60% 120% at 50% 0%, black 0%, transparent 80%);
        }

        .ls-beam {
          position: absolute;
          top: -18px; left: 50%;
          width: 2px; height: 130%;
          background: linear-gradient(180deg, transparent, #9387FF 30%, #5188F8 60%, transparent);
          filter: blur(0.5px);
          opacity: 0;
          transform: translateX(-50%);
          animation: ls-beam 2.6s cubic-bezier(.2,.9,.2,1) infinite;
        }

        @keyframes ls-beam {
          0%   { opacity: 0; transform: translate(-50%, -20%); }
          20%  { opacity: 0.9; }
          70%  { opacity: 0.9; transform: translate(-50%, 20%); }
          100% { opacity: 0; transform: translate(-50%, 40%); }
        }

        @keyframes dipoli-spin {
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
}

// ─── Flat horizontal variant for "How it works" — 3 cards with connecting arrows.
function LayerFlow() {
  const layers = [
    { n: 1, title: 'Rules & anomaly', sub: 'Deterministic layer. 40+ signals: velocity, baselines, geo, blocklists, sanctions. Every tx hits this first.', time: '3 ms', icon: IconGitBranch, tone: 'teal' },
    { n: 2, title: 'AI model α',       sub: 'First AI scorer. Contextual risk from client history, transaction shape, and behavioural features. Numeric score + confidence.', time: '14 ms', icon: IconCpu, tone: 'primary' },
    { n: 3, title: 'AI model β',       sub: 'Second AI, different architecture. Invoked on disagreement and for the high-stakes tail. Produces an explanation operators can read.', time: '22 ms', icon: IconLayers, tone: 'blue' },
  ];
  return (
    <div className="lf-wrap">
      {layers.map((l, i) => {
        const Icon = l.icon;
        return (
          <React.Fragment key={l.n}>
            <div className={'lf-card lf-' + l.tone}>
              <div className="lf-head">
                <span className="lf-n mono">L{l.n}</span>
                <span className="lf-time mono">{l.time}</span>
              </div>
              <div className="lf-icon"><Icon size={22} /></div>
              <div className="lf-title">{l.title}</div>
              <div className="lf-sub">{l.sub}</div>
            </div>
            {i < layers.length - 1 && (
              <div className="lf-connector" aria-hidden>
                <svg width="32" height="20" viewBox="0 0 32 20" fill="none">
                  <path d="M2 10 H28 M22 4 L28 10 L22 16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
            )}
          </React.Fragment>
        );
      })}

      <style>{`
        .lf-wrap { display: flex; align-items: stretch; gap: 0; }
        .lf-card {
          flex: 1; padding: 28px 26px; border-radius: 16px;
          border: 1px solid var(--border);
          background: var(--surface);
          display: flex; flex-direction: column; gap: 12px;
          position: relative; overflow: hidden;
        }
        .lf-card::before {
          content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
          background: var(--lf-accent); opacity: 0.9;
        }
        .lf-teal    { --lf-accent: linear-gradient(90deg, #38C8F6, #63D4E6); }
        .lf-primary { --lf-accent: linear-gradient(90deg, #7C5CFC, #9387FF); }
        .lf-blue    { --lf-accent: linear-gradient(90deg, #5188F8, #81A8FF); }
        .lf-head { display: flex; justify-content: space-between; align-items: center; }
        .lf-n {
          display: inline-flex; align-items: center; justify-content: center;
          width: 32px; height: 22px; border-radius: 6px;
          font-size: 11px; font-weight: 700;
          background: rgba(255,255,255,0.06); border: 1px solid var(--border);
          color: var(--fg-muted);
        }
        .lf-time { font-size: 11px; color: var(--fg-muted); }
        .lf-icon { width: 44px; height: 44px; border-radius: 12px;
          display: inline-flex; align-items: center; justify-content: center;
          background: rgba(147,135,255,0.10); color: var(--primary); margin-top: 2px;
        }
        .lf-teal .lf-icon { background: rgba(99,212,230,0.10); color: #63D4E6; }
        .lf-blue .lf-icon { background: rgba(81,136,248,0.10); color: #81A8FF; }
        .lf-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; }
        .lf-sub { font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; }
        .lf-connector {
          display: flex; align-items: center; color: var(--fg-dim);
          padding: 0 6px;
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { LayerStack, LayerFlow });
