function StatsRow() {
  const ref = useReveal();
  const [active, setActive] = useState(false);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setActive(true); io.disconnect(); }
    }, { threshold: 0.4 });
    io.observe(node);
    return () => io.disconnect();
  }, []);

  const stats = [
    { num: 61,    label: 'Años de\ntrayectoria',     icon: 'assets/icons/maestria.svg',    color: 'blue'   },
    { num: 1472,  label: 'Estudiantes',              icon: 'assets/icons/estudiantes.svg', color: 'red'    },
    { num: 30,    label: 'Docentes',                 icon: 'assets/icons/profesor.svg',    color: 'orange' },
    { num: 25000, label: 'Egresados',                icon: 'assets/icons/graduado.svg',    color: 'green'  },
    { num: 4,     label: 'Niveles\nacadémicos',      icon: 'assets/icons/documentos.svg',  color: 'blue'   },
  ];

  return (
    <section ref={ref} className="cmgs-stats reveal">
      <div className="cmgs-stats-bg" />
      <div className="container">
        <div className="cmgs-stats-row">
          {stats.map((s, i) => <Stat key={i} {...s} trigger={active} />)}
        </div>
      </div>

      <style>{`
        .cmgs-stats {
          position: relative;
          background: var(--navy-800);
          padding: 56px 0;
          overflow: hidden;
        }
        .cmgs-stats-bg {
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse at 20% 0%, rgba(74,120,200,0.18), transparent 50%),
            radial-gradient(ellipse at 90% 100%, rgba(212,160,42,0.10), transparent 50%);
          opacity: 0.9;
        }
        .cmgs-stats-row {
          position: relative;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 16px;
          align-items: stretch;
        }
        @media (max-width: 760px) {
          .cmgs-stats-row { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </section>
  );
}

function Stat({ num, label, icon, color, trigger }) {
  const v = useCounter(num, 1600, trigger);
  const formatted = num >= 1000 ? formatNumber(v).replace(/,/g, '.') : v;
  return (
    <div className={`cmgs-stat cmgs-stat-${color}`}>
      <div className="cmgs-stat-ring">
        <img src={icon} alt="" className={`icon-img ${color}`} width="36" height="36" loading="lazy" decoding="async" />
      </div>
      <div className="cmgs-stat-num">{formatted}</div>
      <div className="cmgs-stat-label">{label.split('\n').map((l,i) => <div key={i}>{l}</div>)}</div>
      <style>{`
        .cmgs-stat { display:flex; flex-direction:column; align-items:center; text-align:center; gap: 12px; padding: 12px 8px; }
        .cmgs-stat-ring {
          width: 76px; height: 76px; border-radius: 999px;
          border: 1.5px solid rgba(255,255,255,0.22);
          display:flex; align-items:center; justify-content:center;
          transition: all 280ms var(--ease-out);
          background: rgba(255,255,255,0.02);
        }
        .cmgs-stat-ring:hover {
          transform: scale(1.06);
          border-color: var(--gold-500);
          box-shadow: 0 0 0 5px rgba(212,160,42,0.18), 0 8px 24px rgba(0,0,0,0.3);
        }
        .cmgs-stat-num {
          font: 700 clamp(34px, 3.4vw, 48px)/1 var(--font-display);
          letter-spacing: 0; margin-top: 2px;
        }
        .cmgs-stat-label {
          font: 600 10px/1.3 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
          color: rgba(255,255,255,0.78);
        }
        .cmgs-stat-blue .cmgs-stat-num   { color: var(--stat-blue); }
        .cmgs-stat-red .cmgs-stat-num    { color: var(--stat-red); }
        .cmgs-stat-orange .cmgs-stat-num { color: var(--stat-orange); }
        .cmgs-stat-green .cmgs-stat-num  { color: var(--stat-green); }
      `}</style>
    </div>
  );
}

Object.assign(window, { StatsRow, Stat });