// MANIFIESTO · Nueva relación con IA + Definiciones + 3 Compromisos + Valores

const ManNewRelation = () => (
  <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="03" label="La nueva relación con la IA" 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' }}>
            No se trata de usar más IA. Se trata de <span style={{ color: '#F4024C' }}>gobernarla</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
            Adoptar inteligencia artificial no consiste solamente en desplegar modelos. Implica proteger datos, reglas, personas, decisiones, continuidad, confianza y responsabilidad institucional. Cinco principios organizan esa relación.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 0, border: '1.5px solid #1E1F26' }}>
        {[
          { n: '01', t: 'La IA debe aprender del dominio.',        d: 'Debe comprender datos, reglas, procesos, excepciones y conocimiento experto de la organización específica. No se trata de aplicar un modelo genérico sobre operaciones únicas.' },
          { n: '02', t: 'La IA debe trabajar sobre la operación real.', d: 'Debe conectarse con los sistemas existentes · ERP, CRM, WMS, MES, OSS, BSS · sin exigir migraciones ni reemplazos. La operación no se detiene mientras se construye la cognición.' },
          { n: '03', t: 'La IA debe poder explicar su participación.', d: 'Cada señal, recomendación, aprobación y acción queda registrada. La auditabilidad no es una capa posterior · se diseña desde el primer día como parte del sistema.' },
          { n: '04', t: 'La autonomía debe ser proporcional al riesgo.', d: 'Las decisiones recurrentes de bajo impacto pueden automatizarse dentro de umbrales aprobados. Las de mayor impacto requieren aprobación humana explícita. El nivel se configura por caso.' },
          { n: '05', t: 'La capacidad debe poder transferirse.',      d: 'La organización debe aprender a operar, gobernar y mejorar sus modelos. El proveedor construye capacidad · no dependencia permanente. La transferencia es contractual · no una promesa.' },
        ].map((p, i, arr) => (
          <SlideIn key={p.n} direction="right" delay={i * 80}>
            <div style={{
              display: 'grid', gridTemplateColumns: '96px 1fr', gap: 32, alignItems: 'start',
              padding: '32px 32px',
              borderBottom: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none',
              background: '#FFF',
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 48, letterSpacing: '-0.03em', color: '#F4024C', lineHeight: 1 }}>{p.n}</div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, letterSpacing: '-0.02em', color: '#000', margin: '0 0 12px', lineHeight: 1.15 }}>{p.t}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: '#52557A', margin: 0, maxWidth: 780 }}>{p.d}</p>
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// DEFINICIONES · optimizadas AEO · citables como cards
const ManDefinitions = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="04" label="Lo que construimos" 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 <span style={{ color: '#F4024C' }}>cognición operacional soberana</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
            Seis conceptos que definen la categoría · con lenguaje preciso · para que puedan comprenderse fuera de contexto.
          </p>
        </Reveal>
      </div>
      <dl style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, margin: 0 }}>
        {[
          { t: 'Cognición operacional',
            d: 'Capacidad de una organización para convertir señales, datos y conocimiento en decisiones y acciones coordinadas. A diferencia del análisis descriptivo, la cognición operacional razona sobre el contexto y ejecuta.' },
          { t: 'Cognición operacional soberana',
            d: 'Cognición operacional cuyo control (datos, corpus, modelos, versiones, despliegue, permisos, reglas y evolución) permanece dentro del perímetro autorizado de la organización · sin telemetría hacia terceros.' },
          { t: 'Cognición propietaria',
            d: 'Modelos especializados construidos sobre los datos, reglas, procesos y conocimiento del cliente. La cognición propietaria pertenece a la organización · no al proveedor · y evoluciona con su operación.' },
          { t: 'SDM · Specialized Domain Model',
            d: 'Modelo de Dominio Especializado. Modelo compacto (típicamente menos de 20B parámetros) entrenado sobre un dominio operacional específico. Razona de forma determinística y auditable · a diferencia de un LLM genérico.' },
          { t: 'Hiperautomatización',
            d: 'Coordinación de datos, decisiones, sistemas y personas para ejecutar procesos de extremo a extremo. Incluye detección, contexto, decisión, ejecución, evidencia y aprendizaje · con supervisión humana en decisiones de impacto.' },
          { t: 'Orquestación operacional',
            d: 'Capacidad de coordinar acciones entre sistemas existentes (ERP, CRM, WMS, MES, OSS) sin reemplazar la arquitectura. La orquestación opera sobre los sistemas del cliente · vía APIs y conectores autorizados.' },
          { t: 'Autonomía controlada',
            d: 'Modelo graduable de ejecución con 5 niveles: monitoreo, recomendación, ejecución asistida, ejecución automática con umbrales y decisión compleja gobernada. La autonomía crece con la evidencia · no con la novedad.' },
          { t: 'Human-in-the-loop',
            d: 'Modelo operacional donde decisiones sobre derechos, salud, sanciones, seguridad o alto costo mantienen aprobación humana obligatoria. La IA prepara evidencia y prioriza · el humano decide y responde.' },
          { t: 'Transferencia de control',
            d: 'Proceso contractual mediante el cual el cliente adquiere progresivamente conocimiento, gobierno y capacidad operacional. Al cierre se entregan corpus, modelos, runbooks, documentación y capacitación. El cliente opera sin OMNIX si así lo decide.' },
          { t: 'Governance Board',
            d: 'Comité mixto cliente-proveedor que aprueba versiones de modelo, políticas de autonomía, reentrenamientos y excepciones. Preserva segregación de funciones y trazabilidad institucional durante todo el ciclo de vida.' },
        ].map((d, i) => (
          <SlideIn key={d.t} direction="up" delay={i * 50}>
            <div style={{ padding: '28px 26px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 210, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <dt style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#000', margin: 0 }}>{d.t}</dt>
              <dd style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#52557A', margin: 0 }}>{d.d}</dd>
            </div>
          </SlideIn>
        ))}
      </dl>
    </Container>
  </section>
);

