// Pains.jsx — 3 dolores reales de PYMEs en CR
const Pains = () => {
  const items = [
    { hour: '02:13', icon: 'phone-missed', q: 'Cliente pregunta por WhatsApp a las 2am, nadie responde.', a: 'BYTEC responde en <strong>2 segundos</strong>, agenda la cita y notifica al equipo en la mañana.' },
    { hour: '12:47', icon: 'users-round', q: 'Tu equipo pasa horas contestando lo mismo: precios, horarios, ubicación.', a: 'El bot resuelve el <strong>80% de consultas</strong> repetitivas. Tu gente atiende lo importante.' },
    { hour: '18:30', icon: 'mouse-pointer-click', q: 'Tu web tiene 5 años, no convierte y nadie la encuentra en Google.', a: 'Web nueva con SEO + chatbot integrado. <strong>Más visitas, más cierres.</strong>' },
  ];
  return (
    <section className="s pain-strip alt" id="dolor">
      <div className="container">
        <div className="s-head">
          <div className="left">
            <div className="s-eyebrow">El problema</div>
            <h2 className="s-title">Cada minuto que tu negocio no responde, <span style={{color:'var(--danger)'}}>se va un cliente.</span></h2>
            <p className="s-sub">Vivimos en la economía del WhatsApp. La gente pregunta cuando puede — y compra a quien le contesta primero.</p>
          </div>
          <div className="right">
            En Costa Rica, 7 de cada 10 consultas a PYMEs llegan fuera de horario laboral. La mayoría no recibe ni una respuesta.
          </div>
        </div>
        <div className="pain-grid">
          {items.map((p, i) => (
            <div key={i} className="pain">
              <div className="clock">{p.hour}</div>
              <div className="ic-circle"><Icon name={p.icon} size={22}/></div>
              <h3>{p.q}</h3>
              <p className="res" dangerouslySetInnerHTML={{__html: p.a}} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Pains = Pains;