// Bloque 8 — DIFFERENTIATORS: 6 cards de contraste "esto es / esto no es"
const HomeDifferentiators = () => {
  const items = [
    { is: 'Cognición propietaria.', isnot: 'No es un LLM genérico con RAG.' },
    { is: 'Ejecución operacional.',  isnot: 'No es un dashboard más.' },
    { is: 'Razonamiento determinístico auditable.', isnot: 'No es un chatbot que "cree".' },
    { is: 'VPC privada, on-premise o air-gapped.',  isnot: 'No es una API pública que ve tus datos.' },
    { is: 'Decisiones críticas.',    isnot: 'No es RPA reemplazando teclas.' },
    { is: 'Transferencia al cliente.', isnot: 'No es lock-in eterno.' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1px solid #E4EBF3', borderBottom: '1px solid #E4EBF3' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 72, alignItems: 'end' }}>
          <div>
            <Reveal>
              <SectionMeta n="05" label="Qué nos separa"/>
            </Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
                Seis diferencias que no son de <span style={{ color: '#F4024C' }}>marketing</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
              La velocidad se compra. La cognición institucional se construye.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map((c, i) => (
            <Reveal key={c.is} delay={i * 80}>
              <div style={{
                background: '#FFFFFF', border: '1px solid #E4EBF3',
                padding: '28px 26px', minHeight: 200,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 20,
                transition: 'border-color 160ms, transform 160ms',
                position: 'relative',
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = '#1E1F26'}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>
                  ES · NO ES
                </div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
                    <span style={{ color: '#F4024C', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600 }}>+</span>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#000', lineHeight: 1.2 }}>
                      {c.is}
                    </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                    <span style={{ color: '#96A3B5', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600 }}>—</span>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#52557A', lineHeight: 1.4, textDecoration: 'line-through', textDecorationColor: '#C7CFDA' }}>
                      {c.isnot}
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { HomeDifferentiators });