// Metrics — visible impact of using DrVet.app

const Metrics = () => {
  return (
    <section id="impacto" style={{ padding:'140px 0', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container">
        <SectionTag num="05" label="Impacto medible" style={{ marginBottom:28 }}/>
        <h2 className="serif" style={{
          fontSize:'clamp(36px, 5vw, 68px)', lineHeight:1.0,
          letterSpacing:'-0.025em', fontWeight:400, margin:'0 0 80px',
          maxWidth: 900, textWrap:'balance'
        }}>
          Las clínicas que usan DrVet.app por <span style={{ fontStyle:'italic' }}>12 meses</span>{' '}
          ven a sus tutores volver — <span style={{ color:'var(--primary)' }}>otra vez, y otra vez</span>.
        </h2>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, borderTop:'1px solid var(--ink)' }} className="m-grid">
          {[
            { n:'+38%', l:'tasa de retorno anual', s:'vs. control sin re-engagement' },
            { n:'+62%', l:'recordatorios confirmados', s:'WhatsApp T-24h y T-2h' },
            { n:'4.2×', l:'LTV por cliente fiel', s:'a 5 años de seguimiento' },
            { n:'−71%', l:'tiempo en historia clínica', s:'AI Scribe SOAP vs. teclear' },
          ].map((s,i) => (
            <div key={i} style={{
              padding:'40px 24px',
              borderRight: i<3 ? '1px solid var(--line)' : 'none',
            }}>
              <div className="serif" style={{
                fontSize:'clamp(56px, 6vw, 88px)', lineHeight:1, letterSpacing:'-0.03em',
                fontWeight:400, color:'var(--ink)'
              }}>{s.n}</div>
              <div style={{ marginTop:18, fontSize:14, fontWeight:500 }}>{s.l}</div>
              <div className="mono" style={{ fontSize:10.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginTop:6 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px){
          .m-grid { grid-template-columns: 1fr 1fr !important; }
          .m-grid > div:nth-child(2) { border-right: none !important; }
          .m-grid > div:nth-child(1), .m-grid > div:nth-child(2) { border-bottom: 1px solid var(--line); }
        }
        @media (max-width: 560px){
          .m-grid { grid-template-columns: 1fr !important; }
          .m-grid > div { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
        }
      `}</style>
    </section>
  );
};

window.Metrics = Metrics;