// GOBIERNO — Gobernanza · Autonomía · Benchmark · Modelo de prueba · Transferencia · CTA · Objeciones

// GOBERNANZA BASADA EN RIESGO
const GobRiskGovernance = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="04" label="Gobernanza basada en riesgo" 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 }}>
          Cada caso clasificado por su nivel de riesgo institucional.
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 780 }}>
          No todos los casos requieren el mismo nivel de supervisión. La clasificación por riesgo define supervisión humana, evaluación de impacto, evidencia y responsable institucional.
        </p>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          {
            k: 'BAJO', c: '#0F5132', bg: '#E3F2E9',
            cases: ['Búsqueda documental', 'Resumen de expedientes', 'Clasificación interna', 'Apoyo administrativo'],
            controls: ['Supervisión ligera', 'Auditoría estándar', 'Sin approval flow obligatorio', 'Métricas post'],
            resp: 'Jefe de área operacional',
          },
          {
            k: 'MEDIO', c: '#B8860B', bg: '#FBF3D9',
            cases: ['Predicción operacional', 'Priorización de recursos', 'Recomendación de mantenimiento', 'Detección de anomalías'],
            controls: ['Supervisión humana en decisiones', 'Evaluación de impacto', 'Approval flow configurable', 'Monitoreo continuo', 'Rollback disponible'],
            resp: 'Director de servicio',
          },
          {
            k: 'ALTO', c: '#EA384C', bg: '#FDE4E7',
            cases: ['Beneficios ciudadanos', 'Salud', 'Seguridad', 'Fiscalización', 'Contratación', 'Empleo público', 'Decisiones sobre derechos'],
            controls: ['HITL obligatorio', 'Evaluación de impacto en derechos', 'Explicabilidad completa', 'Evidencia detallada', 'Aprobación jerarquizada', 'Mecanismo de revisión ciudadano', 'Derecho a apelación', 'Rollback trazable'],
            resp: 'Autoridad · responsable político',
          },
        ].map((r, i) => (
          <SlideIn key={r.k} direction="up" delay={i * 100}>
            <div style={{ padding: '32px 28px', background: r.bg, border: `1.5px solid ${r.c}`, minHeight: 460, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: r.c }}>RIESGO · {r.k}</div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>CASOS TÍPICOS</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {r.cases.map((c) => (
                    <li key={c} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26' }}>
                      <span style={{ color: r.c }}>—</span>{c}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>CONTROLES REQUERIDOS</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {r.controls.map((c) => (
                    <li key={c} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-body)', fontSize: 12, color: '#000' }}>
                      <i data-lucide="check" width="12" height="12" style={{ color: r.c, strokeWidth: 2, marginTop: 3, flexShrink: 0 }}/>
                      {c}
                    </li>
                  ))}
                </ul>
              </div>
              <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: `1px solid ${r.c}` }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>RESPONSABLE</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: r.c, fontWeight: 600 }}>{r.resp}</div>
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// AUTONOMÍA + LÍMITES
const GobAutonomy = () => (
  <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="05" label="Niveles de autonomía" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FFF', margin: '0 0 20px' }}>
              La autonomía nunca es binaria en Gobierno.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 32px' }}>
              Decisiones sobre derechos, beneficios, salud, sanciones, seguridad, infraestructura o presupuesto mantienen aprobación humana obligatoria.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ padding: '18px 22px', background: '#0A0B10', border: '1.5px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 8 }}>APROBACIÓN HUMANA OBLIGATORIA</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#FFF', lineHeight: 1.6 }}>
                Derechos · beneficios · salud · sanciones · seguridad · cierres de infraestructura · modificaciones contractuales · decisiones presupuestarias relevantes · acciones de alto impacto ciudadano.
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            {[
              { n: 'N1', t: 'Observación',               r: 'Conecta y clasifica información' },
              { n: 'N2', t: 'Predicción',                r: 'Anticipa condiciones · alerta temprana' },
              { n: 'N3', t: 'Recomendación',              r: 'Propone alternativas y fundamentos' },
              { n: 'N4', t: 'Ejecución asistida',         r: 'Prepara acción · espera aprobación' },
              { n: 'N5', t: 'Ejecución controlada',       r: 'Recurrentes autorizadas · umbrales' },
            ].map((l, i, arr) => (
              <div key={l.n} style={{
                display: 'grid', gridTemplateColumns: '48px 1fr 180px', gap: 16, alignItems: 'center',
                padding: '18px 20px',
                borderBottom: (i < arr.length - 1) ? '1px solid #2E3140' : 'none',
                background: i === 2 ? 'rgba(244,2,76,0.08)' : 'transparent',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', color: i === 2 ? '#F4024C' : '#96A3B5', fontWeight: 600 }}>{l.n}</span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, 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">GOBIERNO DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// BENCHMARK COMPETITIVO
const GobBenchmark = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="06" label="Benchmark competitivo" 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 }}>
          Diez patrones del mercado · el diferencial de OMNIX.
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 780 }}>
          Analizamos patrones del mercado (tipo Palantir · IBM · Microsoft · SAP) sin copiar sus mensajes ni afirmar equivalencia funcional. OMNIX se diferencia por soberanía cognitiva, SDMs propietarios y transferencia progresiva.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1.5px solid #1E1F26' }}>
        <div style={{ padding: 32, background: '#FAFBFD', borderRight: '1px solid #E4EBF3' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#96A3B5', marginBottom: 20 }}>PATRONES DEL MERCADO</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Infraestructura común de datos',
              'Visión operacional compartida',
              'Coordinación interinstitucional',
              'Priorización de mantenimiento',
              'Respuesta a emergencias',
              'Gestión de fraude',
              'Gestión financiera pública',
              'Logística pública',
              'Salud pública',
              'Seguridad institucional',
            ].map((p) => (
              <li key={p} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15, color: '#1E1F26', lineHeight: 1.5 }}>
                <span style={{ color: '#96A3B5', fontFamily: 'var(--font-mono)', fontSize: 14 }}>—</span>{p}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ padding: 32, background: '#000', color: '#FFF' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>DIFERENCIAL DE OMNIX</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'SDMs propietarios · entrenados sobre datos del organismo',
              'Cognición privada · nunca en modelos generales',
              'Modelos especializados por dominio · no genéricos',
              'Despliegue soberano · VPC · on-prem · air-gapped',
              'Razonamiento auditable · trazabilidad por decisión',
              'Adecuación normativa local · sectorial · nacional',
              'Menor dependencia de modelos generales',
              'Transferencia progresiva de control',
              'Construcción de capacidades públicas',
              'Foco Latinoamérica · vocabulario local',
            ].map((p) => (
              <li key={p} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15, color: '#FFF', lineHeight: 1.5 }}>
                <i data-lucide="check" width="16" height="16" style={{ color: '#F4024C', strokeWidth: 2, marginTop: 3, flexShrink: 0 }}/>
                {p}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Container>
  </section>
);

