// ROISection — speak to the BUYER (clinic owner). 
// Emotional + financial: "amar más a las mascotas = ganar más dinero"

const ROISection = () => {
  const beforeAfter = [
    { metric:'Consultas/semana',     before:'28', after:'71',   delta:'+154%' },
    { metric:'Recordatorios enviados', before:'manual',  after:'automático', delta:'24/7' },
    { metric:'No-shows',             before:'31%', after:'7%',  delta:'−24 pts' },
    { metric:'Ticket promedio',      before:'$ 38', after:'$ 56', delta:'+47%' },
    { metric:'Reseñas 5★/mes',       before:'2',   after:'18',  delta:'×9' },
    { metric:'Clientes que vuelven', before:'42%', after:'89%', delta:'+47 pts' },
  ];
  return (
    <section style={{ padding:'140px 0', background:'var(--bg-3)', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container">
        <SectionTag num="04" label="El negocio del amor por las mascotas" style={{ marginBottom:28 }}/>

        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,0.95fr) minmax(0,1.05fr)', gap:64, alignItems:'start' }} className="roi-grid">
          <div>
            <h2 className="serif" style={{
              fontSize:'clamp(36px, 5vw, 64px)', lineHeight:1.0,
              letterSpacing:'-0.025em', fontWeight:400, margin:0, color:'var(--ink)',
              textWrap:'balance'
            }}>
              Cuidas mejor.<br/>
              Tus tutores se enamoran.<br/>
              <span style={{ fontStyle:'italic', color:'var(--primary)' }}>Tu clínica crece.</span>
            </h2>
            <p style={{
              marginTop:24, fontSize:18, color:'var(--ink-2)', lineHeight:1.55, maxWidth:480, textWrap:'pretty'
            }}>
              No es magia: es un sistema que recuerda cumpleaños, manda fotos del control, alerta vacunas
              y le habla al tutor por su nombre. Cuando el cliente siente que su mascota es <em style={{ color:'var(--primary)' }}>parte de tu familia</em>,
              no se va — y trae a su prima, a su vecina, a su segundo perro.
            </p>

            {/* Big payback callout */}
            <div style={{
              marginTop:36, padding:'28px 32px',
              background:'var(--ink)', color:'var(--bg-3)', borderRadius:16,
              display:'flex', alignItems:'center', gap:24
            }}>
              <div className="serif" style={{ fontSize:64, fontWeight:500, letterSpacing:'-0.025em', lineHeight:0.9, color:'var(--accent)' }}>
                23 días
              </div>
              <div>
                <div className="mono" style={{ fontSize:10.5, color:'rgba(251,246,238,0.6)', textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:6 }}>Payback promedio</div>
                <div style={{ fontSize:14.5, lineHeight:1.45, color:'rgba(251,246,238,0.92)' }}>
                  para que DrVet.app se pague solo. A partir del día 24, cada mascota cuidada con cariño es ganancia neta.
                </div>
              </div>
            </div>
          </div>

          {/* Right — Before/after table */}
          <div style={{
            background:'var(--bg)', border:'1px solid var(--line)', borderRadius:18,
            overflow:'hidden', boxShadow:'0 30px 60px -30px rgba(74,42,18,0.18)'
          }}>
            <div style={{
              padding:'18px 24px', background:'var(--bg-2)',
              display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 0.9fr', gap:16,
              borderBottom:'1px solid var(--line)',
            }}>
              <div className="mono" style={{ fontSize:10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.1em' }}>Métrica</div>
              <div className="mono" style={{ fontSize:10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.1em' }}>Antes</div>
              <div className="mono" style={{ fontSize:10, color:'var(--primary)', textTransform:'uppercase', letterSpacing:'0.1em' }}>Con DrVet.app</div>
              <div className="mono" style={{ fontSize:10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.1em', textAlign:'right' }}>Δ</div>
            </div>
            {beforeAfter.map((r,i)=>(
              <div key={i} style={{
                padding:'18px 24px',
                display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 0.9fr', gap:16,
                alignItems:'center',
                borderBottom: i<beforeAfter.length-1 ? '1px solid var(--line-2)' : 'none'
              }}>
                <div style={{ fontSize:14, color:'var(--ink)', fontWeight:500 }}>{r.metric}</div>
                <div style={{ fontSize:14, color:'var(--muted)', textDecoration:'line-through' }}>{r.before}</div>
                <div className="serif" style={{ fontSize:20, color:'var(--primary)', fontWeight:500, letterSpacing:'-0.01em' }}>{r.after}</div>
                <div className="mono" style={{ fontSize:11, color:'var(--ok)', textAlign:'right', fontWeight:600 }}>{r.delta}</div>
              </div>
            ))}
            <div style={{
              padding:'14px 24px', background:'var(--accent-soft)',
              fontSize:12, color:'var(--ink-2)', fontStyle:'italic', textAlign:'center'
            }}>
              Promedio de 47 clínicas en 6 meses con DrVet.app
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px){ .roi-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
      `}</style>
    </section>
  );
};

window.ROISection = ROISection;