// CONOCE OMNIX · Integraciones + 8 capacidades + Industrias + Seguridad + Transferencia + Comparativa + Definiciones + FAQ + CTA

// INTEGRACIÓN CON SISTEMAS EXISTENTES
const ConoceIntegrations = () => (
  <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="09" label="Integración con sistemas existentes"/></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 no reemplaza su operación. <span style={{ color: '#F4024C' }}>La conecta</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            Los sistemas existentes conservan su función transaccional. OMNIX agrega una capa de interpretación, decisión y orquestación.
          </p>
        </Reveal>
      </div>
      <div style={{ padding: 32, background: '#FFF', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>OMNIX puede coexistir con</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
          {['ERP', 'CRM', 'EAM', 'CMMS', 'WMS', 'TMS', 'MES', 'SCADA', 'Historians', 'BI', 'Data lakes', 'Data warehouses', 'Sistemas documentales', 'Ticketing', 'Plataformas de automatización', 'APIs', 'Sistemas propios', 'Event streaming'].map((it) => (
            <div key={it} style={{ padding: '10px 12px', background: '#FAFBFD', border: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em', textAlign: 'center' }}>{it}</div>
          ))}
        </div>
        <div style={{ marginTop: 20, padding: '14px 16px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.6 }}>
          [VALIDAR INTEGRACIÓN · CONECTOR · VERSIÓN · LATENCIA]. OMNIX se integra mediante APIs, eventos, conectores y mecanismos autorizados disponibles en la arquitectura de cada organización. La integración específica se valida técnicamente por proyecto.
        </div>
      </div>
    </Container>
  </section>
);

// 8 CAPACIDADES PRINCIPALES
const ConoceCapabilities = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="10" label="Capacidades principales"/></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' }}>
            Ocho capacidades · <span style={{ color: '#F4024C' }}>una plataforma</span>.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { i: 'network',       k: 'INTEGRACIÓN OPERACIONAL',  d: 'Conecta datos, eventos, documentos y sistemas.' },
          { i: 'brain',          k: 'COGNICIÓN PRIVADA',        d: 'Inteligencia especializada sobre el contexto del cliente.' },
          { i: 'target',         k: 'DECISION INTELLIGENCE',    d: 'Evalúa condiciones, restricciones y alternativas.' },
          { i: 'workflow',       k: 'ORQUESTACIÓN',              d: 'Coordina sistemas, workflows, personas y agentes.' },
          { i: 'zap',            k: 'HIPERAUTOMATIZACIÓN',       d: 'Procesos completos con controles y aprobaciones.' },
          { i: 'shield-check',   k: 'GOBIERNO',                  d: 'Fuentes, versiones, decisiones, permisos y acciones.' },
          { i: 'lock',            k: 'OPERACIÓN PRIVADA',         d: 'Arquitecturas ajustadas a seguridad y soberanía.' },
          { i: 'arrow-right-left', k: 'TRANSFERENCIA',            d: 'Capacidades internas para operar la solución.' },
        ].map((c, i) => (
          <SlideIn key={c.k} direction="up" delay={i * 60}>
            <div style={{ padding: '20px 20px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 180, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ width: 40, height: 40, border: '1.5px solid #F4024C', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={c.i} width="18" height="18" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>0{i+1}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '-0.005em', color: '#000', lineHeight: 1.25 }}>{c.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#52557A', lineHeight: 1.5 }}>{c.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// INDUSTRIAS · resumen de verticales disponibles
const ConoceIndustries = () => (
  <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="11" label="Industrias"/></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' }}>
            Una plataforma. <span style={{ color: '#F4024C' }}>Diferentes operaciones críticas</span>.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { i: 'shopping-bag',    k: 'RETAIL',           href: 'retail.html',              q: 'Quiebres · pricing · elasticidad' },
          { i: 'truck',            k: 'LOGÍSTICA',        href: 'logistica.html',           q: 'Multi-nodo · disrupciones supply-chain' },
          { i: 'factory',           k: 'MANUFACTURA',     href: 'manufactura.html',         q: 'OEE · mantenimiento · IT/OT' },
          { i: 'mountain',          k: 'MINERÍA',          href: 'mineria.html',              q: 'SCADA · continuidad · seguridad' },
          { i: 'radio-tower',       k: 'TELCO',              href: 'telco.html',                q: 'NOC · tickets · degradación' },
          { i: 'landmark',           k: 'BANCA',              href: 'banca.html',                q: 'Fraude · AML · KYC · crédito · resiliencia' },
          { i: 'stethoscope',        k: 'SALUD',              href: 'salud.html',                q: 'Abastecimiento · equipos · capacidad' },
          { i: 'zap',                 k: 'ENERGÍA',            href: 'energia.html',              q: 'Red · generación · activos · field · DER' },
          { i: 'building-2',         k: 'GOBIERNO',           href: 'gobierno.html',             q: 'Movilidad · salud · seguridad · servicios · IA soberana' },
          { i: 'shield',              k: 'DEFENSA',             href: 'defensa.html',              q: 'Operaciones críticas · no cinético' },
          { i: 'layers',              k: 'TRANSVERSAL',        href: 'operaciones-criticas.html', q: 'Categoría para operaciones críticas sin vertical' },
          { i: 'grid-3x3',            k: 'VER TODAS',          href: 'industrias.html',           q: 'Hub · comparación · assessment' },
        ].map((v, i) => (
          <SlideIn key={v.k} direction="up" delay={i * 30}>
            <a href={v.href} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
              <div style={{ padding: '20px 20px', background: '#FFF', border: '1px solid #E4EBF3', minHeight: 160, display: 'flex', flexDirection: 'column', gap: 10, transition: 'all 220ms', cursor: 'pointer' }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#F4024C'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#E4EBF3'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                <i data-lucide={v.i} width="20" height="20" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C' }}>{v.k}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.4, flex: 1 }}>{v.q}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#F4024C', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  Explorar → <i data-lucide="arrow-up-right" width="10" height="10"/>
                </div>
              </div>
            </a>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// SEGURIDAD + TRANSFERENCIA en dos columnas
const ConoceSecurityTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        <div>
          <Reveal><SectionMeta n="12" label="Seguridad y gobierno"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
              Cada modelo, decisión y acción debe poder ser gobernado.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {['Identidad y acceso', 'Roles · mínimo privilegio', 'Segmentación', 'Cifrado · gestión de claves', 'Clasificación de información', 'Procedencia de datos', 'Versionado', 'Evaluaciones', 'Logs · auditoría', 'Human-in-the-loop', 'Límites de autonomía', 'Gestión de excepciones', 'Rollback', 'Retiro de modelos'].map((c) => (
                <div key={c} style={{ padding: '8px 10px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'flex', gap: 6, alignItems: 'center' }}>
                  <i data-lucide="check" width="12" height="12" style={{ color: '#0050BD', strokeWidth: 2 }}/>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26' }}>{c}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 14, padding: '10px 12px', background: '#000', color: '#FFF', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em' }}>
              Gestión de riesgo · <span style={{ color: '#F4024C' }}>GOVERN · MAP · MEASURE · MANAGE</span>
            </div>
            <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em', lineHeight: 1.6 }}>
              [VALIDAR SEGURIDAD · CUMPLIMIENTO · CERTIFICACIÓN · ARQUITECTURA]. Ver Trust Center para el estado real de cada certificación.
            </div>
            <div style={{ marginTop: 12, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Button variant="ghost" icon="arrow-right" href="trust-center.html">Trust Center</Button>
              <Button variant="ghost" icon="arrow-right" href="seguridad.html">Seguridad</Button>
            </div>
          </Reveal>
        </div>
        <div>
          <Reveal delay={80}><SectionMeta n="13" label="Transferencia de control"/></Reveal>
          <Reveal delay={140}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
              Construimos, operamos y te <span style={{ color: '#F4024C' }}>entregamos las llaves</span>.
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { n: '01', k: 'ASSESSMENT',        d: 'Se identifica una decisión, proceso o problema con impacto verificable.' },
                { n: '02', k: 'PILOTO',              d: 'Se construye un SDM o workflow controlado con datos y alcance delimitados.' },
                { n: '03', k: 'ESCALAMIENTO',        d: 'Se amplían integraciones, usuarios, procesos y niveles de autonomía.' },
                { n: '04', k: 'TRANSFERENCIA',       d: 'Se entregan herramientas, documentación, gobierno y capacidades operacionales al equipo del cliente.' },
              ].map((f) => (
                <div key={f.n} style={{ padding: '14px 16px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, alignItems: 'start' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', color: '#F4024C', fontWeight: 500 }}>{f.n}</span>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#000', letterSpacing: '-0.005em', marginBottom: 4 }}>{f.k}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>
              [VALIDAR ALCANCE CONTRACTUAL · PROPIEDAD · LICENCIAS]
            </div>
            <div style={{ marginTop: 12 }}>
              <Button variant="ghost" icon="arrow-right" href="transferencia.html">Modelo de transferencia completo</Button>
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </section>
);

// COMPARATIVA con alternativas
const ConoceVs = () => {
  const rows = [
    { tool: 'ERP',                function: 'Registra transacciones',                lacks: 'No decide ni conecta contexto', rel: 'OMNIX conecta ERP con decisiones y ejecución' },
    { tool: 'Business Intelligence', function: 'Muestra indicadores',                 lacks: 'No mueve la operación',           rel: 'OMNIX activa acciones basadas en indicadores' },
    { tool: 'RPA',                function: 'Repite pasos definidos',                lacks: 'No evalúa contexto ni excepciones', rel: 'OMNIX puede usar RPA como ejecutor autorizado' },
    { tool: 'Data lake',           function: 'Consolida datos',                       lacks: 'No razona ni orquesta acciones',   rel: 'OMNIX convierte datos en decisiones ejecutadas' },
    { tool: 'LLM general',         function: 'Interpreta lenguaje',                   lacks: 'No razona sobre operaciones ni políticas', rel: 'OMNIX usa SDMs específicos con gobernanza' },
    { tool: 'Copiloto',              function: 'Asiste a un rol',                     lacks: 'Sin gobernanza ni datos institucionales', rel: 'OMNIX opera con SDM propio y dentro del perímetro' },
    { tool: 'Plataforma integración', function: 'Conecta sistemas',                    lacks: 'No decide qué hacer con lo conectado', rel: 'OMNIX decide y ejecuta sobre lo que la plataforma conecta' },
    { tool: 'Motor de reglas',       function: 'Aplica reglas explícitas',              lacks: 'No aprende ni razona con contexto', rel: 'OMNIX combina reglas, contexto y modelos' },
    { tool: 'Herramienta workflow',  function: 'Mueve tareas',                          lacks: 'No decide cuál activar según contexto', rel: 'OMNIX decide qué workflow activar y con qué parámetros' },
    { tool: 'OMNIX',                function: 'Conecta contexto · decisión · ejecución', lacks: 'Coexiste con todas las tecnologías anteriores', rel: 'Categoría cognición operacional', highlight: true },
  ];
  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="14" label="Comparativa"/></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 <span style={{ color: '#F4024C' }}>coexiste</span>, no reemplaza.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Un ERP registra transacciones · BI visualiza indicadores · RPA ejecuta pasos · un LLM interpreta lenguaje · un workflow mueve tareas. <strong>OMNIX conecta contexto, decisiones y ejecución</strong> sobre todas estas tecnologías.
            </p>
          </Reveal>
        </div>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr 1.2fr 1.4fr', background: '#000', color: '#FFF', padding: '14px 20px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            <div>SOLUCIÓN</div>
            <div style={{ color: '#0F5132' }}>FUNCIÓN PRINCIPAL</div>
            <div style={{ color: '#96A3B5' }}>QUÉ NO RESUELVE POR SÍ SOLA</div>
            <div style={{ color: '#F4024C' }}>CÓMO SE RELACIONA CON OMNIX</div>
          </div>
          {rows.map((r, i) => (
            <SlideIn key={r.tool} direction="right" delay={i * 30}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1.2fr 1.2fr 1.4fr', padding: '14px 20px',
                borderTop: '1px solid #E4EBF3',
                background: r.highlight ? '#F4024C' : (i % 2 === 0 ? '#FFF' : '#FAFBFD'),
                color: r.highlight ? '#FFF' : 'inherit',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: r.highlight ? '#FFF' : '#000' }}>{r.tool}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: r.highlight ? '#FFF' : '#1E1F26', lineHeight: 1.4 }}>{r.function}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: r.highlight ? 'rgba(255,255,255,0.85)' : '#96A3B5', lineHeight: 1.4 }}>{r.lacks}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: r.highlight ? '#FFF' : '#F4024C', fontWeight: r.highlight ? 700 : 500, lineHeight: 1.4 }}>{r.rel}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// DEFINICIONES EXTRAÍBLES
const ConoceGlossary = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="15" label="Definiciones extraíbles"/></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' }}>
            Definiciones que pueden <span style={{ color: '#F4024C' }}>citarse fuera de contexto</span>.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
        {[
          { t: 'OMNIX',                       d: 'Plataforma de cognición operacional que conecta datos, sistemas, procesos y conocimiento experto para ayudar a las organizaciones a detectar condiciones, evaluar alternativas y coordinar acciones auditables mediante IAs privadas y especializadas.' },
          { t: 'Cognición operacional',       d: 'Capacidad de interpretar señales de una operación, relacionarlas con reglas, restricciones y objetivos, evaluar alternativas y coordinar acciones sobre los sistemas existentes con trazabilidad y control humano.' },
          { t: 'Plataforma de cognición operacional', d: 'Sistema que conecta datos, sistemas, reglas y conocimiento especializado para interpretar lo que ocurre en una organización, evaluar alternativas y coordinar acciones auditables sobre los sistemas existentes.' },
          { t: 'SDM',                          d: 'Modelo de Dominio Especializado. Una inteligencia configurada o entrenada sobre datos, reglas, procesos, documentación y conocimiento experto de un dominio específico para interpretar situaciones y apoyar decisiones dentro de límites gobernados.' },
          { t: 'Soberanía cognitiva',          d: '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 inteligencia artificial.' },
          { t: 'Cognición privada',             d: 'Inteligencia especializada construida y operada dentro del perímetro autorizado del cliente, entrenada sobre su corpus, sujeta a sus políticas y bajo su gobernanza de acceso, versionado y retención.' },
          { t: 'Hiperautomatización',           d: 'Conexión de datos, modelos, reglas, personas y sistemas para ejecutar procesos de principio a fin, incluyendo excepciones, aprobaciones, escalamiento y medición de resultados sobre los sistemas existentes.' },
          { t: 'Orquestación operacional',      d: 'Coordinación cross-sistema de workflows, agentes, aprobaciones, personas y reglas alrededor de una decisión operacional específica, con evidencia trazable y rollback armado.' },
          { t: 'Human-in-the-loop',             d: 'Modelo de operación donde la aprobación humana es requisito para acciones con impacto significativo, casos con baja confianza del modelo o decisiones que afecten a personas, con logs firmados y responsable definido.' },
          { t: 'Autonomía controlada',          d: 'Nivel de autonomía graduable (N1-N5) configurable por caso, riesgo y política, con umbrales, aprobaciones, rollback, escalamiento y condiciones de detención definidas contractual y técnicamente.' },
          { t: 'Transferencia de control',       d: 'Proceso progresivo mediante el cual OMNIX entrega documentación, arquitectura, modelos, reglas, gobierno, monitoreo y capacidades operacionales al equipo del cliente hasta que pueda operar sin dependencia del proveedor.' },
          { t: 'Razonamiento auditable',        d: 'Capacidad del modelo de registrar señales utilizadas, fuentes, reglas invocadas, alternativas evaluadas, recomendación, fundamento y nivel de confianza · reproducible bajo el mismo contexto para auditoría técnica y regulatoria.' },
        ].map((r, i) => (
          <SlideIn key={r.t} direction="up" delay={i * 40}>
            <div style={{ padding: '20px 22px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 160 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 8 }}>DEF · {String(i+1).padStart(2, '0')}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#000', letterSpacing: '-0.005em', marginBottom: 8 }}>{r.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>{r.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// FAQ · 10 preguntas
const ConoceFAQ = () => {
  const items = [
    { q: '¿Qué es OMNIX?', a: 'OMNIX es una plataforma de cognición operacional que conecta datos, sistemas, procesos y conocimiento experto para ayudar a las organizaciones a detectar condiciones, evaluar alternativas y coordinar acciones auditables. Utiliza Modelos de Dominio Especializado (SDMs), automatización gobernada y arquitecturas privadas para construir capacidades de inteligencia artificial adaptadas a cada operación crítica.' },
    { q: '¿Qué problema resuelve?', a: 'La fragmentación entre datos, sistemas, procesos y conocimiento experto. Las organizaciones tienen información suficiente para mejorar su operación, pero carecen de una capa que interprete el contexto, evalúe alternativas y coordine la ejecución. OMNIX conecta estas capacidades alrededor de decisiones operacionales específicas, con trazabilidad y control humano donde corresponde.' },
    { q: '¿Qué es una plataforma de cognición operacional?', a: 'Un sistema que conecta datos, sistemas, reglas y conocimiento especializado para interpretar lo que ocurre en una organización, evaluar alternativas y coordinar acciones auditables sobre los sistemas existentes. Combina analítica, automatización, IA generativa, agentes y sistemas transaccionales dentro de una arquitectura orientada a decisiones.' },
    { q: '¿Qué es un SDM?', a: 'Un Modelo de Dominio Especializado es una inteligencia configurada o entrenada sobre datos, reglas, procesos, documentación y conocimiento experto de un dominio específico. Se especializa en la operación del cliente, no solamente en responder preguntas. Cada SDM documenta propietario, corpus, uso autorizado, uso prohibido, versión, evaluaciones, monitoreo y proceso de retiro.' },
    { q: '¿OMNIX reemplaza nuestros sistemas?', a: 'No. OMNIX no reemplaza ERP, CRM, EAM, CMMS, WMS, TMS, MES, SCADA, Historians, BI, data lakes ni sistemas propios. Es una capa cognitiva que se integra vía APIs y mecanismos autorizados para correlacionar señales entre estos sistemas, contextualizar restricciones y coordinar respuestas auditables. Los sistemas existentes conservan su función transaccional.' },
    { q: '¿Puede desplegarse en infraestructura privada?', a: 'Sí. Modalidades soportadas: nube privada, VPC en cloud del cliente, on-premise en datacenter propio, arquitectura híbrida, edge o entornos aislados. Los datos, corpus y modelos permanecen dentro del perímetro autorizado. La residencia de datos se configura por jurisdicción, sector y regulación aplicable. [VALIDAR DESPLIEGUE · REGIÓN · HARDWARE · AIR-GAPPED]' },
    { q: '¿Qué decisiones puede automatizar?', a: 'Decisiones operacionales repetibles con datos accesibles, KPI medible y responsable definido. Configurables por nivel de autonomía N1-N5 según riesgo. El default operacional es N3 (recomendación con aprobación humana). Mantienen aprobación obligatoria las acciones de alto impacto, decisiones regulatorias, cambios masivos, casos con baja confianza del modelo y acciones que afecten a personas.' },
    { q: '¿Cómo se mantiene el control humano?', a: 'Con approval flows configurables por dominio, umbrales de confianza definidos, rollback armado, logs firmados WORM por cada decisión, governance board, gestión de excepciones y revisión posterior. La autonomía aumenta únicamente cuando aumentan la evidencia, los controles y la confianza operacional. Sin modo permisivo no autorizado. Sin excepciones automáticas.' },
    { q: '¿Cómo protege datos y modelos?', a: 'Con cifrado en tránsito y reposo, gestión de llaves, control de acceso por roles, mínimo privilegio, segmentación, logs de auditoría, seudonimización, retención por política y contrato. Marcos considerados según jurisdicción: ISO 27001/27701 como referencia, GDPR, LGPD, leyes locales. Ver Trust Center para el estado real de cada certificación y evidencia disponible.' },
    { q: '¿Cuánto tarda un piloto?', a: 'El tiempo depende del alcance, la calidad de los datos, las integraciones necesarias, el nivel de riesgo y el proceso de validación. Habitualmente: 3-4 semanas de diagnóstico, 8-14 semanas de piloto productivo, 3-6 meses de operación y calibración, y escalamiento posterior según evidencia. No escalamos sin evidencia. Cada proyecto se dimensiona en la sesión inicial de diagnóstico.' },
    { q: '¿Qué información se necesita para comenzar?', a: 'Una decisión operacional que se desea mejorar, identificación del proceso y del responsable, acceso preliminar a las fuentes de datos necesarias, un KPI medible, un caso de negocio verificable y sponsor ejecutivo. En la sesión de diagnóstico se define el alcance, la línea base, la arquitectura y el plan de piloto. Los datos sensibles se manejan bajo NDA.' },
    { q: '¿Cómo se transfiere la solución al equipo interno?', a: 'Progresivamente a través de las fases Assessment → Piloto → Escalamiento → Transferencia. Se entregan documentación, arquitectura, SDMs, corpus acordado, reglas, runbooks, workflows, matrices de aprobación, gobierno, monitoreo, gestión de excepciones, reentrenamiento y capacitación. La organización debe poder operar sin OMNIX cuando lo decida. [VALIDAR ALCANCE CONTRACTUAL]' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="faq" 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="16" label="Preguntas frecuentes"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
              Doce preguntas · doce 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 ? 380 : 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 ConoceCTA = () => (
  <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 }}>
            — Comience con una decisión que tenga impacto real —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 62, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            Construimos, operamos y te entregamos las llaves.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 780, margin: '0 auto 36px' }}>
            OMNIX comienza identificando una decisión, proceso o restricción operacional que pueda medirse. A partir de ese alcance, conectamos los datos necesarios, construimos un modelo especializado y validamos su impacto dentro de un entorno controlado.
          </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 una sesión de diagnóstico</Button>
            <Button variant="ghost" dark icon="arrow-right" href="arquitectura.html">Revisar la arquitectura de OMNIX</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 32, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>
            Sin compromiso de implementación · la primera conversación se enfoca en el problema, los datos disponibles y el resultado esperado
          </div>
        </Reveal>
        <Reveal delay={340}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
            {[
              { l: 'Ver plataforma completa',   h: 'producto.html' },
              { l: 'Explorar los SDMs',           h: 'ias-propietarias.html' },
              { l: 'Ver arquitectura',            h: 'arquitectura.html' },
              { l: 'Ver industrias',               h: 'industrias.html' },
              { l: 'Trust Center',                 h: 'trust-center.html' },
              { l: 'Transferencia',                h: 'transferencia.html' },
            ].map((l) => (
              <a key={l.l} 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, { ConoceIntegrations, ConoceCapabilities, ConoceIndustries, ConoceSecurityTransfer, ConoceVs, ConoceGlossary, ConoceFAQ, ConoceCTA });