// MODELO DE PRUEBA · 4 CAPAS
const GobEvidenceModel = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="07" label="Modelo de prueba honesto" 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 }}>
          Cuatro capas · sin saltar de simulación a resultado.
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 780 }}>
          No presentamos escenarios modelados como resultados reales. Cada afirmación se ubica en su capa correcta de evidencia.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          { n: '01', k: 'EVIDENCIA DEL PROBLEMA', c: '#0050BD',
            what: 'Datos y estadísticas verificables del contexto público', items: ['Datos públicos', 'Informes oficiales', 'Benchmarks', 'Estadísticas institucionales'] },
          { n: '02', k: 'ARQUITECTURA', c: '#F4024C',
            what: 'Diseño técnico propuesto · no implementado aún', items: ['Fuentes de datos', 'Sistemas objetivo', 'SDM propuesto', 'Flujo de decisiones', 'Controles de seguridad'] },
          { n: '03', k: 'DEMOSTRACIÓN', c: '#B8860B',
            what: 'Simulación · escenario modelado con valores ilustrativos', items: ['Video demostrativo', 'Prototipo', 'Simulación', 'Log de decisión demo', 'Approval flow demo'] },
          { n: '04', k: 'PILOTO / RESULTADO', c: '#0F5132',
            what: 'Solo con línea base firmada · metodología validada · autorización', items: ['Línea base', 'KPI acordado', 'Periodo', 'Responsable', 'Resultado medido', 'Metodología', 'Validación'] },
        ].map((r, i) => (
          <SlideIn key={r.n} direction="up" delay={i * 100}>
            <div style={{ padding: '28px 24px', background: '#FFF', border: `1.5px solid ${r.c}`, minHeight: 340, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: r.c }}>CAPA · {r.n}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em', color: '#000', lineHeight: 1.2 }}>{r.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5, marginBottom: 8 }}>{r.what}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
                {r.items.map((it) => (
                  <li key={it} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#000' }}>
                    <span style={{ color: r.c }}>·</span>{it}
                  </li>
                ))}
              </ul>
            </div>
          </SlideIn>
        ))}
      </div>
      <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#B8860B', letterSpacing: '0.06em' }}>
        * Sólo la Capa 4 permite afirmar resultados. Las Capas 1-3 se identifican explícitamente como evidencia del problema, arquitectura o simulación.
      </div>
    </Container>
  </section>
);

