// MANIFIESTO · Modelo de trabajo · Renuncia · Transferencia · Manifiesto central · FAQ · CTA

// MODELO DE TRABAJO · 5 pasos
const ManHowWeWork = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="07" label="Modelo de trabajo OMNIX" color="#F4024C"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            De una decisión crítica a una <span style={{ color: '#F4024C' }}>capacidad propia</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.5, color: '#52557A', margin: '0 0 12px' }}>
            No escalamos sin evidencia.
          </p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: '#52557A', margin: 0 }}>
            Cada piloto comienza con un caso de negocio, una línea base, KPIs medibles, gobierno explícito y un plan de transferencia. Si el piloto no demuestra valor · no se escala.
          </p>
        </Reveal>
      </div>

      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', top: 40, left: '5%', right: '5%', height: 1.5, background: '#E4EBF3' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, position: 'relative' }}>
          {[
            { n: '01', k: 'DIAGNOSTICAR', t: 'Identificar decisiones, disrupciones, datos, riesgos y caso de negocio.', dur: '2-3 sem' },
            { n: '02', k: 'CONSTRUIR',     t: 'Desarrollar un piloto productivo con integración, gobierno y KPIs.',      dur: '4-6 sem' },
            { n: '03', k: 'OPERAR',        t: 'Calibrar la capacidad con condiciones reales y resultados verificables.', dur: '4-6 sem' },
            { n: '04', k: 'ESCALAR',       t: 'Extender a nuevos dominios, decisiones, sistemas y equipos.',             dur: '3-6 meses' },
            { n: '05', k: 'TRANSFERIR',    t: 'Entregar runbooks, conocimiento, gobierno y control progresivo.',         dur: 'Cuando decida' },
          ].map((s, i) => (
            <SlideIn key={s.n} direction="up" delay={i * 100}>
              <div style={{ padding: '0 12px' }}>
                <div style={{
                  width: 80, height: 80, background: i === 4 ? '#F4024C' : '#FFF',
                  border: '1.5px solid #1E1F26',
                  borderColor: i === 4 ? '#F4024C' : '#1E1F26',
                  borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600, letterSpacing: '0.05em',
                  color: i === 4 ? '#FFF' : '#1E1F26', marginBottom: 20, position: 'relative', zIndex: 1,
                }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 6 }}>{s.dur}</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.015em', color: '#000', margin: '0 0 10px', lineHeight: 1.2 }}>{s.k}</h4>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.5, color: '#52557A', margin: 0 }}>{s.t}</p>
              </div>
            </SlideIn>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// LO QUE NO SEREMOS · renuncia estratégica
const ManRenounce = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="08" label="Lo que no seremos" color="#F4024C"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            También nos define aquello a lo que <span style={{ color: '#F4024C' }}>renunciamos</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.5, color: '#52557A', margin: 0, maxWidth: 780 }}>
            No queremos ser la empresa que más IA instala. Queremos ser la empresa que ayuda a las organizaciones críticas a construir una inteligencia propia, útil, gobernable y acumulativa.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {[
          'Una consultora generalista de IA',
          'Una plataforma horizontal para cualquier empresa',
          'Un proveedor de pilotos sin continuidad',
          'Un dashboard que solo observa',
          'Un chatbot corporativo',
          'Un modelo externo que concentra el control',
          'Una caja negra sin explicabilidad',
          'Un proyecto a medida sin posibilidad de repetición',
          'Un proveedor permanente del que no se puede independizar',
          'Una compañía que vende novedad antes que evidencia',
        ].map((n, i) => (
          <SlideIn key={n} direction="up" delay={i * 40}>
            <div style={{
              padding: '18px 22px', background: '#FAFBFD', border: '1px solid #E4EBF3',
              display: 'flex', gap: 14, alignItems: 'center',
            }}>
              <i data-lucide="x" width="18" height="18" style={{ color: '#EA384C', strokeWidth: 2, flexShrink: 0 }}/>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#1E1F26', lineHeight: 1.4 }}>{n}</span>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// TRANSFERENCIA DE CONTROL
const ManTransfer = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="09" label="Transferencia de control" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#FFF' }}>
              El éxito no es que dependa de nosotros.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', margin: '0 0 32px' }}>
              La transferencia no es el final del proyecto. Es parte del producto.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <Button variant="ghost" dark icon="arrow-right" href="transferencia.html">Conocer el modelo de transferencia</Button>
          </Reveal>
        </div>
        <div>
          <Reveal delay={100}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.6, color: '#FFF', margin: '0 0 24px', fontWeight: 500 }}>
              OMNIX diseña cada capacidad con un camino de transferencia. La organización recibe documentación, runbooks, reglas, gobierno, conocimiento y responsabilidades progresivas para operar y mejorar su cognición institucional.
            </p>
          </Reveal>
          <Reveal delay={160}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 16 }}>Qué se transfiere · [validar alcance contractual]</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
              {[
                'Arquitectura', 'Corpus', 'Modelos',
                'Reglas', 'Documentación', 'Runbooks',
                'Roles', 'Monitoreo', 'Gobierno',
                'Reentrenamiento', 'Excepciones', 'Continuidad',
              ].map((it) => (
                <div key={it} style={{ padding: '10px 12px', background: '#0A0B10', border: '1px solid #2E3140', display: 'flex', gap: 8, alignItems: 'center' }}>
                  <i data-lucide="check" width="12" height="12" style={{ color: '#F4024C', strokeWidth: 2, flexShrink: 0 }}/>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#FFF' }}>{it}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </section>
);

// MANIFIESTO CENTRAL · 3 versiones · pieza editorial continua
const ManCentral = () => {
  const [view, setView] = React.useState('completo');
  const views = {
    completo: {
      label: 'Versión completa · 700 palabras',
      body: [
        'Las organizaciones críticas han construido su capacidad durante décadas. Cada procedimiento, cada regla, cada decisión anterior, cada excepción, cada aprendizaje difícil forma parte de un capital que hoy vive fragmentado. En bases de datos que no se hablan entre sí. En sistemas que operan aislados. En personas cuya rotación erosiona la memoria institucional. En reglas de negocio no documentadas. En hojas de cálculo que sobreviven al tiempo.',
        'Ese capital es su activo estratégico real. Y hoy, cuando el mercado empuja a las organizaciones hacia la inteligencia artificial, algo importante ha comenzado a suceder: la capacidad de comprender la propia operación se está externalizando.',
        'Los modelos generalistas —útiles, potentes, versátiles— responden desde un contexto general. No comprenden las excepciones específicas de una operación, no razonan sobre las reglas particulares de un contrato enterprise, no distinguen la prioridad institucional entre dos alertas simultáneas. Y cada vez que una organización crítica entrega decisiones a esos modelos, transfiere una parte de su cognición.',
        'La primera generación de IA enterprise trajo dashboards que observan. Modelos que responden. Automatizaciones que ejecutan tareas repetitivas. Cada una útil en su alcance. Pero ninguna resuelve el problema estructural: la inteligencia con la que la organización razona sobre sus decisiones críticas sigue viviendo fuera de su perímetro, en modelos que otros entrenan y gobiernan.',
        'La segunda generación —la que OMNIX construye— reconoce que hay dos tipos de inteligencia. La inteligencia general, que es correcta arrendar. Y la inteligencia crítica, que debe pertenecer a quien decide.',
        'Un banco que decide sobre riesgo crediticio no debería depender de un modelo público para razonar sobre sus reglas de compliance. Una operación minera que evalúa mantenimiento en un activo crítico no debería confiar en un chatbot genérico para priorizar recursos. Una institución de salud pública que coordina camas ante un peak epidemiológico no debería subcontratar el razonamiento clínico. Un operador de telecomunicaciones que gestiona el NOC no debería tener su lógica de correlación entrenada en un modelo que también responde a competidores.',
        'La cognición operacional soberana es una categoría nueva. Es la capacidad de una organización para convertir sus datos, reglas, procesos y conocimiento en modelos propios que razonan, deciden y ejecutan · dentro de su perímetro autorizado · bajo su control institucional. Los datos permanecen. Los modelos pertenecen. La evolución es del cliente.',
        'Construir esa capacidad no es sencillo. Requiere ingeniería de datos rigurosa, arquitectura pensada para gobierno desde el primer día, integración vía APIs autorizadas con los sistemas existentes, definición explícita de niveles de autonomía, human-in-the-loop obligatorio en decisiones de impacto, logs firmados que resistan auditorías institucionales, y un plan de transferencia que empiece antes del piloto.',
        'Cada piloto que iniciamos comienza con una decisión crítica específica, una línea base firmada por operaciones y finanzas, un KPI acordado, un responsable institucional, y un plan de transferencia con hitos y entregables. Si el piloto no demuestra valor · no escalamos. Preferimos un piloto honesto que no avanza a un contrato multianual sin evidencia.',
        'La autonomía crece con la evidencia. Nunca al revés. En el nivel base, OMNIX observa. En el siguiente, recomienda con fundamento trazable. En el siguiente, ejecuta bajo aprobación humana. Sólo en decisiones recurrentes de bajo impacto, dentro de umbrales explícitamente aprobados, OMNIX ejecuta de forma automática · siempre con rollback armado y log firmado.',
        'La transferencia es contractual. No una promesa. Al cierre entregamos código, corpus, SDMs, gobierno del modelo, runbooks, capacitación y certificación interna. El cliente opera sin OMNIX si así lo decide. Sin cláusulas de reversibilidad que erosionen su autonomía.',
        'Sabemos lo que no somos. No somos la consultora que instala más IA. No somos la plataforma horizontal que funciona para cualquier empresa. No somos el proveedor de pilotos sin continuidad. No somos una caja negra. No somos un dependiente permanente. Renunciamos explícitamente a ser todo eso · porque cada renuncia protege el compromiso central.',
        'Construimos la inteligencia propia con la que su organización decide, ejecuta y aprende. Y desde el primer día, construimos también el camino para que el control permanezca en sus manos.',
      ],
    },
    ejecutiva: {
      label: 'Versión ejecutiva · 220 palabras',
      body: [
        'Las organizaciones críticas han acumulado durante años un conocimiento que hoy vive fragmentado entre datos, reglas, sistemas y personas. Ese capital es su activo estratégico real. No debería externalizarse a modelos genéricos que no comprenden su contexto específico.',
        'Existen dos tipos de inteligencia. La inteligencia general, que es correcta arrendar. Y la inteligencia crítica, que debe pertenecer a quien asume la responsabilidad de decidir.',
        'La cognición operacional soberana es la capacidad de una organización para convertir sus datos, reglas, procesos y conocimiento en modelos propios que razonan, deciden y ejecutan · dentro de su perímetro autorizado · bajo su control institucional.',
        'Cada piloto que iniciamos comienza con una decisión crítica específica, una línea base firmada, un KPI acordado, un responsable institucional y un plan de transferencia con hitos. Si el piloto no demuestra valor · no escalamos.',
        'La autonomía crece con la evidencia, nunca al revés. Las decisiones de alto impacto mantienen aprobación humana obligatoria. Las recurrentes de bajo impacto pueden ejecutarse dentro de umbrales aprobados · con rollback armado y log firmado.',
        'La transferencia es contractual, no una promesa. Al cierre entregamos código, corpus, modelos, gobierno, runbooks y capacitación. El cliente opera sin OMNIX si así lo decide.',
        'Construimos capacidad. No dependencia.',
      ],
    },
    breve: {
      label: 'Versión breve · 80 palabras',
      body: [
        'La inteligencia crítica de una organización debe pertenecerle a quien decide.',
        'OMNIX convierte datos, reglas, procesos y conocimiento institucional en modelos propios que razonan, ejecutan y aprenden dentro del perímetro autorizado del cliente.',
        'No escalamos sin evidencia. La autonomía crece con la evidencia. La transferencia se diseña desde el primer día.',
        'Construimos capacidad. No dependencia.',
      ],
    },
  };
  const current = views[view];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 40 }}>
          <Reveal><SectionMeta n="10" label="Manifiesto central" color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
              Construimos capacidad. <span style={{ color: '#F4024C' }}>No dependencia</span>.
            </h2>
          </Reveal>
        </div>

        {/* Selector de versión */}
        <div style={{ display: 'flex', gap: 0, marginBottom: 40, border: '1.5px solid #1E1F26' }}>
          {Object.entries(views).map(([k, v], i, arr) => (
            <button key={k} onClick={() => setView(k)} style={{
              flex: 1, padding: '14px 20px', border: 'none', cursor: 'pointer',
              background: view === k ? '#000' : '#FFF',
              color: view === k ? '#FFF' : '#1E1F26',
              borderRight: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none',
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
              textTransform: 'uppercase', transition: 'all 220ms',
            }}>{v.label}</button>
          ))}
        </div>

        {/* Texto editorial */}
        <div key={view} style={{
          background: '#FFF', border: '1.5px solid #1E1F26', padding: '56px 64px',
          animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
          maxWidth: 880, margin: '0 auto',
        }}>
          {current.body.map((p, i) => (
            <p key={i} style={{
              fontFamily: 'var(--font-serif)',
              fontSize: view === 'breve' ? 22 : 19,
              lineHeight: view === 'breve' ? 1.55 : 1.7,
              color: '#000',
              margin: '0 0 20px',
              fontStyle: i === 0 && view !== 'breve' ? 'normal' : 'normal',
              fontWeight: i === 0 || (view === 'breve' && i === 0) ? 600 : 400,
            }}>{p}</p>
          ))}
          {view === 'completo' && (
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase' }}>
              — Manifiesto OMNIX · Julio 2026 —
            </div>
          )}
        </div>
      </Container>
    </section>
  );
};

