// Bloque 11 — CREDIBILITY: logo bar + 3 casos anonimizados en formato historia
const HomeCases = () => {
  const cases = [
    {
      tag: 'GOBIERNO LATAM',
      country: 'Cono Sur',
      title: 'Un ministerio dejó de perder ventanas operativas.',
      body: 'Reemplazaron 14 dashboards por un runtime que decide prioridad de incidentes. Los coordinadores dejaron de leer alertas: hoy autorizan decisiones que el sistema ya preparó.',
      kpi: '−58% MTTR',
      kpiLabel: 'en incidentes operacionales',
    },
    {
      tag: 'eCOMMERCE · TOP 10',
      country: 'Iberia',
      title: 'Su cadena reaccionó antes que su equipo se enterara.',
      body: 'Cada disrupción en supply-chain pasó de 3 días de análisis manual a re-ruteo automático. El equipo se enfoca en los picos que la cognición marca como "requiere criterio humano".',
      kpi: '−72% tiempo',
      kpiLabel: 'de resolución supply',
    },
    {
      tag: 'DISTRIBUIDOR B2B',
      country: 'Multi-país',
      title: 'Cerraron el año con la mitad de las horas humanas.',
      body: 'Cotizaciones, alocación, riesgo crediticio y postventa: ahora las decide una SDM entrenada sobre su histórico. El equipo comercial pasó de tramitar a acompañar clientes.',
      kpi: '−48%',
      kpiLabel: 'horas humanas por decisión',
    },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128, borderTop: '1px solid #E4EBF3' }}>
      <Container>
        {/* Logo bar */}
        <div style={{ borderBottom: '1.5px solid #1E1F26', paddingBottom: 40, marginBottom: 80 }}>
          <Reveal>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#96A3B5', marginBottom: 24 }}>
              Ya operan con su propia cognición — 8 países
            </div>
          </Reveal>
          <Reveal delay={80}>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0,
              borderTop: '1px solid #E4EBF3', borderBottom: '1px solid #E4EBF3',
            }}>
              {['ATLAS BANCA', 'CENTRAL·GRID', 'NORDEX MINING', 'PACÍFICO RETAIL', 'CORREDOR LOG', 'IBERPHARMA'].map((l, i) => (
                <div key={l} style={{
                  height: 88, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  borderRight: (i < 5) ? '1px solid #E4EBF3' : 'none',
                  fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
                  color: '#52557A', letterSpacing: '0.08em',
                }}>{l}</div>
              ))}
            </div>
          </Reveal>
        </div>

        {/* Encabezado sección casos */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 56, alignItems: 'end' }}>
          <div>
            <Reveal>
              <SectionMeta n="08" label="Historias en producción"/>
            </Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
                Casos reales. Nombres <span style={{ color: '#F4024C' }}>anonimizados</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Publicamos casos como se leen en <em>The Economist</em>: sin logos brillantes, sin cifras
              inflables. Solo qué cambió, cómo se midió y qué queda operando después de nosotros.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {cases.map((c, i) => (
            <Reveal key={c.tag} delay={i * 120}>
              <article style={{
                border: '1px solid #E4EBF3', padding: 0, minHeight: 400,
                display: 'flex', flexDirection: 'column',
                transition: 'border-color 200ms, transform 200ms',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#1E1F26'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#E4EBF3'; }}>
                {/* Imagen placeholder documental */}
                <div style={{
                  height: 160, background: '#1E1F26',
                  position: 'relative', overflow: 'hidden',
                  backgroundImage: `
                    linear-gradient(135deg, transparent 45%, rgba(244,2,76,0.08) 50%, transparent 55%),
                    linear-gradient(#2E3140 1px, transparent 1px),
                    linear-gradient(90deg, #2E3140 1px, transparent 1px)
                  `,
                  backgroundSize: '100% 100%, 24px 24px, 24px 24px',
                }}>
                  <div style={{
                    position: 'absolute', top: 12, left: 14,
                    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase',
                  }}>
                    CASE · 0{i + 1}
                  </div>
                  <div style={{
                    position: 'absolute', bottom: 12, right: 14,
                    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase',
                  }}>
                    {c.country}
                  </div>
                </div>
                <div style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
                  <Badge tone="outline">{c.tag}</Badge>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', lineHeight: 1.2, margin: 0 }}>
                    {c.title}
                  </h3>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 15, lineHeight: 1.55, color: '#52557A', margin: 0, flex: 1 }}>
                    {c.body}
                  </p>
                  <div style={{ borderTop: '1px solid #E4EBF3', paddingTop: 14, display: 'flex', alignItems: 'baseline', gap: 10 }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, letterSpacing: '-0.025em', color: '#F4024C', lineHeight: 1 }}>
                      {c.kpi}<ValidateMark/>
                    </span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: '#52557A' }}>
                      {c.kpiLabel}
                    </span>
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { HomeCases });