// TRANSFERENCIA · 4 FASES
const GobTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="08" label="Transferencia de control" 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' }}>
            OMNIX construye la capacidad. El Estado conserva el control.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', marginBottom: 40 }}>
        {[
          { k: 'DIAGNÓSTICO DE MISIÓN', dur: '2 – 3 semanas', f: 'Mapeo de misión · datos · sistemas', o: 90, c: 10 },
          { k: 'PILOTO PRODUCTIVO',     dur: '8 – 12 semanas', f: 'Una decisión · una línea base',      o: 70, c: 30 },
          { k: 'ESCALAMIENTO',          dur: '3 – 6 meses',    f: 'Nuevos casos · certificación',        o: 45, c: 55 },
          { k: 'TRANSFERENCIA',         dur: 'Cuando digan',    f: 'Capacidad interna operacional',      o: 15, c: 85 },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 100}>
            <div style={{ padding: '28px 24px', borderRight: (i < 3) ? '1px solid #E4EBF3' : 'none', minHeight: 280, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>FASE 0{i+1}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#0050BD' }}>{p.dur}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#0050BD' }}>{p.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.4 }}>{p.f}</div>
              <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid #E4EBF3' }}>
                <div style={{ display: 'flex', height: 8, background: '#F2F5F9', marginBottom: 8 }}>
                  <div style={{ width: `${p.o}%`, background: '#F4024C' }}/>
                  <div style={{ width: `${p.c}%`, background: '#0050BD' }}/>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#52557A' }}>
                  <span><span style={{ color: '#F4024C' }}>■</span> OMNIX {p.o}%</span>
                  <span><span style={{ color: '#0050BD' }}>■</span> ESTADO {p.c}%</span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <div style={{ padding: 32, background: '#FAFBFD', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', marginBottom: 20 }}>QUÉ SE TRANSFIERE AL ESTADO</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {[
            'Documentación',
            'Arquitectura',
            'Corpus de datos',
            'SDMs entrenados',
            'Reglas y umbrales',
            'Runbooks',
            'Gobierno del modelo',
            'Protocolos monitoreo',
            'Criterios evaluación',
            'Reentrenamiento',
            'Plan de continuidad',
            'Capacitación interna',
          ].map((it) => (
            <div key={it} style={{
              padding: '10px 12px', background: '#FFF', border: '1px solid #E4EBF3',
              display: 'flex', gap: 8, alignItems: 'center',
            }}>
              <i data-lucide="check" width="12" height="12" style={{ color: '#0F5132', strokeWidth: 2 }}/>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26' }}>{it}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 20 }}>
        <Button variant="ghost" icon="arrow-right" href="transferencia.html">Ver modelo de transferencia completo</Button>
      </div>
    </Container>
  </section>
);

// CTA FINAL
const GobFinalCTA = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128, position: 'relative', overflow: 'hidden' }}>
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.4 }} viewBox="0 0 1440 700" preserveAspectRatio="none">
      <g stroke="#0050BD" strokeWidth="1" fill="none" opacity="0.35">
        <path d="M 0 200 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 200 Q 1040 350 720 350" className="omnix-flow-dash"/>
        <path d="M 0 500 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 500 Q 1040 350 720 350" className="omnix-flow-dash"/>
      </g>
      <circle cx="720" cy="350" r="6" fill="#0050BD"/>
      <circle cx="720" cy="350" r="24" fill="none" stroke="#0050BD" strokeWidth="1" opacity="0.4"/>
    </svg>
    <Container narrow>
      <div style={{ textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#0050BD', textTransform: 'uppercase', marginBottom: 24 }}>
            — Cognición institucional soberana · para misiones públicas críticas —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 68, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            La inteligencia del Estado permanece en el Estado.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 720, margin: '0 auto 36px' }}>
            Comenzamos con una decisión, una línea base y un resultado verificable. Sin reemplazar los sistemas existentes.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'inline-flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Evaluar una misión pública</Button>
            <Button variant="ghost" dark icon="arrow-right" href="gobierno-movilidad.html">Ver estudio Ruta 78</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>
            30 min · sin propuesta estándar · sobre convenios institucionales autorizados
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// OBJECIONES (buyer institucional + técnico + riesgo)
const GobObjections = () => {
  const items = [
    { q: 'No tienen casos gubernamentales publicados.',                         a: 'Correcto. Es lo que declaramos explícitamente en cada página. OMNIX cuenta con arquitectura, prototipos y estudios. El primer piloto gubernamental se construye con línea base firmada, KPI acordado y validación · nunca antes.' },
    { q: '¿Cómo garantizan que la IA no toma decisiones sobre derechos?',         a: 'Por diseño. Los casos de riesgo alto (beneficios, salud, sanciones, seguridad, contratación, empleo público, decisiones sobre derechos) mantienen HITL obligatorio. La IA prepara evidencia · la decisión final es humana con approval trail.' },
    { q: '¿Qué pasa con los datos personales?',                                   a: 'Anonimización en origen · segregación por organismo · acceso basado en roles · cumplimiento con ley local de protección de datos. Nunca salen del perímetro autorizado del Estado.' },
    { q: '¿Este es otro proyecto como los que han fallado en Gobierno?',           a: 'Comenzamos acotado: una decisión · una línea base · un KPI · un responsable. 8-12 semanas hasta primer piloto operacional. Si no hay evidencia de valor público, no escalamos.' },
    { q: '¿Cómo interoperan con plataformas del Estado?',                          a: 'Mediante conectores, APIs y mecanismos autorizados por cada organismo. Plataformas de interoperabilidad, GIS, sistemas ministeriales, gestión documental, sistemas de emergencias. La integración se valida caso a caso.' },
    { q: '¿Quién es responsable si una recomendación es errada?',                  a: 'La responsabilidad institucional permanece en la autoridad correspondiente. OMNIX aporta evidencia, alternativas, explicabilidad y trazabilidad. La decisión y su responsabilidad continúan en el marco legal del organismo.' },
    { q: '¿Cómo se financia esto?',                                                a: 'Puede estructurarse como consultoría, licenciamiento, servicio o transferencia progresiva. Compatible con marcos de compras públicas y regulaciones de contratación. El diagnóstico inicial no requiere licitación pública mayor.' },
    { q: '¿Qué pasa con la Contraloría?',                                          a: 'OMNIX se diseña para cumplir con controles de Contraloría: trazabilidad completa, evidencia documental, segregación de funciones, mecanismos de auditoría, retención de registros. Es una plataforma pro-auditoría, no un reemplazo del control.' },
    { q: '¿No es esto vigilancia estatal?',                                        a: 'No. Los pilares excluyen explícitamente vigilancia masiva, social scoring, perfilamiento opaco y sanciones automáticas. OMNIX opera sobre datos institucionales autorizados para su misión · nunca para vigilancia ciudadana.' },
    { q: '¿Qué ocurre si el proveedor cambia o quiebra?',                          a: 'La transferencia de control es parte del programa · no una promesa. Al cierre entregamos código, corpus, SDMs, gobierno, runbooks y capacitación. El Estado opera sin OMNIX si así lo decide.' },
    { q: 'Nuestros datos no están estandarizados.',                                a: 'No los necesitamos perfectos. El SDM se adapta a las realidades del organismo. Documentamos data quality y trabajamos con lo disponible · flagueando incertidumbre cuando corresponde.' },
    { q: '¿Cómo se compara con Palantir · IBM · Microsoft · SAP?',                  a: 'No competimos por equivalencia funcional. Nuestro diferencial es soberanía cognitiva (SDMs propietarios · despliegue local), adecuación normativa local, transferencia progresiva y foco Latinoamérica. Detalle público en el benchmark.' },
    { q: '¿Se puede empezar con un caso pequeño?',                                 a: 'Es el modelo. Una misión, una decisión, un KPI, un responsable. Si el caso pequeño no demuestra valor público medible, no avanzamos a escalamiento. Preferimos pilotos honestos a compromisos multianuales sin evidencia.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="09" label="Objeciones · comité institucional" 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 }}>
            Preguntas que Autoridad · CIO · Legal · CISO · Contraloría hacen antes de firmar.
          </h2>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: (i < items.length - 1) ? '1px solid #E4EBF3' : 'none' }}>
              <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '18px 28px', display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 20, alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD' }}>Q · {String(i+1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#000', lineHeight: 1.3 }}>{it.q}</span>
                <span style={{ color: '#1E1F26', transition: 'transform 280ms', transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>
                  <i data-lucide="plus" width="18" height="18"></i>
                </span>
              </button>
              <div style={{ maxHeight: openIdx === i ? 320 : 0, overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ padding: '0 28px 22px 28px', display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20 }}>
                  <div/>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.6, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { GobRiskGovernance, GobAutonomy, GobBenchmark, GobEvidenceModel, GobTransfer, GobFinalCTA, GobObjections });
