// DEFENSA — HERO + RESPUESTA AEO + DISCLAIMER NO-CINÉTICO + PROBLEMA + 3 EJES
// Página única, no micrositio. Nivel de navegación: industria.
// Exclusión explícita: armas, mando militar, vigilancia masiva, uso de fuerza.

const DefHero = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 96, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'linear-gradient(#E4EBF3 1px, transparent 1px), linear-gradient(90deg, #E4EBF3 1px, transparent 1px)',
      backgroundSize: '80px 80px', opacity: 0.55, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 78% 42%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 78% 42%, #000 0%, transparent 60%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <a href="industrias.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#52557A', textDecoration: 'none', textTransform: 'uppercase' }}>← Industrias</a>
              <span style={{ color: '#96A3B5' }}>/</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase' }}>Defensa y operaciones críticas</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 74, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              Datos soberanos para <span style={{ color: '#0050BD' }}>decisiones institucionales</span> coordinadas.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 20, lineHeight: 1.5, color: '#52557A', maxWidth: 640, margin: '0 0 32px' }}>
              OMNIX conecta datos, activos, mantenimiento, logística, presupuesto, infraestructura y
              conocimiento institucional para apoyar decisiones auditables mediante IAs privadas,
              locales y gobernadas.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar sesión institucional</Button>
              <Button variant="ghost" icon="arrow-right" href="#arquitectura">Revisar arquitectura soberana</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              La evaluación inicial puede realizarse con escenarios demostrativos y datos no sensibles
            </div>
          </Reveal>
          {/* Disclaimer NO-CINÉTICO obligatorio */}
          <Reveal delay={320}>
            <div style={{ marginTop: 32, padding: '20px 24px', background: '#FDE4E7', border: '1.5px solid #EA384C' }}>
              <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <i data-lucide="ban" width="20" height="20" style={{ color: '#EA384C', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 6 }}>Alcance excluido</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.6 }}>
                    OMNIX se limita a <strong>operaciones no cinéticas de apoyo</strong>. No participa en selección de objetivos, sistemas de armas, operaciones ofensivas, vigilancia masiva ni decisiones relacionadas con el uso de fuerza. Ver <a href="#usos-excluidos" style={{ color: '#EA384C', textDecoration: 'underline' }}>alcance completo</a>.
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <DefHeroPanel/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Panel: perímetro soberano + 6 dominios + operación local/aislada
const DefHeroPanel = () => (
  <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD' }}>
    <div style={{
      display: 'flex', justifyContent: 'space-between', padding: '14px 20px',
      borderBottom: '1.5px solid #1E1F26',
      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A',
    }}>
      <span>PERÍMETRO SOBERANO · 6 DOMINIOS · NO CINÉTICO</span>
      <span style={{ color: '#0050BD', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: '#0050BD' }} className="omnix-blink"/>
        GOVERNED
      </span>
    </div>
    <svg viewBox="0 0 560 280" style={{ display: 'block', width: '100%', height: 'auto', background: '#FFF' }}>
      <g stroke="#E4EBF3" strokeWidth="0.5">
        {Array.from({length: 12}).map((_, i) => <line key={i} x1={i*50} y1="0" x2={i*50} y2="280"/>)}
        {Array.from({length: 6}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
      </g>
      {/* Perímetro institucional */}
      <DrawLine d="M 30 40 L 530 40 L 530 240 L 30 240 Z" stroke="#1E1F26" strokeWidth={1.5} duration={800}/>
      <text x="42" y="60" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">INSTITUCIÓN · PERÍMETRO SOBERANO</text>
      {/* 6 dominios como SDMs */}
      {[
        { x: 100, y: 110, l: 'Datos',            c: '#0050BD' },
        { x: 220, y: 110, l: 'Logística',         c: '#F4024C' },
        { x: 340, y: 110, l: 'Mantenimiento',      c: '#B8860B' },
        { x: 460, y: 110, l: 'Ciclo económico',    c: '#0F5132' },
        { x: 160, y: 190, l: 'Ciberdefensa',       c: '#B00238' },
        { x: 400, y: 190, l: 'Conocimiento',       c: '#52557A' },
      ].map((n) => (
        <g key={n.l} transform={`translate(${n.x}, ${n.y})`}>
          <rect x="-38" y="-14" width="76" height="28" fill="#FFF" stroke={n.c} strokeWidth="1"/>
          <text y="-18" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.12em" fill={n.c}>SDM</text>
          <text y="4" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#1E1F26">{n.l}</text>
        </g>
      ))}
      {/* Cortex central */}
      <g transform="translate(280, 148)">
        <circle r="6" fill="#0050BD"/>
        <circle r="14" fill="none" stroke="#0050BD" strokeWidth="1" opacity="0.4">
          <animate attributeName="r" values="10;18;10" dur="2s" repeatCount="indefinite"/>
        </circle>
      </g>
      {[100, 220, 340, 460, 160, 400].map((x, i) => {
        const y = i < 4 ? 124 : 176;
        return <line key={i} x1="280" y1="148" x2={x} y2={y} stroke="#96A3B5" strokeWidth="0.5" strokeDasharray="3 3" opacity="0.55"/>;
      })}
    </svg>
    <div style={{ padding: '16px 20px', background: '#FBF3D9', borderTop: '1.5px solid #B8860B' }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <i data-lucide="lock" width="16" height="16" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>CONTENIDO PÚBLICO · CAPACIDAD POTENCIAL</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.55 }}>
            Este contenido describe capacidad potencial. Trabajos con instituciones de Defensa son reservados por ley. Identidad de contrapartes, ubicaciones, unidades y activos no se publican.
          </div>
        </div>
      </div>
    </div>
    <div style={{
      borderTop: '1.5px solid #1E1F26', padding: '10px 20px', background: '#000',
      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase',
      display: 'flex', justifyContent: 'space-between',
    }}>
      <span>VPC · on-prem · edge · air-gapped [VALIDAR]</span>
      <span style={{ color: '#0050BD' }}>Operación no cinética</span>
    </div>
  </div>
);

// RESPUESTA AEO PRINCIPAL — bloque visible + citable por LLM
const DefAEO = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 72, paddingBottom: 72, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 40, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase' }}>Respuesta AEO</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', marginTop: 4 }}>tl;dr</div>
        </div>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.55, color: '#000', margin: 0, maxWidth: 900 }}>
          OMNIX es una plataforma de <strong>cognición operacional soberana</strong> para instituciones de Defensa y organizaciones públicas responsables de operaciones críticas. Conecta datos, activos, procesos administrativos, mantenimiento, logística y conocimiento experto para detectar condiciones, priorizar recursos y coordinar workflows auditables bajo control institucional · limitada a <strong>operaciones no cinéticas de apoyo</strong>.
        </p>
      </div>
    </Container>
  </section>
);

