// DEFENSA · 6 DOMINIOS + SDMs + IA LOCAL + AUTONOMÍA + GOBERNANZA
// Los 6 dominios se muestran como selector interactivo · NO subpáginas.

const DefDomains = () => {
  const [active, setActive] = React.useState(0);
  const domains = [
    {
      k: 'DATOS E INTEROPERABILIDAD', icon: 'database', color: '#0050BD',
      problem: 'Sistemas fragmentados · taxonomías inconsistentes · identidad de activos ambigua · procedencia no trazable.',
      sources: ['Sistemas administrativos', 'ERP institucional', 'Sistemas de activos', 'Gestión documental', 'Directorio institucional', 'Registros de contratos'],
      sdm: 'SDM · Datos institucionales',
      decision: 'Reconciliar identidad de entidades · detectar inconsistencias · sugerir corrección · escalar a gobernanza',
      action: 'Preparar caso · notificar responsable · registrar linaje · versionar corpus',
      systems: 'ERP · gestión documental · directorio · catálogo',
      autonomy: 'N2 – N3',
      kpi: 'Calidad de datos · % duplicados resueltos · cobertura de taxonomía · trazabilidad',
      human: 'Data steward autoriza correcciones · Gobierno de datos aprueba taxonomías',
      restriction: 'Datos clasificados no salen del perímetro autorizado · segregación por nivel de acceso · anonimización en origen.',
    },
    {
      k: 'LOGÍSTICA Y SOSTENIMIENTO', icon: 'truck', color: '#F4024C',
      problem: 'Repuestos limitados · rutas alternativas no evaluadas · proveedores fragmentados · sin visión de cadena completa.',
      sources: ['Inventarios', 'Órdenes de compra', 'Contratos con proveedores', 'Estado de flota logística', 'Rutas autorizadas', 'Almacenes'],
      sdm: 'SDM · Sostenimiento',
      decision: 'Priorizar reposición · evaluar alternativas · sugerir reasignación · anticipar quiebres',
      action: 'Preparar orden · reservar inventario · notificar proveedor · reprogramar ruta',
      systems: 'ERP · WMS · sistema de compras · portal proveedores',
      autonomy: 'N3 – N4',
      kpi: 'Disponibilidad de repuestos · lead time · costo de sostenimiento · quiebres evitados',
      human: 'Jefe de abastecimiento autoriza cambios de proveedor · aprobación jerárquica por monto',
      restriction: 'Sin adjudicación automática de contratos · sin decisiones de compra sobre umbral autorizado.',
    },
    {
      k: 'MANTENIMIENTO Y PREPARACIÓN', icon: 'wrench', color: '#B8860B',
      problem: 'Fallas no anticipadas · mantenimiento reactivo · personal técnico limitado · readiness reporting manual.',
      sources: ['CMMS institucional', 'Historial de mantenimiento', 'Condición de activos', 'Manuales técnicos', 'Personal técnico disponible', 'Repuestos en taller'],
      sdm: 'SDM · Mantenimiento',
      decision: 'Predicción de condición · priorización de órdenes · sugerencia de sustitución · alerta de obsolescencia',
      action: 'Crear orden de trabajo · asignar taller · reservar repuestos · preparar reporte de disponibilidad',
      systems: 'CMMS · ERP · inventario · gestión documental',
      autonomy: 'N3 – N4',
      kpi: 'Disponibilidad de activos · MTBF · MTTR · % mantenimiento preventivo vs correctivo',
      human: 'Jefe de mantenimiento aprueba órdenes · autoridad valida sustituciones críticas',
      restriction: 'Sin intervención directa sobre activos sensibles sin aprobación humana explícita.',
    },
    {
      k: 'CICLO ECONÓMICO E INSTITUCIONAL', icon: 'landmark', color: '#0F5132',
      problem: 'Presupuesto desconectado de operaciones · contratos sin seguimiento · duplicidades no detectadas · auditoría manual.',
      sources: ['Sistema presupuestario', 'Contratos vigentes', 'Órdenes de pago', 'Proveedores registrados', 'Programas y proyectos', 'Ejecución vs plan'],
      sdm: 'SDM · Ciclo económico',
      decision: 'Detectar anomalías en pagos · priorizar auditorías · identificar duplicidades · alertar desviación presupuestaria',
      action: 'Preparar expediente · marcar para revisión · reconciliar entre sistemas · preparar reporte',
      systems: 'Sistema financiero · sistema de compras · gestión documental · sistemas de proveedores',
      autonomy: 'N2 – N3',
      kpi: 'Anomalías detectadas · casos priorizados · duplicidades regularizadas · adherencia presupuestaria',
      human: 'Auditor institucional revisa cada caso · autoridad presupuestaria aprueba correcciones',
      restriction: 'OMNIX prioriza investigación · nunca determina culpabilidad · nunca aplica sanciones · segregación de funciones preservada.',
    },
    {
      k: 'CIBERDEFENSA Y RESILIENCIA', icon: 'shield-check', color: '#B00238',
      problem: 'Alertas fragmentadas · triage manual · gestión de parches lenta · recuperación sin coordinación.',
      sources: ['SIEM institucional', 'Logs de sistemas', 'Inventario de activos TI', 'Estado de parches', 'Feeds de vulnerabilidades autorizados', 'Runbooks internos'],
      sdm: 'SDM · Ciberdefensa (defensivo)',
      decision: 'Correlacionar alertas · priorizar por impacto · sugerir contención autorizada · programar parche',
      action: 'Preparar respuesta defensiva · notificar CSIRT · activar runbook autorizado · registrar evidencia',
      systems: 'SIEM · gestión de parches · gestión documental · directorio',
      autonomy: 'N2 – N3',
      kpi: 'Tiempo de contención · cobertura de parches · alertas resueltas · continuidad de servicio',
      human: 'CSIRT autoriza cada contención · CISO valida ejecución de runbooks sensibles',
      restriction: 'ALCANCE EXCLUSIVAMENTE DEFENSIVO. No incluye capacidades ofensivas · sin operaciones cibernéticas contra terceros · sin desanonimización.',
    },
    {
      k: 'CONOCIMIENTO INSTITUCIONAL', icon: 'library', color: '#52557A',
      problem: 'Manuales dispersos · normativa desactualizada · lecciones no capitalizadas · rotación erosiona la memoria institucional.',
      sources: ['Gestión documental', 'Manuales técnicos', 'Normativa vigente', 'Lecciones aprendidas', 'Procedimientos aprobados', 'Capacitación'],
      sdm: 'SDM · Conocimiento',
      decision: 'Recuperación semántica · detección de obsolescencia · sugerencia de actualización · trazabilidad de versiones',
      action: 'Preparar respuesta con citas · notificar responsable de vigencia · versionar documento · preparar capacitación',
      systems: 'Gestión documental · repositorio de normativa · plataforma de capacitación',
      autonomy: 'N2 – N3',
      kpi: 'Cobertura de consultas · % con respuesta trazable · obsolescencia detectada · memoria preservada',
      human: 'Responsable normativo aprueba actualizaciones · autoridad valida vigencia',
      restriction: 'Sin creación autónoma de normativa · sin decisiones interpretativas sobre alcance legal · citas obligatorias con procedencia.',
    },
  ];
  const d = domains[active];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="04" label="Seis dominios · un mismo runtime" color="#0050BD"/></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 }}>
            Seis dominios de aplicación · <span style={{ color: '#0050BD' }}>una sola plataforma</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 son subpáginas ni productos separados. Son dominios de decisión que se construyen sobre la misma plataforma OMNIX · con SDM propio, KPI, autonomía graduable y restricciones institucionales.
          </p>
        </Reveal>

        {/* Selector */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 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 < 5) ? '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: 11, letterSpacing: '-0.005em', lineHeight: 1.2 }}>{dom.k}</div>
            </button>
          ))}
        </div>

        {/* Active panel */}
        <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.4fr', 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: 22, letterSpacing: '-0.02em', color: '#000', margin: '4px 0 0', lineHeight: 1.15 }}>{d.k}</h3>
              </div>
            </div>
            <div style={{ padding: '16px 18px', 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: 6 }}>PROBLEMA</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.55 }}>{d.problem}</div>
            </div>
            <div style={{ padding: '16px 18px', background: '#FDE4E7', border: '1px solid #EA384C' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 6 }}>RESTRICCIÓN INSTITUCIONAL</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>{d.restriction}</div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {[
              { l: 'Fuentes',           v: d.sources.join(' · '),  c: '#0050BD' },
              { l: 'SDM recomendado',    v: d.sdm,                  c: '#F4024C' },
              { l: 'Decisión asistida',  v: d.decision,             c: '#1E1F26' },
              { l: 'Acción',              v: d.action,               c: '#F4024C' },
              { l: 'Sistemas',            v: d.systems,              c: '#0050BD' },
              { l: 'Nivel autonomía',     v: d.autonomy,             c: '#F4024C' },
              { l: 'KPI',                 v: d.kpi,                  c: '#0F5132' },
              { l: 'Rol humano',           v: d.human,                c: '#B8860B' },
            ].map((r) => (
              <div key={r.l}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>{r.l}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: r.c, lineHeight: 1.45 }}>{r.v}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
};

