// Bloque 3 — MÉTRICAS BAR (fondo negro editorial, contraste sobre blanco)
const HomeMetrics = () => {
  const kpis = [
    { n: 65, prefix: '−', suffix: '%', l: 'MTTR' },
    { n: 40, prefix: '−', suffix: '%', l: 'Costo por decisión' },
    { n: 30, prefix: '+', suffix: '%', l: 'Precisión' },
    { n: 75, prefix: '',  suffix: '%', l: 'Decisiones automáticas' },
  ];
  return (
    <section style={{ background: '#000', color: '#FFF', paddingTop: 72, paddingBottom: 72 }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid #2E3140' }}>
          {kpis.map((k, i) => (
            <Reveal key={k.l} delay={i * 120}>
              <div style={{
                padding: '36px 24px 24px',
                borderRight: (i < 3) ? '1px solid #2E3140' : 'none',
                display: 'flex', flexDirection: 'column', gap: 12, minHeight: 180,
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 800,
                  fontSize: 88, lineHeight: 0.9, letterSpacing: '-0.035em',
                  color: '#FFF', fontVariantNumeric: 'tabular-nums',
                }}>
                  <CountUp to={k.n} prefix={k.prefix} suffix={k.suffix} duration={1600}/>
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase',
                }}>{k.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <div style={{
          marginTop: 32, display: 'flex', justifyContent: 'flex-end', alignItems: 'center', flexWrap: 'wrap', gap: 16,
          fontFamily: 'var(--font-mono)', fontSize: 11, color: '#7A7F95', letterSpacing: '0.06em',
        }}>
          <span style={{ color: '#96A3B5' }}>ROI en 6 meses · MTTR reducido en producción · Base 600M+ transacciones</span>
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { HomeMetrics });