// Problem section — emotional, editorial framing of "lost clients"

const Problem = () => {
  return (
    <section style={{ padding:'120px 0', background:'var(--bg-2)', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container">
        <SectionTag num="01" label="El problema" style={{ marginBottom: 32 }}/>
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:80 }} className="prob-grid">
          <div>
            <h2 className="serif" style={{
              fontSize:'clamp(36px, 4.5vw, 56px)', lineHeight:1.02,
              letterSpacing:'-0.02em', fontWeight:400, margin:0, textWrap:'balance'
            }}>
              El <span style={{ fontStyle:'italic', color:'var(--warn)' }}>62%</span> de los tutores
              que visitan tu clínica una vez,<br/>nunca regresan.
            </h2>
            <p style={{ marginTop:24, fontSize:17, color:'var(--ink-2)', lineHeight:1.55, maxWidth:480 }}>
              No es porque tu atención sea mala. Es porque después de la consulta,
              el contacto se rompe. Sin recordatorios. Sin seguimiento. Sin la siguiente cita ya en su agenda.
            </p>
            <p style={{ marginTop:16, fontSize:17, color:'var(--ink-2)', lineHeight:1.55, maxWidth:480 }}>
              Cada cliente perdido es un ingreso recurrente que se evapora —
              y un paciente que crece sin control veterinario continuo.
            </p>
          </div>

          <div style={{ display:'grid', gap:14 }}>
            {[
              { n:'62%', l:'no vuelve después de la primera visita', s:'Industria veterinaria, 2024' },
              { n:'$1.840', l:'LTV promedio de un cliente fiel a 5 años', s:'vs. $180 de visita única' },
              { n:'5×', l:'más caro adquirir que retener un cliente', s:'Costo de marketing + descuentos' },
              { n:'73%', l:'de tutores quieren recordatorios por WhatsApp', s:'Encuesta tutores LATAM 2025' },
            ].map((s,i) => (
              <div key={i} style={{
                background:'#fff', border:'1px solid var(--line)',
                borderRadius:12, padding:'18px 22px',
                display:'grid', gridTemplateColumns:'120px 1fr', gap:20, alignItems:'baseline'
              }}>
                <div className="serif" style={{
                  fontSize:42, fontWeight:400, lineHeight:1,
                  color: i===0 ? 'var(--warn)' : 'var(--ink)', letterSpacing:'-0.02em'
                }}>{s.n}</div>
                <div>
                  <div style={{ fontSize:14, color:'var(--ink)', fontWeight:500 }}>{s.l}</div>
                  <div className="mono" style={{ fontSize:10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.06em', marginTop:4 }}>{s.s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){ .prob-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }
      `}</style>
    </section>
  );
};

window.Problem = Problem;