// OP CRÍTICAS · Autonomía + Seguridad + Transferencia + Comparativa + Assessment + Plan + FAQ + CTA

const OcAutonomy = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="07" label="Autonomía y control humano" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 46, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FFF', margin: '0 0 20px' }}>
              La autonomía aumenta con la evidencia.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 32px' }}>
              Cinco niveles graduables · configurables por caso, criticidad, jurisdicción y política institucional. La autonomía aumenta únicamente cuando aumentan la evidencia, los controles y la confianza operacional.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ padding: '18px 22px', background: '#0A0B10', border: '1.5px solid #EA384C' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 10 }}>APROBACIÓN HUMANA OBLIGATORIA</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {['Acciones de alto impacto', 'Casos con baja confianza del modelo', 'Cambios masivos', 'Decisiones regulatorias', 'Acciones que afecten derechos o personas', 'Cambios de políticas', 'Excepciones', 'Acciones de seguridad crítica'].map((u) => (
                  <li key={u} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: '#FFF' }}>
                    <i data-lucide="x" width="14" height="14" style={{ color: '#EA384C', strokeWidth: 2, flexShrink: 0, marginTop: 3 }}/>
                    {u}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            {[
              { n: 'N1', t: 'Observación',                       r: 'Conecta y clasifica información' },
              { n: 'N2', t: 'Predicción',                         r: 'Anticipa condiciones, fallas o restricciones' },
              { n: 'N3', t: 'Recomendación',                      r: 'Propone alternativas · con fundamento' },
              { n: 'N4', t: 'Ejecución asistida',                  r: 'Prepara acciones · espera aprobación' },
              { n: 'N5', t: 'Ejecución controlada',                r: 'Workflows recurrentes · dentro de umbrales' },
            ].map((l, i, arr) => (
              <div key={l.n} style={{ display: 'grid', gridTemplateColumns: '48px 1fr 180px', gap: 16, alignItems: 'center', padding: '18px 20px', borderBottom: (i < arr.length - 1) ? '1px solid #2E3140' : 'none', background: i === 2 ? 'rgba(244,2,76,0.10)' : 'transparent' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', color: i === 2 ? '#F4024C' : '#96A3B5', fontWeight: 600 }}>{l.n}</span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#FFF' }}>{l.t}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', marginTop: 4 }}>{l.r}</div>
                </div>
                {i === 2 && <Badge tone="fuxia">DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// SEGURIDAD + TRANSFERENCIA en dos columnas
const OcSecurityTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        <div>
          <Reveal><SectionMeta n="08" label="Seguridad, privacidad y soberanía"/></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' }}>
              Dentro del perímetro autorizado.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {['VPC privada', 'On-premise', 'Arquitectura híbrida', 'Entornos aislados', 'Edge', 'Residencia de datos', 'Cifrado', 'Control por roles', 'Mínimo privilegio', 'Segregación de funciones', 'Logs · auditoría', 'Versionado', 'Gobierno de modelos', 'Gestión de secretos', 'Respuesta a incidentes'].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: 16, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em', lineHeight: 1.6 }}>
              [VALIDAR DESPLIEGUE · REGIÓN · HARDWARE · AIR-GAPPED · RESIDENCIA · CONTROL]. No todas las modalidades están disponibles como oferta estándar.
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ marginTop: 16, 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="privacidad.html">Privacidad</Button>
              <Button variant="ghost" icon="arrow-right" href="seguridad.html">Seguridad</Button>
            </div>
          </Reveal>
        </div>
        <div>
          <Reveal delay={80}><SectionMeta n="09" 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' }}>
              La capacidad debe permanecer en la organización.
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#52557A', margin: '0 0 20px' }}>
              OMNIX construye y opera la capacidad mientras el equipo interno desarrolla el conocimiento, los controles y las responsabilidades para asumirla progresivamente.
            </p>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
              {['Documentación', 'Arquitectura', 'SDMs', 'Corpus acordado', 'Reglas', 'Runbooks', 'Workflows', 'Umbrales', 'Gobierno', 'Evaluaciones', 'Monitoreo', 'Excepciones', 'Reentrenamiento', 'Continuidad', 'Capacitación'].map((it) => (
                <div key={it} style={{ padding: '6px 10px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'flex', gap: 4, alignItems: 'center' }}>
                  <i data-lucide="check" width="10" height="10" style={{ color: '#0F5132', strokeWidth: 2 }}/>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#1E1F26' }}>{it}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em', lineHeight: 1.6 }}>
              [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
const OcVs = () => {
  const rows = [
    { tool: 'ERP',            solves: 'Registra transacciones',             lacks: 'No conecta con el contexto de una decisión',       omnix: 'Conecta transacciones con el contexto operacional' },
    { tool: 'CRM',             solves: 'Registra interacciones con cliente', lacks: 'No coordina respuesta entre áreas y sistemas',      omnix: 'Coordina respuesta cross-canal · con evidencia' },
    { tool: 'WMS',             solves: 'Administra inventario',              lacks: 'No contextualiza demanda ni criticidad',           omnix: 'Contextualiza inventario, demanda y criticidad' },
    { tool: 'TMS',              solves: 'Administra transporte',              lacks: 'No coordina con inventario y capacidad',            omnix: 'Coordina transporte con inventario y capacidad' },
    { tool: 'MES',              solves: 'Ejecución de manufactura',           lacks: 'No decide entre alternativas operacionales',        omnix: 'Decide entre alternativas · con reglas y contexto' },
    { tool: 'EAM',              solves: 'Registra activos',                    lacks: 'No decide qué intervención protege la operación',   omnix: 'Ayuda a decidir intervención con contexto multi-dominio' },
    { tool: 'CMMS',             solves: 'Administra órdenes',                  lacks: 'No evalúa prioridad, recursos ni momento',           omnix: 'Evalúa prioridad, recursos, contexto y momento' },
    { tool: 'SCADA',            solves: 'Control industrial',                  lacks: 'No contextualiza entre múltiples dominios',          omnix: 'Contextualiza señales OT con operación completa' },
    { tool: 'BI · dashboards', solves: 'Muestra métricas',                    lacks: 'No mueve la operación',                              omnix: 'Coordina acción · con auditoría · dentro de umbral' },
    { tool: 'Data lake',        solves: 'Consolida datos',                     lacks: 'No razona ni orquesta acciones',                     omnix: 'Convierte datos en decisiones ejecutadas y trazables' },
    { tool: 'RPA',              solves: 'Automatiza pasos predefinidos',       lacks: 'No evalúa contexto ni excepciones',                  omnix: 'Automatiza decisiones · usa RPA como ejecutor' },
    { tool: 'BPM',              solves: 'Orquesta procesos definidos',         lacks: 'No decide qué proceso activar según contexto',       omnix: 'Decide qué proceso activar y con qué parámetros' },
    { tool: 'Copiloto genérico', solves: 'Asiste a un rol',                    lacks: 'Sin gobernanza · sin datos institucionales',          omnix: 'SDM propio · determinístico · dentro del perímetro' },
    { tool: 'LLM genérico',    solves: 'Responde preguntas',                  lacks: 'No razona sobre operaciones ni políticas',            omnix: 'SDMs operacionales · citables · auditables · con MRM' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="10" label="OMNIX vs 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', maxWidth: 900 }}>
            OMNIX no reemplaza · <span style={{ color: '#F4024C' }}>conecta, contextualiza y orquesta</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 720 }}>
            Los sistemas de la organización siguen operando. OMNIX es la capa cognitiva que los coordina alrededor de una decisión.
          </p>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr', background: '#000', color: '#FFF', padding: '18px 24px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            <div>SISTEMA</div>
            <div style={{ color: '#0F5132' }}>QUÉ RESUELVE</div>
            <div style={{ color: '#96A3B5' }}>QUÉ NO POR SÍ SOLO</div>
            <div style={{ color: '#F4024C' }}>QUÉ AGREGA OMNIX</div>
          </div>
          {rows.map((r, i) => (
            <SlideIn key={r.tool} direction="right" delay={i * 30}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr', padding: '14px 24px', borderTop: '1px solid #E4EBF3', background: i % 2 === 0 ? '#FFF' : '#FAFBFD' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#000' }}>{r.tool}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{r.solves}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.4 }}>{r.lacks}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#F4024C', fontWeight: 500, lineHeight: 1.4 }}>{r.omnix}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// ASSESSMENT · 8 preguntas
const OcAssessment = () => {
  const [answers, setAnswers] = React.useState(Array(8).fill(null));
  const [showResult, setShowResult] = React.useState(false);
  const questions = [
    { q: '¿Qué decisión desea mejorar?',                          opts: ['Está clara', 'Aproximada', 'Sin definir'] },
    { q: '¿Con qué frecuencia se toma?',                           opts: ['Diaria/semanal', 'Mensual', 'Ocasional'] },
    { q: '¿Qué ocurre cuando se toma tarde o mal?',                opts: ['Alto impacto', 'Impacto medio', 'Bajo impacto'] },
    { q: '¿Qué sistemas contienen la información?',                 opts: ['≥3 sistemas conocidos', 'Algunos identificados', 'Sin claridad'] },
    { q: '¿Qué áreas deben coordinarse?',                          opts: ['≥3 áreas', '2 áreas', '1 área'] },
    { q: '¿Qué reglas o restricciones deben respetarse?',           opts: ['Documentadas', 'Parciales', 'No documentadas'] },
    { q: '¿Qué KPI demostraría valor?',                             opts: ['Medible hoy', 'Requiere baseline', 'Sin KPI claro'] },
    { q: '¿Qué nivel de autonomía sería aceptable?',                opts: ['Recomendación (N3)', 'Ejecución asistida (N4)', 'Sólo observación (N1)'] },
  ];
  const score = () => {
    if (answers.some(a => a === null)) return null;
    const points = answers.reduce((s, a) => s + (a === 0 ? 3 : a === 1 ? 2 : 1), 0);
    if (points >= 20) return { l: 'BUEN ENCAJE',                 c: '#0F5132', m: 'Su caso tiene alta viabilidad para iniciar un piloto acotado. Recomendación: solicitar diagnóstico cognitivo para definir alcance, arquitectura y plan.' };
    if (points >= 16) return { l: 'ENCAJE POTENCIAL',            c: '#0050BD', m: 'Su caso puede escalar con preparación. Recomendación: sesión de discovery para identificar la decisión más adecuada para comenzar.' };
    if (points >= 12) return { l: 'REQUIERE PREPARACIÓN',        c: '#B8860B', m: 'Algunos elementos requieren definición (datos, KPI, alcance). Recomendación: workshop de mapeo de decisiones antes del diagnóstico.' };
    if (points >= 9)  return { l: 'REQUIERE DEFINICIÓN DE CASO', c: '#B8860B', m: 'El caso requiere trabajo previo con el sponsor ejecutivo. Recomendación: exploración de alternativas de decisión.' };
    return { l: 'NO RECOMENDADO ACTUALMENTE', c: '#EA384C', m: 'Las condiciones actuales sugieren esperar antes de iniciar un piloto. Podemos coordinar una revisión más adelante.' };
  };
  const result = showResult ? score() : null;
  return (
    <section id="assessment" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="11" label="Assessment · encaje comercial"/></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' }}>
              ¿Existe una decisión adecuada <span style={{ color: '#F4024C' }}>para comenzar</span>?
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Ocho preguntas · aproximadamente 2 minutos. El resultado orienta el tipo de conversación · no sustituye una evaluación técnica.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {questions.map((q, i) => (
            <SlideIn key={i} direction="up" delay={i * 40}>
              <div style={{ padding: '18px 20px', background: '#FAFBFD', border: '1px solid #E4EBF3' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C', marginBottom: 8 }}>PREGUNTA · {String(i+1).padStart(2, '0')}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, letterSpacing: '-0.005em', color: '#000', marginBottom: 12, lineHeight: 1.3 }}>{q.q}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {q.opts.map((opt, oi) => (
                    <button key={oi} onClick={() => { const newAns = [...answers]; newAns[i] = oi; setAnswers(newAns); }} style={{
                      padding: '8px 12px', border: '1px solid',
                      borderColor: answers[i] === oi ? '#F4024C' : '#E4EBF3',
                      background: answers[i] === oi ? '#F4024C' : '#FFF',
                      color: answers[i] === oi ? '#FFF' : '#1E1F26',
                      fontFamily: 'var(--font-body)', fontSize: 12,
                      cursor: 'pointer', textAlign: 'left', transition: 'all 220ms',
                    }}>{opt}</button>
                  ))}
                </div>
              </div>
            </SlideIn>
          ))}
        </div>

        <div style={{ marginTop: 32, textAlign: 'center' }}>
          <Reveal>
            <button onClick={() => setShowResult(true)} disabled={answers.some(a => a === null)} style={{
              padding: '14px 28px', border: 'none',
              background: answers.some(a => a === null) ? '#96A3B5' : '#F4024C',
              color: '#FFF',
              fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600,
              cursor: answers.some(a => a === null) ? 'not-allowed' : 'pointer',
            }}>Calcular resultado del assessment →</button>
          </Reveal>
        </div>

        {result && (
          <div style={{ marginTop: 32, padding: 32, background: '#FFF', border: `1.5px solid ${result.c}`, animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
            <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
              <div style={{ width: 48, height: 48, background: result.c, color: '#FFF', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <i data-lucide="target" width="24" height="24" style={{ strokeWidth: 1.5 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: result.c, marginBottom: 6 }}>RESULTADO ORIENTATIVO</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em', color: '#000', margin: '0 0 12px' }}>{result.l}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#1E1F26', margin: '0 0 20px' }}>{result.m}</p>
                <div style={{ padding: '10px 12px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.55, marginBottom: 16 }}>
                  Este resultado orienta la conversación inicial · no constituye una evaluación técnica definitiva.
                </div>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico cognitivo</Button>
                  <Button variant="ghost" icon="arrow-right" href="industrias.html">Ver industrias específicas</Button>
                </div>
              </div>
            </div>
          </div>
        )}
      </Container>
    </section>
  );
};

// PLAN 5 FASES
const OcPlan = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="12" label="Plan de implementació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', maxWidth: 900 }}>
          Cinco fases · <span style={{ color: '#F4024C' }}>no escalar sin evidencia</span>.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', marginTop: 40 }}>
        {[
          { k: 'DIAGNÓSTICO',   dur: '3-4 sem',       f: 'Decisión · resultado · línea base · datos · sistemas · riesgos · responsable' },
          { k: 'PILOTO PROD.',  dur: '8-14 sem',      f: 'Integración controlada · SDM inicial · reglas · HITL · KPIs · logs · evaluación' },
          { k: 'OPERACIÓN',      dur: '3-6 meses',     f: 'Calibración · gestión de excepciones · medición · adopción · evidencia' },
          { k: 'ESCALAMIENTO',   dur: '6-12 meses',    f: 'Nuevas decisiones · dominios · sistemas · equipos · mayor autonomía' },
          { k: 'TRANSFERENCIA',  dur: 'Cuando decida', f: 'Documentación · capacitación · gobierno · operación interna · continuidad' },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 100}>
            <div style={{ padding: '24px 20px', borderRight: (i < 4) ? '1px solid #E4EBF3' : 'none', minHeight: 220, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>FASE 0{i+1}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>{p.dur}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.015em', color: '#F4024C' }}>{p.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.5 }}>{p.f}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

// FAQ · 10 preguntas
const OcFAQ = () => {
  const items = [
    { q: '¿OMNIX funciona para industrias que no aparecen en el sitio?', a: 'Sí, cuando existe una operación crítica, una decisión repetible, sistemas o datos que deben coordinarse y un resultado que puede medirse. OMNIX no requiere que la organización pertenezca a una vertical específica, pero cada caso debe validar su viabilidad técnica, económica, regulatoria y operacional. Si su industria tiene página propia (Banca, Salud, Energía, Minería, Manufactura, Retail, Logística, Telco, Gobierno, Defensa), comience por ahí.' },
    { q: '¿OMNIX es una plataforma genérica de IA?', a: 'No. OMNIX es una plataforma de cognición operacional soberana para operaciones críticas. No es un LLM privado, chatbot, copiloto genérico ni dashboard. Se distingue por construir Modelos de Dominio Especializado sobre datos, reglas y conocimiento de la organización · con orquestación, autonomía configurable, despliegue privado y transferencia progresiva de la capacidad.' },
    { q: '¿Qué tipo de decisión es adecuada para comenzar?', a: 'Una decisión operacional crítica que se repite con frecuencia, involucra múltiples sistemas o áreas, tiene un KPI medible, cuenta con datos accesibles, requiere trazabilidad y puede beneficiarse de coordinación automática con supervisión humana. El assessment de esta página orienta el tipo de conversación · no reemplaza una evaluación técnica.' },
    { q: '¿OMNIX reemplaza ERP, CRM, WMS o CMMS?', a: 'No. OMNIX no reemplaza ERP, CRM, WMS, TMS, MES, EAM, CMMS, SCADA, GIS 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 sobre la arquitectura existente · sin migración forzada.' },
    { q: '¿Qué datos necesita OMNIX?', a: 'Los datos necesarios para la decisión específica que se desea mejorar. Habitualmente: transacciones operacionales, estado de activos o inventario, reglas y procedimientos, agenda o planificación, historial de casos, datos maestros, restricciones regulatorias. El diagnóstico inicial identifica las fuentes mínimas viables · no requiere consolidar todo el data lake.' },
    { q: '¿Puede operar con sistemas antiguos?', a: 'Sí, cuando los sistemas exponen APIs, eventos, conectores autorizados o mecanismos de integración viables. OMNIX no requiere reemplazar sistemas legacy · se integra sobre lo que existe. Los sistemas muy antiguos sin capacidad de integración requieren evaluación técnica específica para determinar mecanismos alternativos autorizados. [VALIDAR INTEGRACIÓN]' },
    { q: '¿Puede desplegarse en infraestructura privada?', a: 'Sí. OMNIX se despliega dentro del perímetro autorizado del cliente. Modalidades: VPC privada en cloud del cliente, on-premise en datacenter propio, arquitectura híbrida, edge, o entornos aislados según requisitos. Los datos, corpus y modelos permanecen dentro del perímetro. La residencia se configura por jurisdicción y sector aplicable.' },
    { q: '¿Qué decisiones puede ejecutar automáticamente?', a: 'Configurables por caso, criticidad y política institucional según niveles N1-N5. El default operacional es N3 (recomendación con aprobación humana). N4-N5 se activan progresivamente cuando aumentan la evidencia, los controles y la confianza operacional. Mantienen aprobación obligatoria: acciones de alto impacto, casos con baja confianza, decisiones regulatorias, cambios masivos y acciones que afecten derechos.' },
    { q: '¿Cómo se mantiene la supervisión humana?', a: 'Con approval flows configurables por dominio y riesgo · segregación de funciones · umbrales de confianza · rollback armado · logs firmados WORM por cada decisión · governance board · revisión posterior de excepciones. La autonomía aumenta únicamente cuando aumentan la evidencia, los controles y la confianza operacional. Sin modo permisivo no autorizado.' },
    { q: '¿Cómo se transfiere el control a la organización?', a: 'Progresivamente a través de las 5 fases: Diagnóstico → Piloto → Operación → Escalamiento → Transferencia. Se transfieren documentación, arquitectura, SDMs, corpus acordado, reglas, runbooks, workflows, umbrales, gobierno, monitoreo, gestión de excepciones, reentrenamiento, continuidad y capacitación. La organización debe poder operar sin OMNIX cuando lo decida.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="faq" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="13" label="Preguntas frecuentes · encaje transversal"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, 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 ? 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 OcCTA = () => (
  <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 por la decisión, no por la tecnología —
          </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' }}>
            Su industria puede cambiar. La necesidad de decidir mejor no.
          </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' }}>
            No necesita una transformación completa para comenzar. Necesita una decisión adecuada, datos accesibles y un resultado medible.
          </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">Evaluar una operación crítica</Button>
            <Button variant="ghost" dark icon="arrow-right" href="industrias.html">Explorar industrias OMNIX</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
            {[
              { l: 'Conocer la plataforma',       h: 'producto.html' },
              { l: 'Explorar los SDMs',            h: 'ias-propietarias.html' },
              { l: 'Ver arquitectura',             h: 'arquitectura.html' },
              { l: 'Trust Center',                 h: 'trust-center.html' },
              { l: 'Modelo de 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, { OcAutonomy, OcSecurityTransfer, OcVs, OcAssessment, OcPlan, OcFAQ, OcCTA });