// SDMs + IA LOCAL (sección compacta)
const DefSDMLocal = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        {/* SDMs */}
        <div>
          <Reveal><SectionMeta n="05" label="IAs propietarias · SDMs" color="#F4024C"/></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' }}>
              Modelos propios · entrenados sobre la institución.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: '0 0 24px' }}>
              Un <strong>SDM (Specialized Domain Model)</strong> para Defensa se construye sobre datos institucionales, normativa, procedimientos, manuales, historial operacional, conocimiento experto, reglas de autorización y límites de autonomía. Propiedad de la institución. Versionado, auditable, transferible.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ padding: '20px 22px', background: '#FAFBFD', border: '1.5px solid #F4024C' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 12 }}>Corpus entrenable</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {['Datos institucionales', 'Normativa', 'Procedimientos', 'Manuales', 'Historial operacional', 'Conocimiento experto', 'Reglas de autorización', 'Límites de autonomía', 'Taxonomías', 'Contratos', 'Decisiones anteriores'].map((it) => (
                  <span key={it} style={{ padding: '4px 10px', border: '1px solid #F4024C', color: '#F4024C', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em' }}>{it}</span>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
        {/* IA LOCAL / AIR-GAPPED */}
        <div>
          <Reveal delay={100}><SectionMeta n="06" label="IA local · entornos aislados" color="#0050BD"/></Reveal>
          <Reveal delay={180}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
              Operación local · sincronización diferida.
            </h2>
          </Reveal>
          <Reveal delay={240}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: '0 0 24px' }}>
              Modalidades potenciales de despliegue evaluables por proyecto: <strong>VPC privada · on-premise · edge · entornos aislados · operación desconectada con sincronización diferida · air-gapped</strong>. Cada modalidad requiere validación técnica específica.
            </p>
          </Reveal>
          <Reveal delay={300}>
            <div style={{ padding: '20px 22px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 12 }}>Requiere validación por proyecto</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
                {['[VALIDAR ARQUITECTURA]', '[VALIDAR HARDWARE]', '[VALIDAR OPERACIÓN OFFLINE]', '[VALIDAR AIR-GAPPED]', '[VALIDAR EDGE]', '[VALIDAR SINCRONIZACIÓN]'].map((it) => (
                  <div key={it} style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em' }}>{it}</div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </section>
);

// NIVELES DE AUTONOMÍA
const DefAutonomy = () => (
  <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="Niveles de autonomía · Defensa" dark color="#0050BD"/></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 nunca es binaria en Defensa.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 24px' }}>
              La autonomía es <strong style={{ color: '#FFF' }}>configurable, graduable y reversible</strong>. Decisiones de alto impacto institucional mantienen aprobación humana obligatoria.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ padding: '18px 22px', background: '#0A0B10', border: '1.5px solid #EA384C' }} id="usos-excluidos">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 8 }}>USOS EXCLUIDOS · SIN EXCEPCIÓN</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
                {[
                  'Selección de objetivos',
                  'Sistemas de armas',
                  'Operaciones ofensivas',
                  'Vigilancia masiva',
                  'Uso de fuerza',
                  'Operaciones cibernéticas ofensivas',
                  'Sistemas de mando militar',
                  'Perfilamiento opaco de personas',
                  'Decisiones sobre derechos sin revisión humana',
                ].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: 'Detecta y clasifica · sin acción' },
              { n: 'N2', t: 'Recomendación con evidencia',    r: 'Propone alternativas · con fundamento trazable' },
              { n: 'N3', t: 'Ejecución asistida',              r: 'Prepara caso · espera aprobación humana' },
              { n: 'N4', t: 'Ejecución automática controlada', r: 'Sólo acciones recurrentes dentro de umbral autorizado' },
              { n: 'N5', t: 'Coordinación compleja gobernada', r: 'Múltiples acciones · con approval flow jerárquico' },
            ].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(0,80,189,0.10)' : 'transparent',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', color: i === 2 ? '#0050BD' : '#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">DEFENSA DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { DefDomains, DefSDMLocal, DefAutonomy });