// OP CRÍTICAS · 8 dominios interactivos + Video demo 90s + 11 SDMs + 4 capas

const OcDomains = () => {
  const [active, setActive] = React.useState(0);
  const domains = [
    { k: 'ACTIVOS Y MANTENIMIENTO', icon: 'wrench', color: '#F4024C',
      question: '¿Qué activo debemos intervenir primero y con qué recursos?',
      externo: 'Fallas repetitivas · backlog creciente · mantenimiento reactivo · activos fuera de servicio · falta de repuestos.',
      interno: 'Los equipos priorizan por experiencia individual · sin criterio consistente entre turnos, plantas o regiones.',
      trigger: 'Activo crítico degrada · orden pendiente · repuesto limitado · técnico ocupado en otra ubicación.',
      sources: 'EAM · CMMS · Historian · IoT · contratos · WMS',
      sdm: 'sdm.assets · sdm.maintenance',
      decision: 'Priorizar intervención · reservar repuesto · asignar técnico · ajustar plan',
      autonomy: 'N3 · aprobación en intervenciones críticas',
      kpi: 'MTBF · MTTR · backlog · first-time-fix · disponibilidad',
      risk: 'Certificación de seguridad final del activo permanece en Ingeniería',
    },
    { k: 'ABASTECIMIENTO E INVENTARIO', icon: 'package', color: '#0050BD',
      question: '¿Qué debemos comprar, reservar o mover antes de que aparezca una restricción?',
      externo: 'Quiebres · exceso de inventario · compras urgentes · vencimientos · lead times variables.',
      interno: 'Cada sistema muestra su parte del inventario · pero nadie tiene visión consolidada de la red.',
      trigger: 'Demanda anómala · orden pendiente · proveedor cambia ETA · inventario redistribuible en otro sitio.',
      sources: 'ERP · WMS · compras · proveedores · agenda operacional · historial de consumo',
      sdm: 'sdm.supply · sdm.inventory',
      decision: 'Reponer · redistribuir · reservar · sustituir con equivalencia autorizada',
      autonomy: 'N3 · aprobación en compras urgentes y sustitutos',
      kpi: 'Fill rate · quiebres · días de cobertura · OTIF · inventario inmovilizado',
      risk: 'Sin sustitución técnica sin equivalencia documentada · sin compras sin aprobación',
    },
    { k: 'OPERACIONES DE CAMPO', icon: 'truck', color: '#0F5132',
      question: '¿Qué intervención debe realizarse, por quién y en qué secuencia?',
      externo: 'Cuadrillas mal asignadas · visitas repetidas · ETA imprecisos · materiales faltantes en sitio.',
      interno: 'La asignación depende de coordinadores que reconstruyen manualmente la disponibilidad total.',
      trigger: 'Orden crítica · técnico con competencia disponible · ruta óptima · ventana de acceso limitada.',
      sources: 'WFM · CMMS · GIS · movilidad · contratistas · agenda',
      sdm: 'sdm.field-ops',
      decision: 'Despachar · secuenciar · asignar recursos · reservar materiales · actualizar ETA',
      autonomy: 'N3-N4 · con permisos y AST aplicables',
      kpi: 'Tiempo hasta despacho · first-time-fix · visitas repetidas · productividad · seguridad',
      risk: 'Autorizaciones de trabajo · permisos · protocolos LOTO se preservan íntegramente',
    },
    { k: 'CONTINUIDAD Y RESILIENCIA', icon: 'shield-check', color: '#B8860B',
      question: '¿Qué está en riesgo y qué respuesta protege mejor la continuidad?',
      externo: 'Cortes · fallas de infraestructura · caídas de proveedor · dependencias no mapeadas.',
      interno: 'La respuesta se coordina en la crisis · sin visión previa de servicios críticos afectados.',
      trigger: 'Incidente en curso · dependencia crítica en riesgo · comunicación coordinada requerida.',
      sources: 'BMS · SCADA infraestructura · SIEM · gestión de proveedores · comunicaciones',
      sdm: 'sdm.continuity',
      decision: 'Identificar servicios afectados · priorizar recursos · activar contingencia · notificar',
      autonomy: 'N2-N3 · runbooks pre-autorizados por evento',
      kpi: 'MTTD · MTTR · disponibilidad · tiempo de recuperación · servicios afectados',
      risk: 'Sin operaciones cibernéticas ofensivas · sin acciones sobre proveedores sin autorización',
    },
    { k: 'RIESGO, COMPLIANCE E INTEGRIDAD', icon: 'file-search', color: '#EA384C',
      question: '¿Qué caso requiere revisión y qué evidencia debe reunirse?',
      externo: 'Alertas sin priorizar · anomalías repetidas · documentación faltante · excepciones sin trazabilidad.',
      interno: 'Los auditores revisan por muestreo · casos de alto riesgo pueden quedar sin priorizar.',
      trigger: 'Anomalía detectada · umbral excedido · documentación pendiente · auditoría próxima.',
      sources: 'ERP · sistemas de compras · contratos · proveedores · pagos',
      sdm: 'sdm.risk',
      decision: 'Priorizar revisión · preparar antecedentes · escalar caso · registrar evidencia',
      autonomy: 'N2-N3 · sin determinar culpabilidad automáticamente',
      kpi: 'Casos priorizados · anomalías detectadas · tiempo hasta investigación · hallazgos resueltos',
      risk: 'OMNIX prioriza investigación · no determina fraude, culpabilidad ni aplica sanciones',
    },
    { k: 'SERVICIO Y EXPERIENCIA', icon: 'headset', color: '#52557A',
      question: '¿Qué cliente o servicio requiere atención antes de que el problema escale?',
      externo: 'SLA en riesgo · reclamos recurrentes · clientes críticos sin priorización · escalamientos tardíos.',
      interno: 'Cada canal tiene su cola · el cliente experimenta fragmentación en su relación con la organización.',
      trigger: 'SLA a punto de vencer · cliente crítico con incidente · notificación proactiva requerida.',
      sources: 'CRM · service management · comunicaciones · casos históricos · SLA',
      sdm: 'sdm.service',
      decision: 'Priorizar · escalar · notificar proactivamente · coordinar canales',
      autonomy: 'N3 · aprobación en acciones con impacto en cliente',
      kpi: 'SLA cumplido · tiempo de resolución · reclamos escalados · retención · NPS',
      risk: 'Sin acciones sobre cuentas sensibles sin autorización · derechos del cliente preservados',
    },
    { k: 'OPERACIONES ADMINISTRATIVAS', icon: 'clipboard-list', color: '#B00238',
      question: '¿Qué decisión administrativa está frenando la operación?',
      externo: 'Aprobaciones lentas · expedientes incompletos · reconciliaciones manuales · presupuestos sin seguimiento.',
      interno: 'La operación espera decisiones administrativas · sin visibilidad de dónde está atascado el proceso.',
      trigger: 'Aprobación pendiente · expediente incompleto · reconciliación con desviación.',
      sources: 'ERP · sistemas de compras · finanzas · gestión de proyectos · documentos',
      sdm: 'sdm.admin-ops',
      decision: 'Priorizar aprobación · identificar bloqueos · preparar expediente · escalar',
      autonomy: 'N3 · aprobación en decisiones de negocio permanece humana',
      kpi: 'Tiempo de aprobación · expedientes completos · reconciliaciones · desviaciones resueltas',
      risk: 'Segregación de funciones · aprobaciones jerárquicas preservadas · debido proceso',
    },
    { k: 'CONOCIMIENTO INSTITUCIONAL', icon: 'book-open', color: '#1E1F26',
      question: '¿Cómo convertimos el conocimiento acumulado en capacidad utilizable?',
      externo: 'Manuales desactualizados · rotación de personal · procedimientos dispersos · lecciones no capturadas.',
      interno: 'El conocimiento crítico está en pocas personas · se pierde con salidas · no se comparte entre unidades.',
      trigger: 'Nuevo procedimiento · lección aprendida · normativa actualizada · retiro de experto.',
      sources: 'Documentos · procedimientos · manuales · casos históricos · normativa · capacitación',
      sdm: 'sdm.knowledge',
      decision: 'Estructurar · versionar · exponer bajo permisos · asistir en decisión con contexto',
      autonomy: 'N1-N2 · asistencia · no reemplaza juicio experto',
      kpi: 'Cobertura de procedimientos · consultas resueltas · tiempo de onboarding · vigencia',
      risk: 'Sin exposición de información restringida · con control de acceso · versionado y trazabilidad',
    },
  ];
  const d = domains[active];
  return (
    <section id="domains" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="03" label="Mapa de decisiones críticas"/></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 }}>
            Ocho dominios de decisión · <span style={{ color: '#F4024C' }}>aplicables a múltiples industrias</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: '0 0 56px', maxWidth: 780 }}>
            No comenzamos por la tecnología ni por la industria. Comenzamos por una decisión crítica · con datos accesibles, KPI medible, responsable definido y alcance controlado.
          </p>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginBottom: 24, border: '1.5px solid #1E1F26' }}>
          {domains.map((dom, i) => (
            <button key={dom.k} onClick={() => setActive(i)} style={{
              padding: '14px 12px', border: 'none', textAlign: 'left', cursor: 'pointer',
              background: active === i ? '#000' : '#FFF',
              color: active === i ? '#FFF' : '#1E1F26',
              borderRight: (i % 4 < 3) ? '1px solid #E4EBF3' : 'none',
              borderBottom: (i < 4) ? '1px solid #E4EBF3' : 'none',
              transition: 'all 220ms',
              display: 'flex', flexDirection: 'column', gap: 8, minHeight: 100,
            }}>
              <i data-lucide={dom.icon} width="18" height="18" style={{ strokeWidth: 1.5, color: active === i ? dom.color : '#96A3B5' }}/>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: active === i ? dom.color : '#96A3B5' }}>DOM · 0{i+1}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 10, letterSpacing: '-0.005em', lineHeight: 1.2 }}>{dom.k}</div>
            </button>
          ))}
        </div>

        <div key={active} style={{ border: '1.5px solid #1E1F26', background: '#FFF', padding: 40, animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40 }}>
          <div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 20 }}>
              <div style={{ width: 56, height: 56, border: `1.5px solid ${d.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={d.icon} width="24" height="24" style={{ color: d.color, strokeWidth: 1.5 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: d.color }}>DOMINIO · 0{active+1}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, letterSpacing: '-0.02em', color: '#000', margin: '4px 0 0', lineHeight: 1.15 }}>{d.k}</h3>
              </div>
            </div>
            <div style={{ padding: '18px 20px', background: '#FAFBFD', border: `1px solid ${d.color}`, marginBottom: 16 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: d.color, textTransform: 'uppercase', marginBottom: 8 }}>PREGUNTA CENTRAL</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#000', lineHeight: 1.3 }}>{d.question}</div>
            </div>
            <div style={{ padding: '16px 18px', background: '#FBF3D9', border: '1px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>Restricción</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>{d.risk}</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Problema externo</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.5 }}>{d.externo}</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Problema interno</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.5 }}>{d.interno}</div>
              </div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Evento gatillante</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#F4024C', lineHeight: 1.5 }}>{d.trigger}</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, paddingTop: 12, borderTop: '1px solid #E4EBF3' }}>
              {[
                { l: 'Fuentes',    v: d.sources,  c: '#0050BD' },
                { l: 'SDM',         v: d.sdm,      c: '#F4024C' },
                { l: 'Decisión',    v: d.decision, c: '#000' },
                { l: 'Autonomía',   v: d.autonomy, c: '#F4024C' },
                { l: 'KPI',         v: d.kpi,      c: '#0F5132' },
              ].map((r) => (
                <div key={r.l} style={{ gridColumn: r.l === 'Decisión' || r.l === 'KPI' ? 'span 2' : 'auto' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{r.l}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: r.c, lineHeight: 1.45, letterSpacing: '0.02em' }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// VIDEO DEMO 90s · disrupción transversal
const OcDemo = () => {
  const [scene, setScene] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);
  const scenes = [
    { d: 9,  label: 'La operación funciona según el plan',       cap: 'Activos, inventario, proveedores y equipos mantienen el servicio. Múltiples sistemas (ERP · EAM · WMS · CRM · service mgmt) operan en paralelo con sincronización habitual.' },
    { d: 11, label: 'Una condición cambia',                        cap: 'Un activo comienza a degradarse mientras el repuesto necesario tiene disponibilidad limitada. La demanda aumenta simultáneamente. El técnico adecuado está en otra ubicación.' },
    { d: 13, label: 'Cada sistema conoce una parte',              cap: 'El SDM de Operaciones Críticas conecta mantenimiento, inventario, demanda, proveedores y recursos disponibles en una versión común del contexto.' },
    { d: 13, label: 'OMNIX identifica qué está en riesgo',        cap: 'La plataforma relaciona la condición con su impacto operacional, servicios afectados, clientes críticos y restricciones existentes.' },
    { d: 14, label: 'Alternativas evaluadas bajo reglas',          cap: 'Intervenir · aumentar monitoreo · redistribuir repuesto · reasignar técnico · ajustar planificación · activar contingencia · escalar excepción. Comparadas por tiempo, costo, disponibilidad, riesgo, continuidad.' },
    { d: 13, label: 'Decisión aprobada y coordinada',              cap: 'El responsable valida el plan combinado. OMNIX coordina las acciones mediante los sistemas autorizados · cada acción trazable.' },
    { d: 12, label: 'La operación mantiene continuidad',            cap: 'Los recursos se reasignan · la intervención avanza con una versión común del contexto entre las áreas involucradas.' },
    { d: 5,  label: 'Log auditable · KPIs actualizados',           cap: 'Cada señal, evaluación, aprobación y acción registrada. Trazabilidad completa para auditoría operacional y regulatoria.' },
  ];
  const totalMs = scenes.reduce((s, x) => s + x.d * 1000, 0);
  const [elapsed, setElapsed] = React.useState(0);
  React.useEffect(() => {
    if (!playing) return;
    const step = 100;
    const id = setInterval(() => {
      setElapsed((e) => {
        const next = e + step;
        let acc = 0, s = 0;
        for (let i = 0; i < scenes.length; i++) { acc += scenes[i].d * 1000; if (next < acc) { s = i; break; } s = i; }
        if (next >= totalMs) { setScene(0); return 0; }
        setScene(s); return next;
      });
    }, step);
    return () => clearInterval(id);
  }, [playing, totalMs]);
  const progress = Math.min(100, (elapsed / totalMs) * 100);
  const fmt = (ms) => { const s = Math.floor(ms / 1000); return `${Math.floor(s/60)}:${String(s%60).padStart(2, '0')}`; };
  return (
    <section id="demo" style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 56, alignItems: 'end' }}>
          <div>
            <Reveal><SectionMeta n="04" label="Demo · 90 segundos"/></Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
                Una disrupción operacional que atraviesa varios sistemas.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Escenario demostrativo con datos sintéticos y organización no identificable. OMNIX coordina activos, inventario, campo y servicio · sistemas y niveles de autonomía se configuran por proyecto.
            </p>
          </Reveal>
        </div>

        <div style={{ border: '1.5px solid #1E1F26', background: '#000', color: '#FFF', overflow: 'hidden' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 20px', borderBottom: '1.5px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#96A3B5' }}>
            <span>OMNIX · CROSS-INDUSTRY DEMO · SCENE 0{scene+1}/08</span>
            <span style={{ color: '#F4024C', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: '#F4024C' }} className={playing ? 'omnix-blink' : ''}/>
              {playing ? 'PLAYING' : 'PAUSED'}
            </span>
          </div>
          <div style={{ position: 'relative', aspectRatio: '21 / 9', background: '#0A0B10' }}>
            <OcSceneStage scene={scene}/>
            <div style={{ position: 'absolute', top: 20, left: 20, padding: '8px 14px', background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase' }}>[SIMULATED] · [DATOS SINTÉTICOS] · [ORGANIZACIÓN NO IDENTIFICABLE]</div>
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '20px 32px 24px', background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.85) 40%)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#FFF', marginBottom: 8, lineHeight: 1.15 }}>{scenes[scene].label}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#96A3B5', lineHeight: 1.4, maxWidth: 780 }}>{scenes[scene].cap}</div>
            </div>
          </div>
          <div style={{ borderTop: '1.5px solid #2E3140', padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
            <button onClick={() => setPlaying(!playing)} style={ocCtrl} aria-label={playing ? 'Pausar' : 'Reproducir'}><i data-lucide={playing ? 'pause' : 'play'} width="14" height="14"></i></button>
            <button onClick={() => { setElapsed(0); setScene(0); }} style={ocCtrl} aria-label="Reiniciar"><i data-lucide="rotate-ccw" width="14" height="14"></i></button>
            <div style={{ flex: 1, height: 4, background: '#2E3140', position: 'relative' }}>
              <div style={{ position: 'absolute', inset: 0, right: 'auto', width: `${progress}%`, background: '#F4024C', transition: 'width 100ms linear' }}/>
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', minWidth: 68, textAlign: 'right' }}>{fmt(elapsed)} / {fmt(totalMs)}</span>
          </div>
          <div style={{ borderTop: '1.5px solid #2E3140', display: 'grid', gridTemplateColumns: `repeat(${scenes.length}, 1fr)` }}>
            {scenes.map((s, i) => (
              <button key={i} onClick={() => { const before = scenes.slice(0, i).reduce((a, x) => a + x.d * 1000, 0); setElapsed(before); setScene(i); }} style={{ padding: '10px 8px', border: 'none', background: scene === i ? '#F4024C' : '#0A0B10', color: scene === i ? '#FFF' : '#52557A', borderRight: (i < scenes.length - 1) ? '1px solid #2E3140' : 'none', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer' }} aria-label={`Escena ${i+1}`}>{i+1}</button>
            ))}
          </div>
        </div>

        <Reveal delay={200}>
          <details style={{ marginTop: 32, padding: '20px 24px', border: '1px solid #E4EBF3', background: '#FFF' }}>
            <summary style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', cursor: 'pointer' }}>Transcripción del video</summary>
            <div style={{ marginTop: 16, fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.7, color: '#1E1F26' }}>
              {scenes.map((s, i) => (
                <p key={i} style={{ margin: '0 0 10px' }}>
                  <strong>Escena {i+1} · {fmt(scenes.slice(0, i).reduce((a, x) => a + x.d * 1000, 0))} — {s.label}.</strong> {s.cap}
                </p>
              ))}
              <p style={{ margin: '16px 0 0', fontStyle: 'italic', color: '#52557A' }}>
                [ESCENARIO DEMOSTRATIVO] · [DATOS SINTÉTICOS] · [ACTIVOS GENÉRICOS] · [ORGANIZACIÓN NO IDENTIFICABLE]. Las fuentes, reglas, sistemas, responsables y niveles de autonomía se definen para cada organización.
              </p>
            </div>
          </details>
        </Reveal>
      </Container>
    </section>
  );
};

const ocCtrl = { width: 32, height: 32, border: '1px solid #2E3140', background: '#0A0B10', color: '#FFF', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' };

const OcSceneStage = ({ scene }) => (
  <div style={{ position: 'absolute', inset: 0 }}>
    <svg viewBox="0 0 1000 428" style={{ width: '100%', height: '100%' }}>
      <g stroke="#2E3140" strokeWidth="0.5" opacity="0.4">
        {Array.from({length: 21}).map((_, i) => <line key={`v${i}`} x1={i*50} y1="0" x2={i*50} y2="428"/>)}
        {Array.from({length: 10}).map((_, i) => <line key={`h${i}`} x1="0" y1={i*50} x2="1000" y2={i*50}/>)}
      </g>
      {scene === 0 && <OcSc0/>}
      {scene === 1 && <OcSc1/>}
      {scene === 2 && <OcSc2/>}
      {scene === 3 && <OcSc3/>}
      {scene === 4 && <OcSc4/>}
      {scene === 5 && <OcSc5/>}
      {scene === 6 && <OcSc6/>}
      {scene === 7 && <OcSc7/>}
    </svg>
  </div>
);

const OcSc0 = () => (
  <g>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">SISTEMA OPERACIONAL · MÚLTIPLES DOMINIOS · ESTADO NOMINAL</text>
    {[
      { x: 140, y: 160, k: 'ERP' },      { x: 300, y: 160, k: 'EAM · CMMS' },
      { x: 460, y: 160, k: 'WMS' },       { x: 620, y: 160, k: 'CRM · SVC' },
      { x: 780, y: 160, k: 'FIELD OPS' }, { x: 140, y: 300, k: 'DATA LAKE' },
      { x: 300, y: 300, k: 'IoT' },        { x: 460, y: 300, k: 'DOCUMENTOS' },
      { x: 620, y: 300, k: 'REGLAS' },     { x: 780, y: 300, k: 'CORPUS' },
    ].map((n) => (
      <g key={n.k} transform={`translate(${n.x}, ${n.y})`}>
        <rect x="-64" y="-20" width="128" height="40" fill="#0A0B10" stroke="#0F5132" strokeWidth="1.5"/>
        <text y="6" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">{n.k}</text>
      </g>
    ))}
    {[[204,160,236,160],[364,160,396,160],[524,160,556,160],[684,160,716,160],[204,300,236,300],[364,300,396,300],[524,300,556,300],[684,300,716,300],[140,180,140,280],[460,180,460,280]].map((r, i) => (
      <FlowPath key={i} d={`M ${r[0]} ${r[1]} L ${r[2]} ${r[3]}`} stroke="#96A3B5" strokeWidth={0.75} particleColor="#0050BD" particleSize={2.5} duration={2.6 + i * 0.15}/>
    ))}
    <text x="80" y="400" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">MULTIPLE SISTEMAS · OPERANDO EN PARALELO · SINCRONIZACIÓN HABITUAL</text>
  </g>
);

const OcSc1 = () => (
  <g>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#EA384C">CONVERGENCIA DE CONDICIONES · DISRUPCIÓN TRANSVERSAL</text>
    {[
      { x: 80,  y: 130, k: 'ACTIVO',       v: 'degradación', c: '#EA384C' },
      { x: 80,  y: 210, k: 'REPUESTO',    v: 'limitado',     c: '#B8860B' },
      { x: 80,  y: 290, k: 'DEMANDA',     v: '+ inesperada', c: '#B8860B' },
      { x: 80,  y: 370, k: 'TÉCNICO',     v: 'otra ubicación', c: '#B8860B' },
    ].map((r) => (
      <g key={r.k} transform={`translate(${r.x}, ${r.y})`}>
        <rect x="0" y="-24" width="280" height="48" fill="#0A0B10" stroke={r.c} strokeWidth="1.5"/>
        <text x="16" y="-4" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill={r.c}>{r.k}</text>
        <text x="16" y="16" fontFamily="var(--font-display)" fontWeight="700" fontSize="14" fill="#FFF">{r.v}</text>
      </g>
    ))}
    <g transform="translate(600, 250)">
      <circle r="80" fill="none" stroke="#EA384C" strokeWidth="1" opacity="0.4">
        <animate attributeName="r" values="70;90;70" dur="1.6s" repeatCount="indefinite"/>
      </circle>
      <rect x="-110" y="-56" width="220" height="112" fill="#0A0B10" stroke="#EA384C" strokeWidth="2"/>
      <text y="-20" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#EA384C">DISRUPCIÓN</text>
      <text y="8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="18" fill="#FFF">4 condiciones</text>
      <text y="32" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="#96A3B5">convergen simultáneamente</text>
    </g>
  </g>
);

const OcSc2 = () => (
  <g>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">SDM OPERACIONES CRÍTICAS · MULTI-SISTEMA CONTEXT</text>
    {['EAM · estado activo', 'WMS · inventario', 'CMMS · plan mantenimiento', 'ERP · órdenes activas', 'Field · técnicos disponibles', 'Proveedores · ETA actualizado', 'Demanda · consumo real', 'Reglas · políticas'].map((s, i) => (
      <g key={s} transform={`translate(80, ${90 + i * 40})`}>
        <rect x="0" y="-14" width="260" height="28" fill="#0A0B10" stroke="#0050BD" strokeWidth="1"/>
        <text x="12" y="4" fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">{s}</text>
        <FlowPath d={`M 260 0 L 420 0 L 500 130`} stroke="#96A3B5" strokeWidth={0.5} particleColor="#F4024C" particleSize={2} duration={2.2 + i * 0.15}/>
      </g>
    ))}
    <g transform="translate(700, 210)">
      <circle r="80" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.3">
        <animate attributeName="r" values="70;86;70" dur="2.4s" repeatCount="indefinite"/>
      </circle>
      <rect x="-72" y="-54" width="144" height="108" fill="#000" stroke="#F4024C" strokeWidth="2"/>
      <text y="-20" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="16" fill="#FFF">SDM</text>
      <text y="4" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="13" fill="#F4024C">CRITICAL-OPS</text>
      <text y="28" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">v0.5-demo</text>
    </g>
  </g>
);

const OcSc3 = () => (
  <g>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">IMPACTO OPERACIONAL · SERVICIOS Y RECURSOS EN RIESGO</text>
    <text x="80" y="90" fontFamily="var(--font-display)" fontWeight="700" fontSize="20" fill="#FFF">Alcance evaluado · red operacional completa</text>
    {[
      { k: 'SERVICIOS AFECTADOS', n: '3', v: 'Producción · logística · cliente', c: '#EA384C' },
      { k: 'CLIENTES CRÍTICOS',    n: '2', v: 'Contrato SLA · notificación proactiva', c: '#B8860B' },
      { k: 'RECURSOS DISPONIBLES', n: '4', v: 'Repuestos · técnicos · alternativas', c: '#0F5132' },
      { k: 'VENTANA DE ACCIÓN',     n: '6h', v: 'Antes de escalamiento a contingencia', c: '#0050BD' },
    ].map((r, i) => (
      <g key={r.k} transform={`translate(80, ${130 + i * 60})`}>
        <rect x="0" y="0" width="820" height="48" fill="#0A0B10" stroke={r.c} strokeWidth="1.5"/>
        <text x="20" y="20" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill={r.c}>{r.k}</text>
        <text x="20" y="40" fontFamily="var(--font-display)" fontWeight="800" fontSize="18" fill="#FFF">{r.n}</text>
        <text x="80" y="40" fontFamily="var(--font-body)" fontSize="13" fill="#96A3B5">{r.v}</text>
      </g>
    ))}
    <text x="80" y="400" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#F4024C">→ EVALUAR ALTERNATIVAS · SIGUIENTE PASO</text>
  </g>
);

const OcSc4 = () => {
  const opts = [
    { k: 'IMMEDIATE',    t: 'Intervenir inmediatamente · alto costo',      cont: 92, risk: 34, cost: 68, sel: false },
    { k: 'MULTI-COORD',   t: 'Redistribución + reasignación + monitoreo',  cont: 88, risk: 22, cost: 28, sel: true },
    { k: 'REDIST',       t: 'Redistribuir repuesto desde otro sitio',      cont: 76, risk: 32, cost: 18, sel: false },
    { k: 'REASSIGN',     t: 'Reasignar técnico · esperar repuesto',        cont: 62, risk: 48, cost: 14, sel: false },
    { k: 'MONITOR',       t: 'Monitoreo reforzado · mantener plan',        cont: 48, risk: 62, cost: 6,  sel: false },
    { k: 'CONTINGENCY',   t: 'Activar contingencia total',                  cont: 96, risk: 12, cost: 78, sel: false },
    { k: 'ESCALATE',      t: 'Escalar excepción a comité',                  cont: 72, risk: 38, cost: 22, sel: false },
  ];
  return (
    <g>
      <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">DEEP THINK · 7 ALTERNATIVAS COMPARADAS</text>
      <g transform="translate(80, 100)">
        <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#96A3B5">ACCIÓN</text>
        <text x="440" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">CONTINUIDAD</text>
        <text x="600" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#B8860B">RIESGO</text>
        <text x="760" y="0" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#EA384C">COSTO</text>
      </g>
      {opts.map((o, i) => (
        <g key={o.k} transform={`translate(80, ${132 + i * 40})`}>
          {o.sel && <rect x="-8" y="-14" width="836" height="32" fill="#F4024C" opacity="0.10"/>}
          {o.sel && <rect x="-8" y="-14" width="4" height="32" fill="#F4024C"/>}
          <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill={o.sel ? '#F4024C' : '#96A3B5'}>0{i+1} · {o.k}</text>
          <text x="0" y="14" fontFamily="var(--font-display)" fontWeight="700" fontSize="12" fill="#FFF">{o.t}</text>
          {[{ x: 440, v: o.cont, c: '#0F5132' }, { x: 590, v: o.risk, c: '#B8860B' }, { x: 740, v: o.cost, c: '#EA384C' }].map((b, j) => (
            <g key={j}>
              <rect x={b.x} y="4" width="100" height="6" fill="#2E3140"/>
              <rect x={b.x} y="4" width={Math.min(100, b.v)} height="6" fill={b.c}>
                <animate attributeName="width" from="0" to={Math.min(100, b.v)} dur="0.9s" begin={`${i * 0.08}s`} fill="freeze"/>
              </rect>
              <text x={b.x} y="24" fontFamily="var(--font-mono)" fontSize="10" fill={b.c}>{b.v}%</text>
            </g>
          ))}
          {o.sel && <text x="880" y="0" textAnchor="end" fontFamily="var(--font-mono)" fontSize="10" fill="#F4024C">SELECTED</text>}
        </g>
      ))}
    </g>
  );
};

const OcSc5 = () => (
  <g>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">APPROVAL FLOW · CADENA DE RESPONSABILIDAD</text>
    {[
      { r: 'ANÁLISIS OPERACIONAL',     s: '✓ Coordinador Ops · alternativa MULTI-COORD validada', t: '11:12' },
      { r: 'VALIDACIÓN INVENTARIO',      s: '✓ Supply · disponibilidad de repuesto confirmada', t: '11:18' },
      { r: 'COORDINACIÓN FIELD',          s: '✓ Field · técnico reasignado · ventana confirmada', t: '11:24' },
      { r: 'AUTORIZACIÓN RESPONSABLE',    s: '✓ Director Ops · dentro de umbral · acción coordinada', t: '11:31' },
    ].map((n, i) => (
      <g key={n.r} transform={`translate(80, ${100 + i * 76})`}>
        <rect x="0" y="0" width="820" height="58" fill="#0A0B10" stroke="#0F5132" strokeWidth="1.5"/>
        <text x="20" y="22" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">{n.r}</text>
        <text x="20" y="44" fontFamily="var(--font-body)" fontSize="13" fill="#FFF">{n.s}</text>
        <text x="800" y="34" textAnchor="end" fontFamily="var(--font-mono)" fontSize="11" fill="#96A3B5">{n.t}</text>
      </g>
    ))}
    <text x="80" y="410" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0050BD">✓ CADENA COMPLETA · 4 ROLES · TRACE #OC-e7f3 · signed WORM</text>
  </g>
);

const OcSc6 = () => (
  <g>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">EJECUCIÓN COORDINADA · SISTEMAS ACTUALIZADOS</text>
    <g transform="translate(500, 214)">
      <circle r="60" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.4">
        <animate attributeName="r" values="50;68;50" dur="1.6s" repeatCount="indefinite"/>
      </circle>
      <rect x="-52" y="-52" width="104" height="104" fill="#F4024C" stroke="#F4024C" strokeWidth="2"/>
      <text y="-8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="16" fill="#FFF">OMNIX</text>
      <text y="18" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">RUNTIME</text>
    </g>
    {[
      { s: 'EAM',       a: 'orden intervención priorizada',    x: 150, y: 100 },
      { s: 'WMS',        a: 'repuesto reservado + tránsito',    x: 850, y: 100 },
      { s: 'FIELD',      a: 'técnico reasignado · ETA',         x: 150, y: 340 },
      { s: 'CRM · SVC',  a: 'clientes notificados proactivo',   x: 850, y: 340 },
    ].map((s) => (
      <g key={s.s}>
        <FlowPath d={`M 500 214 L ${s.x} ${s.y}`} stroke="#F4024C" strokeWidth={1.5} particleColor="#F4024C" particleSize={4} duration={1.4} pulseWidth/>
        <g transform={`translate(${s.x}, ${s.y})`}>
          <rect x="-104" y="-24" width="208" height="48" fill="#0A0B10" stroke="#0F5132" strokeWidth="1.5"/>
          <text x="-90" y="-4" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#FFF">{s.s}</text>
          <text x="-90" y="14" fontFamily="var(--font-mono)" fontSize="9" fill="#0F5132">✓ {s.a}</text>
        </g>
      </g>
    ))}
    <text x="80" y="410" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#0F5132">✓ TX #OC-e7f3 · 4 sistemas · signed WORM · reversible</text>
  </g>
);

const OcSc7 = () => (
  <g>
    <text x="80" y="60" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fill="#96A3B5">DECISION TRACE · AUDITORÍA COMPLETA</text>
    <g transform="translate(80, 90)">
      <rect x="0" y="0" width="840" height="310" fill="#0A0B10" stroke="#F4024C" strokeWidth="1.5"/>
      <text x="20" y="30" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#F4024C">TRACE · #OC-e7f3 · signed WORM · retention según contrato</text>
      {[
        'timestamp:   2026-11-14 11:12:32.104 local',
        'organization: (anonimizado en publicación)',
        'sdm:         sdm.critical-operations-v0.5',
        'signals:     EAM · WMS · CMMS · ERP · Field · proveedores · demanda',
        'convergence: activo degradado · repuesto limitado · demanda + · técnico ocupado',
        'impact:      3 servicios · 2 clientes críticos · ventana 6h',
        'options:     7 evaluated · continuity + risk + cost scored',
        'selected:    option 02 · MULTI-COORD · continuidad 88% · riesgo 22%',
        'approval:    director ops · dentro de umbral · sin acciones críticas autónomas',
        'systems:     EAM · WMS · Field · CRM',
        'result:      intervención priorizada · repuesto en tránsito · técnico reasignado',
        'reversible:  yes · ventana 12h',
        'evidence:    signed WORM · datos sintéticos en demo',
      ].map((line, i) => (
        <text key={i} x="20" y={60 + i * 20} fontFamily="var(--font-mono)" fontSize="11" fill="#FFF">
          <tspan fill="#52557A">{`0${i+1}  `}</tspan>{line}
        </text>
      ))}
    </g>
  </g>
);

// 11 SDMs
const OcSDMs = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="05" label="SDMs · IAs propietarias"/></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' }}>
            Once familias genéricas · entrenadas sobre <span style={{ color: '#F4024C' }}>su operación</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            Un <strong>Modelo de Dominio Especializado</strong> es una inteligencia configurada sobre los datos, reglas, procesos, restricciones y conocimiento experto de una organización para apoyar decisiones específicas dentro de límites gobernados.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {[
          { n: 'sdm.operations',   t: 'SDM Operaciones',                 d: 'Coordinación transversal · cross-dominios · una versión común del contexto.',   risk: 'MEDIO' },
          { n: 'sdm.assets',       t: 'SDM Activos',                     d: 'Salud del activo · criticidad · consecuencia de falla · ciclo de vida.',        risk: 'ALTO' },
          { n: 'sdm.maintenance',  t: 'SDM Mantenimiento',                d: 'Priorización preventivo/predictivo/correctivo · coordinación de recursos.',   risk: 'ALTO' },
          { n: 'sdm.supply',       t: 'SDM Abastecimiento',               d: 'Predicción de demanda · redistribución · sustitutos autorizados.',               risk: 'MEDIO' },
          { n: 'sdm.inventory',    t: 'SDM Inventario',                    d: 'Visibilidad multi-sitio · precisión · lotes y vencimientos.',                  risk: 'MEDIO' },
          { n: 'sdm.field-ops',    t: 'SDM Field Service',                 d: 'Despacho · secuencia · ETA · permisos y AST preservados.',                     risk: 'MEDIO' },
          { n: 'sdm.continuity',   t: 'SDM Continuidad',                    d: 'Correlación de incidentes · coordinación de recuperación.',                    risk: 'ALTO' },
          { n: 'sdm.risk',          t: 'SDM Riesgo',                         d: 'Detección de anomalías · priorización de auditoría · segregación funciones.', risk: 'ALTO' },
          { n: 'sdm.service',       t: 'SDM Servicio',                       d: 'Priorización · SLA · notificación proactiva · coordinación cross-canal.',      risk: 'MEDIO' },
          { n: 'sdm.knowledge',      t: 'SDM Conocimiento',                    d: 'Manuales · procedimientos · lecciones · normativa · con vigencia.',           risk: 'BAJO' },
          { n: 'sdm.admin-ops',     t: 'SDM Operaciones Administrativas',    d: 'Aprobaciones · expedientes · reconciliaciones · sin decisiones de negocio autónomas.', risk: 'MEDIO' },
        ].map((s, i) => (
          <SlideIn key={s.n} direction="up" delay={i * 40}>
            <div style={{ padding: '20px 22px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 130, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#F4024C' }}>{s.n}</span>
                <Badge tone={s.risk === 'ALTO' ? 'fuxia' : (s.risk === 'MEDIO' ? 'warning' : 'outline')}>RIESGO {s.risk}</Badge>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#000' }}>{s.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#52557A', lineHeight: 1.5 }}>{s.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// 4 CAPAS
const OcLayers = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="06" label="Cómo funciona OMNIX"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
          Cuatro capas · vocabulario operacional · integración autorizada.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {[
          { n: '01', k: 'BASE OPERACIONAL', color: '#0050BD',
            t: 'Fuentes y sistemas de la organización.',
            note: 'Integración vía APIs, eventos, conectores y mecanismos autorizados de la arquitectura de cada organización.',
            items: ['ERP', 'CRM', 'WMS', 'TMS', 'MES', 'EAM', 'CMMS', 'SCADA', 'GIS', 'IoT', 'Sistemas propios', 'Data lakes', 'APIs · eventos', 'Documentos', 'Datos maestros'] },
          { n: '02', k: 'COGNICIÓN PRIVADA', color: '#F4024C',
            t: '11 SDMs entrenados sobre la operación.',
            note: 'Modelos propietarios · corpus del cliente · versionados · auditables · dentro del perímetro.',
            items: ['11 SDMs', 'Datos operacionales', 'Reglas', 'Procedimientos', 'Historial', 'Conocimiento experto', 'Restricciones', 'Razonamiento auditable', 'Gobierno de modelos', 'Drift monitoring', 'HITL', 'Explicabilidad'] },
          { n: '03', k: 'ORQUESTACIÓN', color: '#1E1F26',
            t: 'Acciones coordinadas cross-sistema.',
            note: 'Cada acción configurable por umbrales · aprobación humana en decisiones críticas · rollback armado.',
            items: ['Detectar', 'Contextualizar', 'Evaluar', 'Recomendar', 'Solicitar aprobación', 'Crear órdenes', 'Coordinar sistemas', 'Notificar', 'Ejecutar workflows', 'Registrar', 'Medir', 'Rollback'] },
          { n: '04', k: 'IMPACTO', color: '#B00238',
            t: 'KPIs medibles y capacidad transferida.',
            note: 'Publicación cuantitativa requiere [VALIDAR MÉTRICA] con metodología firmada.',
            items: ['Continuidad', 'Disponibilidad', 'Productividad', 'Tiempo de respuesta', 'Inventario', 'Costos', 'Servicio', 'Riesgo', 'Decisiones auditadas', 'Capacidad transferida'] },
        ].map((L, i) => (
          <SlideIn key={L.k} direction={i % 2 === 0 ? 'right' : 'left'} delay={i * 100}>
            <div style={{ padding: '32px 28px', background: '#FFF', border: '1px solid #E4EBF3', minHeight: 380, display: 'flex', flexDirection: 'column', gap: 14, transition: 'border-color 220ms' }}
              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>
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#B8860B', margin: 0, lineHeight: 1.5 }}>* {L.note}</p>
              <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>
);

Object.assign(window, { OcDomains, OcDemo, OcSDMs, OcLayers });
