// Bloque 7 — PLAN: 5 pasos en timeline horizontal
const HomePlan = () => {
  const steps = [
    { n: '01', t: 'Diagnóstico cognitivo',   d: 'Mapa de decisiones, datos y sistemas. Casos candidatos priorizados.', dur: '2 – 3 semanas' },
    { n: '02', t: 'Piloto productivo',        d: 'SDM entrenado sobre datos reales, integrado a un caso crítico.',      dur: '8 – 12 semanas' },
    { n: '03', t: 'Escalamiento',             d: 'Nuevos casos, nuevos motores. La cognición cubre más operación.',    dur: '3 – 6 meses' },
    { n: '04', t: 'Cognición continua',       d: 'Reentrenamiento, gobernanza, incremento de niveles de autonomía.',   dur: 'Continuo' },
    { n: '05', t: 'Transferencia de control', d: 'Certificamos a tu equipo. Te entregamos las llaves operativas.',      dur: 'Cuando digas' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128, borderTop: '1px solid #E4EBF3' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 72, alignItems: 'end' }}>
          <div>
            <Reveal>
              <SectionMeta n="04" label="El plan"/>
            </Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
                Cinco pasos. Un solo destino: <span style={{ color: '#F4024C' }}>que la operes tú</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              No es una consultoría eterna. Es una ruta con hitos operativos definidos, entregables
              medibles y un cierre claro: el día que tu equipo puede operar sin nosotros.
            </p>
          </Reveal>
        </div>

        {/* Timeline horizontal con línea técnica */}
        <div style={{ position: 'relative' }}>
          {/* línea horizontal fondo */}
          <div style={{
            position: 'absolute', top: 42, left: '5%', right: '5%',
            height: 1.5, background: '#E4EBF3',
          }}/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative' }}>
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 120}>
                <div style={{
                  padding: '0 16px',
                  borderRight: (i < 4) ? '1px dashed #E4EBF3' : 'none',
                  paddingRight: 16,
                }}>
                  {/* nodo circular */}
                  <div style={{
                    width: 32, height: 32, border: '1.5px solid #1E1F26',
                    background: i === 4 ? '#F4024C' : '#FFFFFF',
                    borderColor: i === 4 ? '#F4024C' : '#1E1F26',
                    borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.05em',
                    color: i === 4 ? '#FFF' : '#1E1F26', marginBottom: 20,
                  }}>{s.n}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>
                    {s.dur}
                  </div>
                  <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em', color: '#000', margin: '0 0 10px', lineHeight: 1.2 }}>
                    {s.t}
                  </h4>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
                    {s.d}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { HomePlan });