/* global React */
const { useEffect, useRef, useState } = React;

function useReveal() {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setVisible(true);
          io.disconnect();
        }
      });
    }, { threshold: 0.18 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, visible];
}

function CountUp({ from = 40, to = 80, suffix = '%', duration = 1200 }) {
  const [ref, visible] = useReveal();
  const [val, setVal] = useState(from);
  useEffect(() => {
    if (!visible) return;
    const start = performance.now();
    let raf;
    const step = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(from + (to - from) * eased));
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [visible, from, to, duration]);
  return <span ref={ref}>{val}{suffix}</span>;
}

function Stat() {
  const [ref, visible] = useReveal();
  return (
    <section className="section stat-section" id="impacto">
      <div className="container">
        <div ref={ref} className={'stat-grid reveal' + (visible ? ' is-visible' : '')}>
          <div className="stat-eyebrow">
            <span className="eyebrow">Por qué importa</span>
          </div>

          <h2 className="display stat-headline">
            Un GPS multiplica las probabilidades de recuperar tu vehículo.
          </h2>

          <div className="stat-bigblock">
            <div className="stat-bar">
              <div className="stat-bar-row">
                <div className="stat-bar-label">
                  <span className="mono">Sin GPS</span>
                  <span className="stat-bar-num display"><CountUp from={0} to={46} duration={1400} />%</span>
                </div>
                <div className="stat-bar-track">
                  <div className={'stat-bar-fill stat-bar-fill--bad' + (visible ? ' grow' : '')} style={{ '--w': '46%' }} />
                </div>
                <div className="stat-bar-cap mono">tasa de recuperación en México</div>
              </div>
              <div className="stat-bar-row">
                <div className="stat-bar-label">
                  <span className="mono">Con GPS</span>
                  <span className="stat-bar-num display"><CountUp from={0} to={80} duration={1600} />%</span>
                </div>
                <div className="stat-bar-track">
                  <div className={'stat-bar-fill stat-bar-fill--good' + (visible ? ' grow' : '')} style={{ '--w': '80%' }} />
                </div>
                <div className="stat-bar-cap mono">tasa de recuperación con rastreo activo</div>
              </div>
            </div>

            <div className="stat-side">
              <p>
                Los vehículos con rastreo satelital se recuperan en rangos <strong>superiores al 70–80%</strong>, frente al 40–46% de unidades sin tecnología de monitoreo.
              </p>
              <p className="stat-side-sub">
                En Setza no vendemos cajas: instalamos, monitoreamos y respondemos. Cada minuto cuenta y por eso operamos 24/7.
              </p>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .stat-section {
          background:
            linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .stat-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 36px;
        }
        .stat-eyebrow { display: flex; gap: 12px; align-items: center; }
        .stat-headline {
          font-size: clamp(36px, 4.6vw, 64px);
          margin: 0;
          max-width: 22ch;
          font-weight: 500;
          letter-spacing: -0.025em;
        }
        .stat-bigblock {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 56px;
          margin-top: 24px;
        }
        @media (max-width: 900px) {
          .stat-bigblock { grid-template-columns: 1fr; gap: 32px; }
        }
        .stat-bar { display: flex; flex-direction: column; gap: 28px; }
        .stat-bar-row { display: flex; flex-direction: column; gap: 10px; }
        .stat-bar-label {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 12px;
        }
        .stat-bar-label .mono { color: var(--ink-mute); }
        .stat-bar-num {
          font-size: clamp(48px, 6vw, 84px);
          font-weight: 600;
          letter-spacing: -0.03em;
          color: var(--ink);
        }
        .stat-bar-track {
          height: 14px;
          background: var(--bg-3);
          border: 1px solid var(--line);
          border-radius: 999px;
          overflow: hidden;
          position: relative;
        }
        .stat-bar-fill {
          width: 0%;
          height: 100%;
          border-radius: inherit;
          transition: width 1.6s cubic-bezier(.6,.05,.2,1);
        }
        .stat-bar-fill.grow { width: var(--w); }
        .stat-bar-fill--bad  { background: linear-gradient(90deg, var(--peach-deep), var(--signal)); }
        .stat-bar-fill--good { background: linear-gradient(90deg, var(--petrol), var(--petrol-bright)); }
        .stat-bar-cap { color: var(--ink-mute); font-size: 11px; }
        .stat-side p {
          font-size: 17px;
          color: var(--ink-2);
          line-height: 1.55;
          margin: 0 0 16px;
          text-wrap: pretty;
        }
        .stat-side strong { color: var(--ink); font-weight: 600; }
        .stat-side-sub { font-size: 14px !important; color: var(--ink-mute) !important; }
      `}</style>
    </section>
  );
}

window.Stat = Stat;
window.useReveal = useReveal;