function Defense() {
  return (
    <section className="section" id="defense">
      <div className="container">
        <div className="section-num">01 · WHAT IT DOES</div>
        <h2 className="section-h">Behavior, not just<br />the address.</h2>
        <p className="section-lead">
          Most tools watch the chain — not the user. We score how the
          transaction was made: IP, geo, time, amount, velocity, the
          merchant's history. Account compromise and insider fraud get
          caught where on-chain analytics is silent.
        </p>

        <div className="defense-grid">
          <DefenseChainCard />
          <DefenseDistributionCard />
          <DefenseExplainCard />
        </div>
      </div>
    </section>
  );
}

function DefenseChainCard() {
  return (
    <div className="def-card">
      <div className="def-eyebrow">L1 + L2 + L3</div>
      <h3>Rules, models, and human review — as one chain.</h3>
      <p>Deterministic rules catch the obvious. A behavioral model scores the context. A second model writes the rationale. Disagreement escalates to an analyst, not a coin flip.</p>
      <div className="chain">
        <div className="chain-box">
          <span className="chain-tag">L1</span>
          <div className="name">Rules</div>
          <div className="role">deterministic</div>
        </div>
        <span className="chain-arr"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
        <div className="chain-box">
          <span className="chain-tag">L2</span>
          <div className="name">Model α</div>
          <div className="role">context</div>
        </div>
        <span className="chain-arr"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
        <div className="chain-box">
          <span className="chain-tag">L3</span>
          <div className="name">Model β</div>
          <div className="role">rationale</div>
        </div>
      </div>
      <div className="verdict-box">
        <div className="v-lbl">Verdict</div>
        <div className="v-val">APPROVE / REVIEW / BLOCK</div>
      </div>
    </div>
  );
}

function DefenseDistributionCard() {
  // Bars expand to their target width once the card scrolls into view —
  // an IntersectionObserver replaces the legacy animateDistBars() hook.
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) setShown(true); });
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const bars = [
    { tag: 'APPROVE', color: 'var(--approve)', bgTint: 'rgba(93,214,143,0.16)',  pct: 86 },
    { tag: 'REVIEW',  color: 'var(--review)',  bgTint: 'rgba(255,181,71,0.16)',  pct: 11 },
    { tag: 'BLOCK',   color: 'var(--block)',   bgTint: 'rgba(255,94,120,0.18)',  pct: 3  },
  ];

  return (
    <div className="def-card" ref={ref}>
      <div className="def-eyebrow">DECISIONS</div>
      <h3>Approve, review, block — calibrated to your risk.</h3>
      <p>Thresholds you control. Distribution you can see at a glance, sliced by client and rule.</p>
      <div style={{ marginTop: 28 }}>
        {bars.map((b) => (
          <div className="dist-row" key={b.tag}>
            <div className="dist-tag" style={{ background: b.bgTint, color: b.color }}>{b.tag}</div>
            <div className="dist-bar"><span style={{ background: b.color, width: shown ? b.pct + '%' : '0%' }}></span></div>
            <div className="dist-pct">{b.pct}%</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DefenseExplainCard() {
  return (
    <div className="def-card">
      <div className="def-eyebrow">EXPLAIN</div>
      <h3>Every block has a reason — in plain English.</h3>
      <p>Compliance reads an audit trail. The operator reads a list of causes. No black box.</p>
      <div className="reason-card">
        <div className="reason-pill">
          <span className="pill-tag">BLOCK</span>
          <span className="pill-num">· 92</span>
        </div>
        <div className="reason-text">Destination first seen 14 days ago on an unrelated tenant. IP matches a known datacenter pool. New device + high amount within 24h velocity window. Escalation recommended.</div>
      </div>
    </div>
  );
}