// CONOCE OMNIX · 4 capas + 4 motores + SDMs + Hiperautomatización + Autonomía + Soberanía

// ARQUITECTURA DE 4 CAPAS
const ConoceLayers = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="03" label="Arquitectura de cuatro capas"/></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: '#000' }}>
            OMNIX representa la operación en <span style={{ color: '#F4024C' }}>cuatro capas</span>.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {[
          { n: '01', k: 'BASE OPERACIONAL', color: '#0050BD',
            t: 'Conecta y prepara la operación real.',
            items: ['Sistemas', 'Datos', 'Eventos', 'Documentos', 'Sensores', 'APIs', 'Reglas', 'Fuentes externas autorizadas'] },
          { n: '02', k: 'COGNICIÓN PRIVADA', color: '#F4024C',
            t: 'Interpreta con contexto propio.',
            items: ['SDMs', 'Contexto', 'Taxonomías', 'Conocimiento experto', 'Restricciones', 'Políticas', 'Memoria operacional', 'Razonamiento auditable'] },
          { n: '03', k: 'ORQUESTACIÓN OPERACIONAL', color: '#1E1F26',
            t: 'Coordina la ejecución.',
            items: ['Workflows', 'Agentes', 'Aprobaciones', 'Sistemas', 'Personas', 'Reglas', 'Excepciones', 'Acciones autorizadas'] },
          { n: '04', k: 'IMPACTO', color: '#B00238',
            t: 'Mide y aprende.',
            items: ['Tiempo', 'Costo', 'Disponibilidad', 'Calidad', 'Riesgo', 'Productividad', 'Cumplimiento', 'Adopción'] },
        ].map((L, i) => (
          <SlideIn key={L.k} direction={i % 2 === 0 ? 'right' : 'left'} delay={i * 100}>
            <div style={{ padding: '32px 28px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 320, display: 'flex', flexDirection: 'column', gap: 14 }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = L.color}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: L.color }}>CAPA {L.n} · {L.k}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>{L.t}</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                {L.items.map((it) => (
                  <span key={it} style={{ padding: '4px 10px', border: `1px solid ${L.color}`, color: L.color, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em' }}>{it}</span>
                ))}
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// 4 MOTORES
const ConoceMotores = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="04" label="Motores de OMNIX"/></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: '#000' }}>
            Cuatro motores · <span style={{ color: '#F4024C' }}>un ciclo completo</span>.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { k: 'INGEST',   f: 'Datos · eventos · documentos',        t: 'Conecta y prepara datos, eventos, documentos y señales.',    v: 'Contexto listo · fuentes trazables', href: 'arquitectura-ingest.html' },
          { k: 'CORE',      f: 'Contexto · SDMs · reglas',             t: 'Organiza contexto, reglas, conocimiento y modelos.',           v: 'Cognición especializada · lista para usar', href: 'arquitectura-core.html' },
          { k: 'RUNTIME',   f: 'Workflows · agentes · acciones',       t: 'Ejecuta workflows, agentes, integraciones y acciones.',        v: 'Decisiones ejecutadas · con evidencia', href: 'arquitectura-runtime.html' },
          { k: 'CORTEX',    f: 'Gobernanza · evaluación · mejora',    t: 'Observa, evalúa, gobierna y mejora la cognición.',            v: 'Auditoría · mejora continua', href: 'arquitectura-cortex.html' },
        ].map((m, i) => (
          <SlideIn key={m.k} direction="up" delay={i * 80}>
            <a href={m.href} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
              <div style={{ padding: '28px 24px', background: '#FFF', border: '1.5px solid #1E1F26', minHeight: 280, display: 'flex', flexDirection: 'column', gap: 12, transition: 'border-color 220ms' }}
                onMouseEnter={(e) => e.currentTarget.style.borderColor = '#F4024C'}
                onMouseLeave={(e) => e.currentTarget.style.borderColor = '#1E1F26'}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C' }}>OMNIX · {m.k}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', letterSpacing: '0.04em' }}>{m.f}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55, flex: 1 }}>{m.t}</div>
                <div style={{ paddingTop: 12, borderTop: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.04em', color: '#0F5132' }}>{m.v}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  Explorar → <i data-lucide="arrow-up-right" width="10" height="10"/>
                </div>
              </div>
            </a>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// SDMs
const ConoceSDMs = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="05" label="Modelos de Dominio Especializado (SDMs)" 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' }}>
            Una IA genérica conoce lenguaje. Un SDM aprende <span style={{ color: '#F4024C' }}>cómo opera su organización</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#96A3B5', margin: 0 }}>
            Un SDM es una inteligencia configurada o entrenada sobre datos, reglas, procesos, documentación y conocimiento experto de un dominio específico. Su función es interpretar situaciones y apoyar decisiones dentro de un contexto operacional delimitado.
          </p>
        </Reveal>
      </div>

      <div style={{ padding: 32, background: '#0A0B10', border: '1.5px solid #2E3140', marginBottom: 24 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>Un SDM puede construirse para</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {['Mantenimiento', 'Logística', 'Producción', 'Calidad', 'Telecomunicaciones', 'Servicio', 'Contratos', 'Operaciones financieras', 'Infraestructura', 'Riesgo', 'Compliance', 'Ciberseguridad defensiva', 'Conocimiento institucional', 'Field service', 'Abastecimiento', 'Continuidad'].map((it) => (
            <div key={it} style={{ padding: '8px 12px', background: '#000', border: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#FFF', letterSpacing: '0.04em' }}>
              <i data-lucide="check" width="10" height="10" style={{ color: '#F4024C', strokeWidth: 2, marginRight: 4, verticalAlign: 'middle' }}/>{it}
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: 32, background: '#0A0B10', border: '1.5px solid #2E3140' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>Cada SDM documenta</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {['Propietario', 'Objetivo', 'Corpus', 'Fuentes', 'Reglas', 'Uso autorizado', 'Uso prohibido', 'Versión', 'Evaluaciones', 'Monitoreo', 'Reentrenamiento', 'Proceso de retiro'].map((it) => (
            <div key={it} style={{ padding: '8px 12px', background: '#000', border: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#FFF', letterSpacing: '0.04em' }}>{it}</div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 24, textAlign: 'center' }}>
        <Button variant="ghost" dark icon="arrow-right" href="ias-propietarias.html">Explorar los SDMs en profundidad</Button>
      </div>
    </Container>
  </section>
);

// HIPERAUTOMATIZACIÓN
const ConoceHyperauto = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="06" label="Hiperautomatización"/></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: '#000' }}>
            De automatizar tareas a <span style={{ color: '#F4024C' }}>coordinar decisiones completas</span>.
          </h2>
        </Reveal>
      </div>

      {/* 13 acciones que OMNIX ayuda a coordinar */}
      <div style={{ padding: 32, background: '#FAFBFD', border: '1.5px solid #1E1F26', marginBottom: 24 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>OMNIX puede ayudar a coordinar</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {['Detectar condición', 'Consultar sistemas', 'Aplicar reglas', 'Evaluar alternativas', 'Preparar decisión', 'Solicitar aprobación', 'Actualizar sistemas', 'Crear órdenes', 'Asignar recursos', 'Notificar responsables', 'Registrar fundamentos', 'Medir resultados', 'Escalar excepciones'].map((it) => (
            <div key={it} style={{ padding: '10px 12px', background: '#FFF', border: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.04em' }}>
              <i data-lucide="check" width="10" height="10" style={{ color: '#0F5132', strokeWidth: 2, marginRight: 4, verticalAlign: 'middle' }}/>{it}
            </div>
          ))}
        </div>
      </div>

      {/* Diferencia con RPA */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <SlideIn direction="right">
          <div style={{ padding: '28px 26px', background: '#FAFBFD', border: '1.5px solid #52557A' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#52557A', marginBottom: 12 }}>RPA</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: '0 0 12px' }}>Repite pasos definidos.</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, color: '#52557A', margin: 0 }}>Ejecuta tareas repetitivas sobre interfaces existentes. Sin evaluación de contexto ni excepciones. Puede ser uno de los mecanismos de ejecución que OMNIX activa.</p>
          </div>
        </SlideIn>
        <SlideIn direction="left" delay={80}>
          <div style={{ padding: '28px 26px', background: '#FAFBFD', border: '1.5px solid #F4024C' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 12 }}>OMNIX</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: '0 0 12px' }}>Coordina la decisión y el workflow.</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, color: '#000', margin: 0 }}>Incorpora contexto, restricciones y evaluación. Aprueba, ejecuta, mide y aprende. RPA puede ser uno de los ejecutores autorizados dentro del workflow.</p>
          </div>
        </SlideIn>
      </div>
    </Container>
  </section>
);

// AUTONOMÍA N1-N5
const ConoceAutonomy = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="07" label="Niveles de autonomía"/></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: '#000' }}>
            La autonomía <span style={{ color: '#F4024C' }}>no es binaria</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            OMNIX no busca eliminar la responsabilidad humana · busca reducir la carga operacional sin perder control. Cada proceso puede tener un nivel diferente según el riesgo.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {[
          { n: 'N1', t: 'OBSERVACIÓN',                r: 'Conecta, organiza y clasifica información' },
          { n: 'N2', t: 'PREDICCIÓN',                  r: 'Identifica patrones y anticipa condiciones' },
          { n: 'N3', t: 'RECOMENDACIÓN',               r: 'Propone alternativas con fundamentos' },
          { n: 'N4', t: 'EJECUCIÓN ASISTIDA',           r: 'Prepara acciones y espera aprobación' },
          { n: 'N5', t: 'EJECUCIÓN CONTROLADA',         r: 'Workflows autorizados dentro de límites' },
        ].map((l, i) => (
          <SlideIn key={l.n} direction="up" delay={i * 80}>
            <div style={{ padding: '20px 18px', background: '#FFF', border: '1.5px solid #F4024C', minHeight: 200, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.14em', color: '#F4024C', fontWeight: 600 }}>{l.n}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#000', letterSpacing: '-0.005em' }}>{l.t}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', lineHeight: 1.55 }}>{l.r}</div>
            </div>
          </SlideIn>
        ))}
      </div>

      <div style={{ marginTop: 24, padding: '20px 24px', background: '#FFF', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 12 }}>Reglas del sistema de autonomía</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
          {['La autonomía no es binaria · cada proceso tiene su nivel', 'El nivel depende del riesgo · configurable por caso', 'Las excepciones se escalan · sin modo permisivo no autorizado', 'Todas las acciones quedan registradas · logs firmados WORM', 'El control humano se mantiene donde es necesario', 'Los permisos pueden revocarse · kill switch por dominio'].map((r) => (
            <div key={r} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26' }}>
              <i data-lucide="check" width="14" height="14" style={{ color: '#0F5132', strokeWidth: 2, flexShrink: 0, marginTop: 4 }}/>{r}
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// SOBERANÍA COGNITIVA
const ConoceSovereignty = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="08" label="Soberanía cognitiva"/></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: '#000' }}>
            Su operación no debería depender de una inteligencia que <span style={{ color: '#F4024C' }}>no controla</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            La soberanía cognitiva es la capacidad de una organización para mantener control efectivo sobre los datos, modelos, reglas, infraestructura, permisos, versiones y procesos que sustentan sus decisiones asistidas por IA.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <SlideIn direction="right">
          <div style={{ padding: '28px 28px', background: '#FAFBFD', border: '1.5px solid #F4024C', height: '100%' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 14 }}>CONTROL SOBRE</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {['Datos', 'Modelos', 'Corpus', 'Prompts', 'Reglas', 'Evaluaciones', 'Infraestructura', 'Logs', 'Claves', 'Actualizaciones', 'Acceso', 'Reentrenamiento', 'Continuidad'].map((it) => (
                <div key={it} style={{ padding: '6px 10px', background: '#FFF', border: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26' }}>
                  <i data-lucide="check" width="10" height="10" style={{ color: '#F4024C', strokeWidth: 2, marginRight: 4, verticalAlign: 'middle' }}/>{it}
                </div>
              ))}
            </div>
          </div>
        </SlideIn>

        <SlideIn direction="left" delay={80}>
          <div style={{ padding: '28px 28px', background: '#FAFBFD', border: '1.5px solid #0050BD', height: '100%' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', marginBottom: 14 }}>MODALIDADES DE DESPLIEGUE</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 6 }}>
              {[
                { k: 'VPC PRIVADA',       d: 'En cloud del cliente o autorizado' },
                { k: 'ON-PREMISE',         d: 'En datacenter del cliente' },
                { k: 'HÍBRIDA',             d: 'Combinación bajo diseño autorizado' },
                { k: 'EDGE',                 d: 'Procesamiento cercano a la operación' },
                { k: 'AISLADA · AIR-GAP',   d: 'Sin conectividad externa · [VALIDAR]' },
                { k: 'REGIONAL',             d: 'Residencia por jurisdicción configurable' },
              ].map((m) => (
                <div key={m.k} style={{ padding: '10px 12px', background: '#FFF', border: '1px solid #E4EBF3', display: 'grid', gridTemplateColumns: '140px 1fr', gap: 12 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#0050BD', fontWeight: 600 }}>{m.k}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#52557A' }}>{m.d}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em', lineHeight: 1.55 }}>
              [VALIDAR DESPLIEGUE · REGIÓN · HARDWARE · AIR-GAPPED]. No todas las modalidades están disponibles como oferta estándar.
            </div>
          </div>
        </SlideIn>
      </div>

      <div style={{ marginTop: 24, textAlign: 'center' }}>
        <Button variant="ghost" icon="arrow-right" href="privacidad.html">Ver política de Privacidad y protección de datos</Button>
      </div>
    </Container>
  </section>
);

Object.assign(window, { ConoceLayers, ConoceMotores, ConoceSDMs, ConoceHyperauto, ConoceAutonomy, ConoceSovereignty });