// TRES COMPROMISOS
const ManCommitments = () => (
  <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="05" label="Nuestros tres compromisos" 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' }}>
            Tres promesas · verificables · con enlace directo a la evidencia.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {[
          {
            n: '01', k: 'INTELIGENCIA PROPIA', c: '#F4024C', icon: 'brain',
            title: 'Su inteligencia se construye sobre su realidad.',
            copy: 'OMNIX convierte datos, reglas, procesos y conocimiento experto en Modelos de Dominio Especializado que representan el contexto operacional de cada organización.',
            problem: 'Modelos genéricos que no comprenden el dominio específico.',
            capacity: 'SDMs entrenados sobre corpus institucional del cliente.',
            outcome: 'Precisión, explicabilidad y adaptación al contexto real.',
            reduces: 'Recomendaciones descontextualizadas · errores por falta de dominio.',
            link: 'ias-propietarias.html', linkLabel: 'Ver cómo se construyen los SDMs',
          },
          {
            n: '02', k: 'EJECUCIÓN OPERACIONAL', c: '#0050BD', icon: 'workflow',
            title: 'No basta con observar.',
            copy: 'OMNIX conecta recomendaciones con workflows, sistemas y personas para que una decisión pueda convertirse en una acción gobernada y medible.',
            problem: 'Dashboards que muestran el problema · pero no lo resuelven.',
            capacity: 'Orquestación cross-sistema con approval flows configurables.',
            outcome: 'De la señal a la acción ejecutada · con evidencia trazable.',
            reduces: 'Reactividad manual · coordinación por email · decisiones lentas.',
            link: 'producto.html', linkLabel: 'Explorar la hiperautomatización de decisiones',
          },
          {
            n: '03', k: 'SOBERANÍA Y TRANSFERENCIA', c: '#0F5132', icon: 'key-round',
            title: 'El control no queda en el proveedor.',
            copy: 'Desde el inicio se definen arquitectura, gobierno, documentación, roles y etapas para que la organización pueda operar y evolucionar la capacidad.',
            problem: 'Dependencia permanente que erosiona la capacidad institucional.',
            capacity: 'Modelo de transferencia contractual en 4 fases documentadas.',
            outcome: 'Capacidad interna operativa · el cliente opera sin OMNIX si decide.',
            reduces: 'Vendor lock-in · pérdida de conocimiento entre proyectos.',
            link: 'transferencia.html', linkLabel: 'Conocer el modelo de transferencia',
          },
        ].map((c, i) => (
          <SlideIn key={c.n} direction="up" delay={i * 100}>
            <div style={{ padding: '32px 28px', background: '#FFF', border: `1.5px solid ${c.c}`, minHeight: 560, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ width: 44, height: 44, border: `1.5px solid ${c.c}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={c.icon} width="22" height="22" style={{ color: c.c, strokeWidth: 1.5 }}/>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: c.c }}>COMPROMISO · {c.n}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: c.c, textTransform: 'uppercase' }}>{c.k}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>{c.title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#52557A', margin: 0 }}>{c.copy}</p>
              <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid #E4EBF3', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { l: 'Problema', v: c.problem, cc: '#96A3B5' },
                  { l: 'Capacidad OMNIX', v: c.capacity, cc: c.c },
                  { l: 'Resultado', v: c.outcome, cc: '#0F5132' },
                  { l: 'Riesgo reducido', v: c.reduces, cc: '#B8860B' },
                ].map((r) => (
                  <div key={r.l}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 3 }}>{r.l}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: r.cc, lineHeight: 1.4 }}>{r.v}</div>
                  </div>
                ))}
              </div>
              <a href={c.link} style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.c, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                {c.linkLabel} <i data-lucide="arrow-right" width="12" height="12"/>
              </a>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// VALORES · 6 · lenguaje público observable
const ManValues = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="06" label="Cómo elegimos actuar" 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' }}>
            Seis valores · seis comportamientos observables.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            No son declaraciones aspiracionales. Son criterios que aplicamos cuando debemos elegir entre lo rápido y lo correcto, entre lo novedoso y lo útil, entre el interés propio y el resultado del cliente.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          {
            n: '01', k: 'NOS HACEMOS CARGO',
            copy: 'Cada resultado tiene un responsable. Decimos la verdad temprano, enfrentamos los problemas y cerramos el ciclo.',
            probe: ['Ownership', 'Comunicación temprana', 'Seguimiento', 'Cierre'],
          },
          {
            n: '02', k: 'INTEGRIDAD SIN ATAJOS',
            copy: 'Protegemos datos, evidencia, compromisos y confianza · incluso cuando hacerlo exige más tiempo o esfuerzo.',
            probe: ['Sin claims sin respaldo', 'Sin ocultar riesgos', 'Datos con autorización', 'Sin comprometer capacidades inexistentes'],
          },
          {
            n: '03', k: 'VALOR ANTES QUE NOVEDAD',
            copy: 'La tecnología importa cuando mejora una decisión, un proceso, un KPI o una capacidad real.',
            probe: ['Caso de negocio', 'Línea base', 'KPI', 'Evidencia', 'Impacto'],
          },
          {
            n: '04', k: 'VELOCIDAD CON RIGOR',
            copy: 'Ejecutamos, medimos y corregimos con agilidad · sin confundir rapidez con improvisación.',
            probe: ['Pilotos acotados', 'Gobierno', 'Métricas', 'Iteración', 'Controles'],
          },
          {
            n: '05', k: 'ADAPTABILIDAD RESILIENTE',
            copy: 'Aprendemos bajo presión y ajustamos el camino sin perder el objetivo estratégico.',
            probe: ['Gestión de excepciones', 'Revisión de hipótesis', 'Recuperación', 'Mejora continua'],
          },
          {
            n: '06', k: 'GANAMOS COMO SISTEMA',
            copy: 'El resultado global prevalece sobre el protagonismo individual. Trabajamos junto a clientes, equipos y partners para construir capacidades que permanezcan.',
            probe: ['Colaboración', 'Transferencia', 'Conocimiento compartido', 'Resultado del cliente'],
          },
        ].map((v, i) => (
          <SlideIn key={v.n} direction="up" delay={i * 70}>
            <div style={{ padding: '28px 26px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 300, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>VALOR · {v.n}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em', color: '#000', margin: 0, lineHeight: 1.2 }}>{v.k}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#52557A', margin: 0, flex: 1 }}>{v.copy}</p>
              <div style={{ paddingTop: 12, borderTop: '1px solid #E4EBF3' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 8 }}>Prueba conductual</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
                  {v.probe.map((p) => (
                    <span key={p} style={{ padding: '3px 8px', border: '1px solid #E4EBF3', background: '#FFF', fontFamily: 'var(--font-mono)', fontSize: 9, color: '#1E1F26', letterSpacing: '0.04em' }}>{p}</span>
                  ))}
                </div>
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

Object.assign(window, { ManNewRelation, ManDefinitions, ManCommitments, ManValues });
