// LiveCounter.jsx — "Tu negocio ahora mismo" urgency counter
const LiveCounter = () => {
  // Plausible baseline: ~120 PYME consultas off-hours / minute in CR.
  // We start from a realistic-looking number and tick it up.
  const [received, setReceived] = React.useState(2847);
  const [lost, setLost] = React.useState(1993);
  const [seconds, setSeconds] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setReceived(r => r + Math.floor(Math.random() * 3) + 1);
      setLost(l => l + Math.floor(Math.random() * 2) + 1);
      setSeconds(s => s + 1);
    }, 1800);
    return () => clearInterval(id);
  }, []);

  const fmt = (n) => n.toLocaleString('es-CR');

  return (
    <section className="s live-counter" id="ahora">
      <div className="container">
        <div className="lc-grid">
          <div className="lc-copy">
            <div className="s-eyebrow">Ahora mismo · Costa Rica</div>
            <h2 className="s-title">Mientras leés esto, <span className="acc">tu competencia pierde clientes.</span></h2>
            <p className="s-sub">Datos en tiempo real desde que abriste la página. Cada segundo que pasa, alguien escribe a un negocio que no contesta.</p>

            <div className="lc-meter">
              <div className="lc-meter-bar">
                <div className="lc-meter-fill" style={{width: `${(lost/received)*100}%`}}></div>
              </div>
              <div className="lc-meter-label">
                <span><strong>{Math.round((lost/received)*100)}%</strong> de las consultas no recibe respuesta</span>
                <span className="lc-since">desde hace {Math.floor(seconds*1.8)}s en esta página</span>
              </div>
            </div>

            <a href="#precios" className="btn btn-primary lg" style={{marginTop:32}}>
              Que el mío no sea uno de esos <Icon name="arrow-right" size={16}/>
            </a>
          </div>

          <div className="lc-cards">
            <div className="lc-card lc-recv">
              <div className="lc-card-head">
                <span className="lc-pulse lc-pulse-blue"></span>
                <span className="lc-card-label">Mensajes recibidos por PYMEs en CR</span>
              </div>
              <div className="lc-num">{fmt(received)}</div>
              <div className="lc-foot">
                <Icon name="message-square" size={14}/>
                <span>WhatsApp · Instagram · web · llamadas perdidas</span>
              </div>
            </div>
            <div className="lc-card lc-lost">
              <div className="lc-card-head">
                <span className="lc-pulse lc-pulse-red"></span>
                <span className="lc-card-label">Sin respuesta · cliente que se va</span>
              </div>
              <div className="lc-num">{fmt(lost)}</div>
              <div className="lc-foot">
                <Icon name="user-minus" size={14}/>
                <span>fuera de horario · equipo saturado · canal ignorado</span>
              </div>
            </div>
            <div className="lc-card lc-bytec">
              <div className="lc-card-head">
                <span className="lc-pulse lc-pulse-green"></span>
                <span className="lc-card-label">Con BYTEC, en cambio</span>
              </div>
              <div className="lc-num lc-num-pct">100<em>%</em></div>
              <div className="lc-foot">
                <Icon name="check-circle-2" size={14}/>
                <span>respuesta automática en 2 segundos · 24/7 · todos los canales</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.LiveCounter = LiveCounter;