// PROBLEMA INSTITUCIONAL
const DefProblem = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="01" label="El problema institucional" color="#0050BD"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            Sistemas fragmentados. Decisiones que <span style={{ color: '#0050BD' }}>dependen de personas</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            Una IA institucional solo puede ser confiable cuando sus datos, fuentes, permisos y responsabilidades también están gobernados.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { k: 'EXTERNO',    t: 'Datos, activos y contratos en silos.',      d: 'Los sistemas de logística, mantenimiento, presupuesto, adquisiciones y conocimiento operan por separado. Cada decisión requiere reconciliación manual entre 4-6 sistemas · con reglas de acceso, clasificación y auditoría distintas.' },
          { k: 'INTERNO',    t: 'La memoria institucional se pierde.',       d: 'El conocimiento experto sobre activos, procedimientos y decisiones anteriores queda en personas específicas. La rotación institucional erosiona la capacidad. Cada nuevo equipo reinicia el aprendizaje.' },
          { k: 'FILOSÓFICO', t: 'La IA sin control no es IA institucional.', d: 'Adoptar IA sin gobierno de datos, sin trazabilidad por decisión y sin transferencia de capacidad convierte al proveedor externo en portador del conocimiento del Estado. La cognición institucional debe construirse para permanecer.' },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 120}>
            <div style={{ padding: '36px 32px', borderRight: (i < 2) ? '1px solid #E4EBF3' : 'none', minHeight: 320 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', marginBottom: 20 }}>PROBLEMA {p.k}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: '0 0 16px', lineHeight: 1.2 }}>{p.t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#52557A', margin: 0 }}>{p.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

// TRES EJES: DATOS · SOBERANÍA · HIPERAUTOMATIZACIÓN
const DefThreeAxes = () => (
  <section id="arquitectura" style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="02" label="Tres ejes de la propuesta" dark color="#0050BD"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#FFF', maxWidth: 980 }}>
          Datos gobernados · IAs propietarias · hiperautomatización supervisada.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          {
            n: '01', k: 'PROYECTOS DE DATOS', c: '#0050BD', icon: 'database',
            claim: 'Una IA institucional solo puede ser confiable cuando sus datos, fuentes, permisos y responsabilidades también están gobernados.',
            items: [
              'Conectar fuentes fragmentadas',
              'Capa común de datos',
              'Taxonomías institucionales',
              'Identidad de activos · personas · contratos',
              'Calidad y procedencia',
              'Visión operacional compartida',
              'Gestión de accesos y clasificación',
              'Trazabilidad por dato y decisión',
              'Preparación para SDMs',
            ],
          },
          {
            n: '02', k: 'SOBERANÍA COGNITIVA', c: '#F4024C', icon: 'shield',
            claim: 'Modelos propios entrenados sobre datos institucionales · desplegados dentro del perímetro autorizado · con control sobre corpus, versiones, permisos y actualizaciones.',
            items: [
              'Specialized Domain Models (SDMs)',
              'VPC privada · on-premise',
              'Edge · entornos aislados',
              'Operación desconectada [VALIDAR]',
              'Sincronización diferida [VALIDAR]',
              'Air-gapped [VALIDAR ARQUITECTURA]',
              'Control corpus · modelo · versiones',
              'Gobierno de permisos y reglas',
              'Continuidad · sustitución de proveedores',
            ],
          },
          {
            n: '03', k: 'HIPERAUTOMATIZACIÓN', c: '#B8860B', icon: 'workflow',
            claim: 'Coordinación automatizada y gobernada de datos, procesos, sistemas y equipos · manteniendo supervisión humana en decisiones de alto impacto.',
            items: [
              'Preparación de órdenes',
              'Priorización de mantenimiento',
              'Reposición de inventario',
              'Gestión de excepciones',
              'Coordinación de cuadrillas',
              'Gestión documental',
              'Flujos de aprobación',
              'Seguimiento de contratos',
              'Triage de alertas',
              'Preparación de reportes · auditoría',
            ],
          },
        ].map((e, i) => (
          <SlideIn key={e.n} direction="up" delay={i * 100}>
            <div style={{ padding: '32px 28px', background: '#0A0B10', border: `1.5px solid ${e.c}`, minHeight: 520, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ width: 40, height: 40, border: `1.5px solid ${e.c}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={e.icon} width="20" height="20" style={{ color: e.c, strokeWidth: 1.5 }}/>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: e.c }}>EJE · {e.n}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.02em', color: '#FFF', lineHeight: 1.15 }}>{e.k}</div>
              <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14, lineHeight: 1.6, color: '#96A3B5', margin: 0 }}>{e.claim}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6, borderTop: `1px solid ${e.c}`, paddingTop: 14 }}>
                {e.items.map((it) => (
                  <li key={it} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFF', letterSpacing: '0.04em' }}>
                    <span style={{ color: e.c }}>·</span>{it}
                  </li>
                ))}
              </ul>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

Object.assign(window, { DefHero, DefAEO, DefProblem, DefThreeAxes });