function Pipeline() {
  const steps = [
    { n: '01', title: 'Transaction', body: "Your processor sends the payment payload — customer, amount, destination — over a single REST call.", tag: 'processor API' },
    { n: '02', title: 'Enrichment',  body: 'GeoIP, timezone, device fingerprint, velocity windows — resolved in-process, no external hops.', tag: 'geo · velocity' },
    { n: '03', title: 'Rules + AI',  body: 'Deterministic rules and behavioral models run in parallel. Anomaly score combines with rule weights.', tag: 'behavioral · anomaly' },
    { n: '04', title: 'Decision',    body: 'You receive APPROVE / REVIEW / BLOCK with the score and the rules that fired — all signed.', tag: 'verdict + audit' },
  ];

  return (
    <section className="section" id="process">
      <div className="container">
        <div className="section-num">02 · INTEGRATION</div>
        <h2 className="section-h">Plug into any<br />payment processor.</h2>
        <p className="section-lead">
          Two integration modes: a synchronous push-API called before
          coin movement, or a webhook callback after. HMAC-signed,
          idempotent retries. No changes to your core payment logic.
        </p>

        <div className="pipeline">
          <div className="pipe-grid">
            {steps.map((s) => (
              <div className="pipe-step" key={s.n}>
                <div className="pn">→ STEP {s.n}</div>
                <h4 className="pt">{s.title}</h4>
                <p>{s.body}</p>
                <span className="pipe-tag">{s.tag}</span>
              </div>
            ))}
          </div>
          <div className="pipe-foot">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <strong>Pipeline executes as a single in-process call in milliseconds, with no external API dependencies in the hot path.</strong>
          </div>
        </div>
      </div>
    </section>
  );
}