// Activa Soluciones — Stats band
// Deep brand gradient + trajectory pattern, 4 large KPI numbers.

const Stats = () => {
  const items = [
    { v: '+38%',   l: 'crecimiento promedio en ventas para clientes activos durante 2025' },
    { v: 'S/240M', l: 'EBITDA generado para clientes acumulado desde 2018' },
    { v: '90d',    l: 'días promedio entre el diagnóstico y el primer resultado medible' },
    { v: '42',     l: 'grandes marcas operando hoy con Activa en Perú, Chile y México' },
  ];
  return (
    <section className="section dark">
      <div className="container">
        <Reveal from="up"><span className="s-eyebrow">Lo que hemos movido</span></Reveal>
        <Reveal from="up" delay={80}>
          <h2 className="s-title">Resultados que llegan al <span className="accent">P&amp;L</span>.</h2>
        </Reveal>
        <div className="stats-grid">
          {items.map((it, i) => (
            <Reveal key={i} from="right" delay={i * 120}>
              <div className="stat">
                <div className="stat-line"></div>
                <div className="stat-num"><CountUp value={it.v} /></div>
                <div className="stat-lbl">{it.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .stats-grid {
          margin-top: 56px;
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
          align-items: stretch;
        }
        .stats-grid > .reveal { display: flex; }
        .stats-grid > .reveal > .stat { flex: 1; }
        @media (max-width: 880px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
        .stat {
          padding: 28px 24px;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 14px;
          position: relative; overflow: hidden;
          backdrop-filter: blur(2px);
          transition: all 220ms var(--ease-rise);
          display: grid;
          grid-template-rows: auto 1fr;
          row-gap: 16px;
        }
        .stat:hover { background: rgba(255,255,255,0.07); transform: translateY(-3px); }
        .stat-line {
          position: absolute; top: 22px; right: 14px;
          width: 38px; height: 1px; background: var(--color-accent);
          transform: rotate(-30deg); transform-origin: right;
        }
        .stat-num {
          font-family: var(--font-display); font-weight: 800;
          color: var(--color-accent); line-height: 1;
          font-size: clamp(44px, 5vw, 64px);
          letter-spacing: -0.03em;
          font-variant-numeric: tabular-nums;
        }
        .stat-lbl {
          font-family: var(--font-body); font-size: 13px;
          line-height: 1.5; color: rgba(255,255,255,0.74);
          align-self: end;
        }
      `}</style>
    </section>
  );
};