// Resolution loop — the newest capability (resolution epic T3–T6 + SLA): a held
// payout gets an operator decision, and the processor is told the outcome over a
// signed callback, on a clock. Nothing here is aspirational — POST /resolve, the
// outbox worker and the SLA breach detector are all live in production (the
// outbound send itself is enabled at cutover).
function Resolution() {
  const steps = [
    { n: '01', title: 'Hold',     body: 'A priority-1 payout is held in the operator queue with its causes listed and a deadline attached.', tag: 'priority + SLA' },
    { n: '02', title: 'Decide',   body: 'One operator action: release the payout or block it. Sanctions and blocklist holds cannot be released from the console at all.', tag: 'human decision' },
    { n: '03', title: 'Callback', body: 'Your platform is told the outcome over an HMAC-signed callback, retried with backoff for up to 24 hours — and if it still cannot land, an operator is alerted.', tag: 'signed · retried' },
    { n: '04', title: 'Audit',    body: 'The decision, who made it, when, and why — recorded against the original verdict, which is never rewritten.', tag: 'immutable trail' },
  ];

  return (
    <section className="section" id="resolution">
      <div className="container">
        <div className="section-num">04 · RESOLUTION</div>
        <h2 className="section-h">A held payout<br />is not a dead end.</h2>
        <p className="section-lead">
          Flagging is the easy half. The hard half is closing the loop —
          who decides, how fast, and how your platform finds out. Every
          held payout carries a deadline, and every decision travels back
          to you signed.
        </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>Every hold gets a deadline — 4 hours for priority-1, 48 for ordinary review. An overdue priority-1 raises a flag for the operator; nothing is ever auto-released.</strong>
          </div>
        </div>
      </div>
    </section>
  );
}