// GOBIERNO — HERO + PILARES + NOTA DE HONESTIDAD
// Categoría: Cognición Institucional Soberana
// Nunca "caso de éxito" · siempre "estudio · arquitectura propuesta · escenario"

const GobHero = () => (
  <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% 40%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 78% 40%, #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' }}>Gobierno · Cognición institucional soberana</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              La inteligencia del Estado debe permanecer en el <span style={{ color: '#0050BD' }}>Estado</span>.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.5, color: '#52557A', maxWidth: 640, margin: '0 0 32px' }}>
              OMNIX conecta datos, normativa, sistemas y conocimiento experto para ayudar a los organismos
              públicos a anticipar necesidades, coordinar respuestas y ejecutar decisiones auditables
              bajo control institucional.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Evaluar una misión pública</Button>
              <Button variant="ghost" icon="arrow-right" href="#areas">Explorar áreas de aplicación</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Comenzamos con una decisión, una línea base y un resultado verificable · sin reemplazar los sistemas existentes
            </div>
          </Reveal>

          {/* Nav a 7 subpáginas */}
          <Reveal delay={320}>
            <div style={{ marginTop: 40, borderTop: '1.5px solid #1E1F26', paddingTop: 20 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 14 }}>
                Siete áreas del subsitio
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                {[
                  { l: 'Infraestructura y movilidad',      href: 'gobierno-movilidad.html' },
                  { l: 'Salud pública',                     href: 'gobierno-salud.html' },
                  { l: 'Seguridad · emergencias',           href: 'gobierno-seguridad.html' },
                  { l: 'Servicios públicos digitales',      href: 'gobierno-servicios.html' },
                  { l: 'Eficiencia · integridad',           href: 'gobierno-eficiencia.html' },
                  { l: 'Territorio · medio ambiente',       href: 'gobierno-territorio.html' },
                  { l: 'IAs propietarias para Gobierno',    href: 'gobierno-ia-soberana.html' },
                ].map((d) => (
                  <a key={d.l} href={d.href} style={{
                    padding: '10px 14px', background: '#FAFBFD', border: '1px solid #E4EBF3',
                    fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1E1F26', textDecoration: 'none',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    transition: 'all 200ms',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = '#000'; e.currentTarget.style.color = '#FFF'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = '#FAFBFD'; e.currentTarget.style.color = '#1E1F26'; }}>
                    <span>{d.l}</span>
                    <i data-lucide="arrow-right" width="12" height="12"/>
                  </a>
                ))}
              </div>
            </div>
          </Reveal>
        </div>

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

// Panel: mapa de misiones institucionales con contadores demostrativos
const GobHeroPanel = () => (
  <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>ARQUITECTURA CONCEPTUAL · MISIONES PÚBLICAS</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"/>
        SOVEREIGN
      </span>
    </div>
    <svg viewBox="0 0 560 300" 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="300"/>)}
        {Array.from({length: 7}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
      </g>
      {/* Perímetro Estado */}
      <DrawLine d="M 40 40 L 520 40 L 520 260 L 40 260 Z" stroke="#1E1F26" strokeWidth={1.5} duration={800}/>
      <text x="52" y="60" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">ESTADO · PERÍMETRO SOBERANO</text>
      {/* SDMs */}
      {[
        { x: 100, y: 110, l: 'Movilidad',      c: '#0050BD' },
        { x: 200, y: 110, l: 'Salud',           c: '#F4024C' },
        { x: 300, y: 110, l: 'Seguridad',       c: '#B00238' },
        { x: 400, y: 110, l: 'Servicios',       c: '#0F5132' },
        { x: 460, y: 110, l: 'Integridad',       c: '#B8860B' },
        { x: 100, y: 180, l: 'Territorio',      c: '#0F5132' },
        { x: 200, y: 180, l: 'Emergencias',      c: '#EA384C' },
        { x: 300, y: 180, l: 'Gestión hídrica',c: '#0050BD' },
        { x: 400, y: 180, l: 'Contratos',        c: '#B8860B' },
        { x: 460, y: 180, l: 'Presupuesto',      c: '#F4024C' },
      ].map((n) => (
        <g key={n.l} transform={`translate(${n.x}, ${n.y})`}>
          <rect x="-32" y="-14" width="64" 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, 232)">
        <rect x="-60" y="-14" width="120" height="28" fill="#000" stroke="#F4024C" strokeWidth="1.5"/>
        <text y="4" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="12" fill="#F4024C">OMNIX · CORTEX</text>
      </g>
      {[100, 200, 300, 400, 460].map((x, i) => (
        <line key={i} x1="280" y1="220" x2={x} y2="130" stroke="#96A3B5" strokeWidth="0.5" strokeDasharray="3 3" opacity="0.55"/>
      ))}
    </svg>
    {/* Nota legal · contenido público + confidencialidad de trabajos con Estado */}
    <div style={{ padding: '16px 20px', background: '#FBF3D9', borderTop: '1.5px solid #B8860B', borderBottom: '1px solid #B8860B' }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <i data-lucide="lock" width="18" height="18" 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: 13, color: '#1E1F26', lineHeight: 1.55 }}>
            Este sitio describe la <strong>capacidad potencial</strong> de OMNIX para el sector público. Los trabajos con organismos de <strong>Defensa, Seguridad Nacional e Inteligencia</strong> son reservados por ley. Identidad de clientes, cifras y detalles operacionales no se publican · protegidos por NDA, contratos institucionales y normativa aplicable.
          </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>SIMULATED · arquitectura conceptual</span>
      <span style={{ color: '#0050BD' }}>VPC · on-prem · air-gapped</span>
    </div>
  </div>
);

// SECCIÓN 2 · PROBLEMA STORYBRAND
const GobProblem = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="01" label="El problema del Estado" 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' }}>
            El Estado ya tiene los datos. Falta convertirlos en <span style={{ color: '#0050BD' }}>acción coordinada</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            El conocimiento financiado y construido por el Estado debería transformarse en una capacidad institucional propia · no permanecer fragmentado ni depender permanentemente de proveedores externos.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { k: 'EXTERNO',    t: 'Sistemas y datos fragmentados.',           d: 'Cada ministerio, servicio y municipio opera sistemas propios · plataformas de interoperabilidad avanzan pero la decisión sigue requiriendo reconciliación manual entre múltiples fuentes.' },
          { k: 'INTERNO',    t: 'Los equipos apagan incendios en vez de servir.', d: 'Los funcionarios saben qué misión deben cumplir, pero invierten demasiado tiempo reuniendo información, coordinando por correo y preparando expedientes antes de actuar.' },
          { k: 'FILOSÓFICO', t: 'La capacidad debería quedar en la institución.', d: 'Cada nueva RFP con un proveedor externo reinicia el aprendizaje. La ventaja pública se acumula en la consultora · no en el organismo. La cognición institucional debe construirse para quedarse.' },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 120}>
            <div style={{ padding: '36px 32px', borderRight: (i < 2) ? '1px solid #E4EBF3' : 'none', minHeight: 340 }}>
              <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: 24, letterSpacing: '-0.015em', color: '#000', margin: '0 0 16px', lineHeight: 1.2 }}>{p.t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: 0 }}>{p.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

// SECCIÓN 3 · 6 PILARES (lo que una IA para Gobierno debe garantizar)
const GobPillars = () => {
  const pillars = [
    { i: 'target',      k: 'VALOR PÚBLICO',       p: 'La IA debe mejorar un resultado de misión, no ser un fin en sí mismo.', cap: 'SDMs entrenados sobre datos, normativa y conocimiento experto de cada organismo.', risk: 'Iniciativas que consumen presupuesto sin mejorar continuidad, atención o eficiencia.' },
    { i: 'shield',      k: 'SOBERANÍA',            p: 'El Estado conserva control sobre datos, corpus, modelos, reglas y despliegue.', cap: 'VPC privada · on-premise · air-gapped · segregación entre organismos.', risk: 'Dependencia de proveedores extranjeros con acceso a información sensible.' },
    { i: 'network',     k: 'INTEROPERABILIDAD',    p: 'OMNIX no reemplaza los sistemas existentes · los conecta.',                    cap: 'Adapters a plataformas ministeriales, GIS, ERP, gestión documental, sistemas clínicos.', risk: 'Silos de información que impiden respuesta coordinada.' },
    { i: 'users',       k: 'SUPERVISIÓN HUMANA',   p: 'Cada decisión con impacto en derechos mantiene aprobación humana.',           cap: 'Human-in-the-loop configurable · approval flows · niveles de autonomía graduables.', risk: 'Decisiones automáticas que afectan a personas sin revisión ni apelación.' },
    { i: 'lock',        k: 'SEGURIDAD',             p: 'Datos sensibles, protocolos operativos y capacidades protegidas por diseño.', cap: 'Cifrado · acceso por roles · segregación · trazabilidad · continuidad operacional.', risk: 'Publicación indebida · uso no autorizado · exposición de vulnerabilidades.' },
    { i: 'key-round',   k: 'TRANSFERENCIA',        p: 'La capacidad construida permanece en el Estado, no en el proveedor.',         cap: 'Documentación · runbooks · SDMs · gobierno · capacitación · certificación interna.', risk: 'Dependencia permanente que erosiona la capacidad institucional.' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="02" label="Lo que una IA para Gobierno debe garantizar" 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 56px', color: '#000', maxWidth: 900 }}>
            Seis pilares no negociables antes de firmar.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {pillars.map((p, i) => (
            <SlideIn key={p.k} direction="up" delay={i * 80}>
              <MagneticHover strength={3}>
                <div style={{
                  padding: '32px 28px', border: '1px solid #E4EBF3', background: '#FAFBFD',
                  minHeight: 320, display: 'flex', flexDirection: 'column', gap: 14,
                  transition: 'border-color 220ms',
                }}
                onMouseEnter={(e) => e.currentTarget.style.borderColor = '#0050BD'}
                onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                  <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                    <div style={{ width: 40, height: 40, border: '1.5px solid #0050BD', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <i data-lucide={p.i} width="20" height="20" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD' }}>{p.k}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.005em', color: '#000', lineHeight: 1.3 }}>{p.p}</div>
                  <div style={{ paddingTop: 12, borderTop: '1px solid #E4EBF3' }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Capacidad OMNIX</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.5, marginBottom: 12 }}>{p.cap}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Riesgo que reduce</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{p.risk}</div>
                  </div>
                </div>
              </MagneticHover>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { GobHero, GobProblem, GobPillars });
