// StatBand — dedicated outcomes moment between Hero and Services
// Editorial strip with 4 anchor metrics + label, framed by hairlines.

function StatBand() {
  const stats = [
    { num: '−89%', label: 'Cycle time', detail: 'denial appeals, 4.2d to 11h' },
    { num: '$2.8M', label: 'ARR unlocked', detail: 'underwriting copilot, Q1 to Q2' },
    { num: '94%', label: 'Retrieval precision', detail: 'production RAG, hybrid index' },
    { num: '0', label: 'Downtime minutes', detail: 'monolith decomposition, 14 wks' },
  ];

  return (
    <section className="relative" style={{borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', background: 'var(--surface-1)'}}>
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10 py-10 lg:py-14">
        <div className="flex items-center justify-between mb-8">
          <span className="font-mono text-[10px] uppercase tracking-[0.22em]" style={{color: 'var(--muted)'}}>
            Selected outcomes · Last 12 months
          </span>
          <a href="#work" className="font-mono text-[10px] uppercase tracking-[0.22em] link-hover hidden sm:inline-flex" style={{color: 'var(--ink)'}}>
            View case studies →
          </a>
        </div>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-y-9 gap-x-6 lg:gap-x-10">
          {stats.map((s, i) => (
            <div key={s.label} className="reveal relative" data-delay={i * 80}>
              {i > 0 && <span className="hidden lg:block absolute -left-5 top-1 bottom-1 w-px" style={{background: 'var(--hairline)'}}></span>}
              <div className="font-display text-[40px] sm:text-[52px] lg:text-[60px] font-medium tracking-[-0.04em] leading-none mb-3"
                   style={{color: 'var(--ink)'}}>
                {s.num}
              </div>
              <div className="font-mono text-[10px] uppercase tracking-[0.22em] mb-1.5" style={{color: 'var(--muted)'}}>
                {s.label}
              </div>
              <div className="text-[12.5px] italic leading-[1.4]" style={{color: 'var(--dim)'}}>
                {s.detail}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.StatBand = StatBand;