// FAQ · 10 preguntas visibles
const ManFAQ = () => {
  const items = [
    { q: '¿Qué es OMNIX?',
      a: 'OMNIX es una plataforma de cognición operacional soberana para organizaciones críticas. Convierte datos, reglas, procesos y conocimiento experto en modelos propios capaces de apoyar y ejecutar decisiones auditables sobre los sistemas existentes, con autonomía configurable y transferencia progresiva del control al equipo interno.' },
    { q: '¿Por qué OMNIX habla de inteligencia propietaria?',
      a: 'Porque distinguimos entre inteligencia general (correcta arrendar a proveedores públicos) e inteligencia crítica (la que razona sobre decisiones específicas de una organización). Esta última debe pertenecer a quien asume la responsabilidad de decidir. OMNIX construye esa segunda capa · propia, gobernable, evolutiva y transferible.' },
    { q: '¿Qué significa cognición operacional soberana?',
      a: 'Es la capacidad de una organización para convertir sus datos, reglas, procesos y conocimiento en modelos propios que razonan, deciden y ejecutan dentro de su perímetro autorizado. Soberana significa que el control (datos, corpus, modelos, versiones, permisos, actualizaciones y evolución) permanece dentro del perímetro institucional del cliente · sin telemetría hacia terceros.' },
    { q: '¿OMNIX reemplaza ERP, CRM, WMS, MES o SCADA?',
      a: 'No. OMNIX no reemplaza sistemas transaccionales ni operacionales existentes. Es una capa cognitiva que se integra vía APIs y conectores autorizados a la arquitectura del cliente, para correlacionar información, razonar sobre decisiones y ejecutar acciones coordinadas cross-sistema. Los sistemas existentes siguen operando.' },
    { q: '¿Qué diferencia a OMNIX de un LLM genérico?',
      a: 'Un LLM genérico responde desde un corpus público y general. OMNIX construye Specialized Domain Models (SDMs) entrenados sobre los datos, reglas, procesos y conocimiento específico del cliente. Los SDMs razonan de forma determinística, son compactos (menos de 20B parámetros típicos, ~13W de consumo), auditables, versionados y propiedad del cliente.' },
    { q: '¿Qué significa transferencia de control?',
      a: 'Es el proceso contractual mediante el cual el cliente adquiere progresivamente conocimiento, gobierno y capacidad operacional. Al cierre se entregan documentación, arquitectura, corpus, modelos SDM, runbooks, reglas, gobierno y capacitación. El cliente opera sin OMNIX si así lo decide. La transferencia es parte del producto · no una promesa posterior.' },
    { q: '¿Cómo se gobiernan las decisiones automatizadas?',
      a: 'Con cinco niveles graduables de autonomía. Nivel 1: monitoreo. Nivel 2: recomendación con fundamento. Nivel 3: ejecución asistida bajo aprobación humana. Nivel 4: ejecución automática dentro de umbrales aprobados. Nivel 5: coordinación compleja con approval flow jerárquico. Las decisiones sobre derechos, salud, sanciones, seguridad o alto costo mantienen aprobación humana obligatoria.' },
    { q: '¿Cómo comienza un proyecto con OMNIX?',
      a: 'Con un diagnóstico de 2-3 semanas sobre una decisión operacional específica, sus datos disponibles, sistemas involucrados, línea base actual y KPI acordado. Puede realizarse con datos no sensibles inicialmente. Si el diagnóstico no identifica un caso con ROI potencial · no avanzamos a piloto. Preferimos honestidad temprana a compromisos sin evidencia.' },
    { q: '¿Qué significa "no escalar sin evidencia"?',
      a: 'Significa que ningún piloto se convierte en despliegue productivo sin haber demostrado impacto medible en el KPI acordado. Cada piloto tiene línea base firmada por operaciones y finanzas del cliente. Si al cierre del piloto (8-12 semanas) no hay ROI verificable · el proyecto no se escala. Sin excepciones ni extensiones automáticas.' },
    { q: '¿Qué tipo de organizaciones son adecuadas para OMNIX?',
      a: 'Organizaciones críticas con operaciones complejas, sistemas fragmentados y conocimiento institucional acumulado: banca, telco, retail enterprise, minería, manufactura industrial, logística multi-nodo, energía, gobierno (excluyendo usos cinéticos) y defensa (sólo operaciones no cinéticas de apoyo). El común denominador: decisiones críticas que hoy dependen de coordinación manual entre sistemas.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="11" label="Preguntas frecuentes" color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
              Diez preguntas · diez respuestas directas.
            </h2>
          </Reveal>
        </div>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: (i < items.length - 1) ? '1px solid #E4EBF3' : 'none' }}>
              <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} aria-expanded={openIdx === i} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '18px 28px', display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 20, alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C' }}>Q · {String(i+1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em', color: '#000', lineHeight: 1.3 }}>{it.q}</span>
                <span aria-hidden="true" style={{ transition: 'transform 280ms', transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>
                  <i data-lucide="plus" width="18" height="18"></i>
                </span>
              </button>
              <div style={{ maxHeight: openIdx === i ? 340 : 0, overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ padding: '0 28px 22px 28px', display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20 }}>
                  <div/>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.65, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// CTA FINAL
const ManCTA = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128, position: 'relative', overflow: 'hidden' }}>
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.4 }} viewBox="0 0 1440 700" preserveAspectRatio="none" aria-hidden="true">
      <g stroke="#F4024C" strokeWidth="1" fill="none" opacity="0.35">
        <path d="M 0 200 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 200 Q 1040 350 720 350" className="omnix-flow-dash"/>
        <path d="M 0 500 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 500 Q 1040 350 720 350" className="omnix-flow-dash"/>
      </g>
      <circle cx="720" cy="350" r="6" fill="#F4024C"/>
      <circle cx="720" cy="350" r="24" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.4"/>
    </svg>
    <Container narrow>
      <div style={{ textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 24 }}>
            — Invitación final —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 68, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            Construya la inteligencia propia con la que su organización decide y ejecuta.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 720, margin: '0 auto 36px' }}>
            Comenzamos con una decisión, un caso de negocio, una línea base y un plan de transferencia.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'inline-flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico cognitivo</Button>
            <Button variant="ghost" dark icon="arrow-right" href="producto.html">Conocer cómo funciona OMNIX</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', display: 'flex', justifyContent: 'center', gap: 32, flexWrap: 'wrap' }}>
            {[
              { l: 'Ver plataforma OMNIX', h: 'producto.html' },
              { l: 'Explorar las IAs propietarias', h: 'ias-propietarias.html' },
              { l: 'Revisar Seguridad y Gobernanza', h: 'seguridad.html' },
              { l: 'Ver aplicaciones por industria', h: 'industrias.html' },
            ].map((l) => (
              <a key={l.h} href={l.h} style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: '#96A3B5', textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>{l.l} <i data-lucide="arrow-up-right" width="12" height="12"/></a>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { ManHowWeWork, ManRenounce, ManTransfer, ManCentral, ManFAQ, ManCTA });
