// Bloques 12+13 — FAILURE/SUCCESS contrast + FINAL CTA
const HomeFailureSuccess = () => {
  const failure = [
    'La IA sigue "en piloto" tres años más.',
    'Cada consultora nueva reinicia el aprendizaje.',
    'Tus datos siguen entrenando modelos ajenos.',
    'Tu equipo apaga incendios en lugar de decidir.',
  ];
  const success = [
    'Tu IA opera decisiones críticas en producción.',
    'Tu equipo la controla, no la sufre.',
    'Tu operación decide más rápido y mejor cada mes.',
    'La ventaja competitiva vive dentro de tu empresa.',
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1px solid #E4EBF3', borderBottom: '1px solid #E4EBF3' }}>
      <Container>
        <Reveal>
          <SectionMeta n="09" label="Los dos futuros"/>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 72px', color: '#000', maxWidth: 920 }}>
            Elige antes de que la industria lo elija por ti.
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
          {/* Failure */}
          <Reveal delay={140}>
            <div style={{ padding: '40px 40px 40px 0', borderRight: '1px solid #C7CFDA' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 16 }}>
                Si no actúas
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 32, letterSpacing: '-0.02em', color: '#52557A', margin: '0 0 28px', lineHeight: 1.15 }}>
                Lo que sigue.
              </h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
                {failure.map((f) => (
                  <li key={f} style={{
                    display: 'flex', gap: 14, alignItems: 'baseline',
                    fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: '#52557A',
                  }}>
                    <span style={{ color: '#96A3B5', fontFamily: 'var(--font-mono)', fontSize: 14 }}>—</span>
                    <span style={{ textDecoration: 'line-through', textDecorationColor: '#C7CFDA' }}>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
          {/* Success */}
          <Reveal delay={220}>
            <div style={{ padding: '40px 0 40px 40px' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 16 }}>
                Con cognición propia
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 32, letterSpacing: '-0.02em', color: '#000', margin: '0 0 28px', lineHeight: 1.15 }}>
                Lo que se vuelve posible.
              </h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
                {success.map((s) => (
                  <li key={s} style={{
                    display: 'flex', gap: 14, alignItems: 'baseline',
                    fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: '#1E1F26',
                  }}>
                    <span style={{ color: '#F4024C', fontFamily: 'var(--font-mono)', fontSize: 14 }}>+</span>
                    <span>{s}</span>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
};

const HomeFinalCTA = () => (
  <section style={{
    background: '#000', color: '#FFF', paddingTop: 160, paddingBottom: 160,
    position: 'relative', overflow: 'hidden',
  }}>
    {/* Trazo fuxia convergente */}
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.5 }} viewBox="0 0 1440 800" preserveAspectRatio="none">
      <g stroke="#F4024C" strokeWidth="1" fill="none" opacity="0.35">
        <path d="M 0 200 Q 400 400 720 400" className="omnix-flow-dash"/>
        <path d="M 1440 200 Q 1040 400 720 400" className="omnix-flow-dash"/>
        <path d="M 0 600 Q 400 400 720 400" className="omnix-flow-dash"/>
        <path d="M 1440 600 Q 1040 400 720 400" className="omnix-flow-dash"/>
      </g>
      <circle cx="720" cy="400" r="6" fill="#F4024C"/>
      <circle cx="720" cy="400" r="24" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.4"/>
      <circle cx="720" cy="400" r="48" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.15"/>
    </svg>

    <Container narrow>
      <div style={{ position: 'relative', textAlign: 'center' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 24 }}>
            — Solicitar diagnóstico cognitivo —
          </div>
        </Reveal>
        <Reveal delay={100}>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            fontSize: 88, lineHeight: 0.98, letterSpacing: '-0.03em',
            margin: '0 0 32px', color: '#FFF',
          }}>
            De cognición<br/>a acción autónoma.
          </h2>
        </Reveal>
        <Reveal delay={180}>
          <p style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.5,
            color: '#96A3B5', maxWidth: 640, margin: '0 auto 40px',
          }}>
            Un experto en cognición operacional te contactará en menos de 24 horas hábiles.
            Sin bots. Sin presentación estándar. Sin obligación.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ display: 'inline-flex', gap: 12, alignItems: 'center' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico cognitivo</Button>
            <Button variant="ghost" dark icon="download" href="#">Descargar el Playbook</Button>
          </div>
        </Reveal>
        <Reveal delay={320}>
          <div style={{
            marginTop: 72, paddingTop: 32, borderTop: '1px solid #2E3140',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase',
          }}>
            <span>SOC 2 Type II · ISO 27001 · GDPR · LGPD</span>
            <span style={{ color: '#F4024C' }}>Tu operación · Tus datos · Tu inteligencia</span>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { HomeFailureSuccess, HomeFinalCTA });