// Bloque 6 — GUIDE (empathy + authority, dos columnas editoriales)
const HomeGuide = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal>
        <SectionMeta n="03" label="Quién guía este viaje"/>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, marginTop: 24 }}>
        {/* Empathy */}
        <Reveal delay={80}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 20 }}>
              — Empatía
            </div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 40, lineHeight: 1.08, letterSpacing: '-0.02em',
              margin: '0 0 24px', color: '#000',
            }}>
              Sabemos por qué te frenaste.
            </h3>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.6, color: '#1E1F26' }}>
              <p style={{ margin: '0 0 18px' }}>
                Ya viste demos brillantes que después no ejecutan. Firmaste con hyperscalers que
                exigen migrar antes de operar. Contrataste consultoras que te dejan una presentación
                y se van.
              </p>
              <p style={{ margin: 0 }}>
                Y mientras tanto, tu operación sigue dependiendo de personas repitiendo decisiones
                que una IA propia debería estar tomando por sí sola.
              </p>
            </div>
          </div>
        </Reveal>

        {/* Authority */}
        <Reveal delay={160}>
          <div style={{ background: '#000', color: '#FFF', padding: '40px 36px', border: '1.5px solid #000' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 20 }}>
              — Autoridad
            </div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 40, lineHeight: 1.08, letterSpacing: '-0.02em',
              margin: '0 0 32px', color: '#FFF',
            }}>
              Ya lo hicimos.<br/>En operación real.
            </h3>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 28 }}>
              {[
                { n: '600M+', l: 'Transacciones procesadas' },
                { n: '8', l: 'Países en producción' },
                { n: '6 mo', l: 'ROI medio', accent: true },
                { n: '24/7', l: 'SLA operativo' },
              ].map((k) => (
                <div key={k.l} style={{ borderTop: '1px solid #2E3140', paddingTop: 14 }}>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 36, lineHeight: 1,
                    letterSpacing: '-0.03em', color: k.accent ? '#F4024C' : '#FFF',
                  }}>{k.n}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginTop: 6 }}>{k.l}</div>
                </div>
              ))}
            </div>
            <div style={{ borderTop: '1px solid #2E3140', paddingTop: 16, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.06em' }}>
              Banca · Telco · Retail · Logística · Minería · Energía · Manufactura · Gobierno
            </div>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { HomeGuide });