const STATS = [
  {n:'85%', l:'fewer prescription drugs after care'},
  {n:'62%', l:'fewer surgeries & outpatient procedures'},
  {n:'54%', l:'slept better within 6 weeks'},
  {n:'2M+', l:'downloads since 2023'},
];

function StatsBand() {
  return (
    <section style={stStyles.section}>
      <div className="t-eyebrow" style={{color:'var(--accent)',marginBottom:16}}>WHAT THE WORK PRODUCES</div>
      <h2 style={stStyles.h2}>Real numbers from real patients.</h2>
      <div style={stStyles.row}>
        {STATS.map(s => (
          <div key={s.n} style={stStyles.cell}>
            <div style={stStyles.num}>{s.n}</div>
            <div style={stStyles.lbl}>{s.l}</div>
          </div>
        ))}
      </div>
      <div style={stStyles.foot}>Data: Lazar Spinal Care patient outcomes, 2024.</div>
    </section>
  );
}

const stStyles = {
  section: {background:'var(--bone)',color:'var(--ink)',padding:'96px 64px'},
  h2: {fontFamily:'var(--font-serif)',fontWeight:600,fontSize:'clamp(36px,5vw,72px)',lineHeight:1.05,letterSpacing:'-0.012em',margin:'0 0 64px',maxWidth:680},
  row: {display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))',gap:32,borderTop:'1px solid rgba(14,14,16,.10)',paddingTop:48},
  cell: {display:'flex',flexDirection:'column',gap:8},
  num: {fontFamily:'var(--font-display)',fontSize:'clamp(64px,10vw,140px)',lineHeight:.85,letterSpacing:'-0.02em',color:'var(--accent)'},
  lbl: {fontFamily:'var(--font-sans)',fontSize:14,lineHeight:1.4,color:'var(--fg-inv-2)',maxWidth:160},
  foot: {fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-inv-3)',marginTop:48,letterSpacing:'.08em',textTransform:'uppercase'},
};

window.StatsBand = StatsBand;