// Bloque 4 — PROBLEM (3 columnas editorial, fondo blanco)
const HomeProblem = () => {
  const cols = [
    {
      k: 'EXTERNO',
      t: 'Tus datos viven en decenas de sistemas.',
      d: 'Tus alertas se acumulan. Tu IA genérica responde con lenguaje bonito, pero no ejecuta. La orquestación depende de personas apagando incendios.',
    },
    {
      k: 'INTERNO',
      t: 'Tu equipo apaga incendios.',
      d: 'El board pide resultados de IA. La sensación de dependencia crece con cada proveedor externo que "entiende tu operación mejor que tú".',
    },
    {
      k: 'FILOSÓFICO',
      t: 'La inteligencia con la que operas debería ser tuya.',
      d: 'No rentada, no compartida, no dependiente de una API extranjera. Tuya. Vive donde tú decides, se rige por tus reglas, opera para ti.',
    },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ marginBottom: 72, maxWidth: 900 }}>
          <Reveal>
            <SectionMeta n="01" label="El diagnóstico"/>
          </Reveal>
          <Reveal delay={80}>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em',
              margin: '0 0 24px', color: '#000',
            }}>
              El problema no es la IA. Es de <span style={{ color: '#F4024C' }}>quién</span> es la inteligencia.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.4, color: '#52557A', maxWidth: 720, margin: 0 }}>
              Compraste IA. Contrataste consultoras. Firmaste con hyperscalers. Y aún así, la inteligencia
              que decide sobre tu operación no te pertenece.
            </p>
          </Reveal>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          borderTop: '1.5px solid #1E1F26',
        }}>
          {cols.map((c, i) => (
            <Reveal key={c.k} delay={i * 120}>
              <div style={{
                padding: '36px 32px 40px',
                borderRight: (i < 2) ? '1px solid #E4EBF3' : 'none',
                minHeight: 320,
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20,
                }}>{c.k}</div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 28, lineHeight: 1.15, letterSpacing: '-0.02em',
                  color: '#000', margin: '0 0 20px',
                }}>{c.t}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: '#52557A', margin: 0 }}>
                  {c.d}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { HomeProblem });