// StatsBand — deep purple band with 3 big stats (proof)
function StatsBand() {
  return (
    <section style={{background:'linear-gradient(180deg, #1a1a5e 0%, #2f2fa2 100%)', padding:'80px 0', color:'#fff'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 32, textAlign:'center'}}>
        <Stat num="73%" label="Average engagement lift after partnering with us"/>
        <Stat num="#1" label="Best Place for Working Parents® three years running"/>
        <Stat num="96%" label="Retention rate across our agency partners"/>
      </div>
      <div style={{textAlign:'center', marginTop: 48}}>
        <a href="#" style={{display:'inline-flex', alignItems:'center', gap:8, background:'#000', color:'#fff', padding:'14px 32px', fontWeight:700, fontSize:14, textDecoration:'none', border:0}}>Explore Our Reviews<span style={{fontSize:18}}>→</span></a>
      </div>
    </section>
  );
}

function Stat({ num, label }) {
  return (
    <div>
      <div style={{fontSize: 84, fontWeight: 800, lineHeight: 1, letterSpacing: '-.02em'}}>{num}</div>
      <div style={{marginTop: 14, fontSize: 14, opacity: .9, maxWidth: 260, margin: '14px auto 0', lineHeight: 1.5}}>{label}</div>
    </div>
  );
}

window.StatsBand = StatsBand;