// SEGURIDAD Y GOBERNANZA v2
// Buyer: CISO / CIO / CTO / Legal / Compliance / Risk / Procurement / Data Governance
// Mensaje: la soberanía de datos no basta — hace falta soberanía cognitiva.

const SecHeroV2 = () => (
  <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.5, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 85% 45%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 85% 45%, #000 0%, transparent 60%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal><Eyebrow color="#0050BD">SEGURIDAD · GOBERNANZA · SOBERANÍA COGNITIVA</Eyebrow><Rule width={56}/></Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 82, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              Cognición soberana, auditable y bajo <span style={{ color: '#0050BD' }}>tu control</span>.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.5, color: '#52557A', maxWidth: 620, margin: '0 0 32px' }}>
              La soberanía de datos no basta. Hace falta soberanía cognitiva — control sobre dónde
              vive el modelo, cómo razona, qué decisiones ejecuta y quién audita cada acción.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Agendar reunión con arquitecto de seguridad</Button>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <SovereigntyDiagram/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Perímetro cliente con capas concéntricas de control
const SovereigntyDiagram = () => (
  <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>SOVEREIGNTY MATRIX</span>
      <span style={{ color: '#0050BD' }}>DATA · MODEL · DECISION</span>
    </div>
    <svg viewBox="0 0 560 440" style={{ display: 'block', width: '100%', height: 'auto' }}>
      <g stroke="#E4EBF3" strokeWidth="0.5">
        {Array.from({length: 12}).map((_, i) => <line key={i} x1={i*50} y1="0" x2={i*50} y2="440"/>)}
        {Array.from({length: 10}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
      </g>
      {/* Outer perimeter (client) */}
      <DrawLine d="M 40 60 L 520 60 L 520 400 L 40 400 Z" stroke="#1E1F26" strokeWidth={1.5} duration={800}/>
      <text x="50" y="80" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">CLIENT PERIMETER</text>
      {/* Ring 1: DATA */}
      <DrawLine d="M 100 130 L 460 130 L 460 340 L 100 340 Z" stroke="#0050BD" strokeWidth={1} duration={700} delay={200}/>
      <text x="110" y="150" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#0050BD">DATA SOVEREIGNTY · PII/PHI MASKED</text>
      {/* Ring 2: MODEL */}
      <DrawLine d="M 160 180 L 400 180 L 400 300 L 160 300 Z" stroke="#F4024C" strokeWidth={1.25} duration={700} delay={400}/>
      <text x="170" y="200" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#F4024C">MODEL SOVEREIGNTY · SDM IN-VPC</text>
      {/* Ring 3: DECISION */}
      <g transform="translate(280, 245)">
        <rect x="-56" y="-30" width="112" height="60" fill="#000" stroke="#F4024C" strokeWidth="1.5"/>
        <text y="-4" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="13" fill="#FFF">DECISION</text>
        <text y="14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.18em" fill="#F4024C">AUDITABLE · SIGNED</text>
      </g>
      {/* Egress barrier */}
      <line x1="530" y1="60" x2="530" y2="400" stroke="#EA384C" strokeWidth="1.5" strokeDasharray="4 4"/>
      <text x="540" y="235" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#EA384C" transform="rotate(90, 540, 235)">NO EGRESS</text>
      <text x="50" y="425" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#52557A">3 SOVEREIGN LAYERS · IN-PERIMETER</text>
    </svg>
  </div>
);

// PROBLEMA STORYBRAND — CISO / Legal
const SecProblemV2 = () => (
  <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 riesgo real de la IA enterprise"/></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' }}>
            Los reguladores no van a preguntarte si tu IA es rápida. Van a preguntarte <span style={{ color: '#0050BD' }}>quién decidió</span>.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { k: 'EXTERNO',    t: 'La IA pública ejecuta sin trazabilidad.', d: 'Un LLM devuelve una respuesta. No queda registro de qué features pesaron, qué reglas aplicó, con qué versión razonó. Cuando el regulador pregunte "¿por qué decidieron esto?", no hay respuesta reproducible.' },
          { k: 'INTERNO',    t: 'Tu equipo no puede firmar decisiones que no entiende.', d: 'Un CISO no puede aprobar automatización cuya lógica vive en la nube de otro. Un Chief Risk Officer no puede versionar un modelo al que no tiene acceso. La governance queda cosmética.' },
          { k: 'FILOSÓFICO', t: 'La soberanía de datos ya no es suficiente.', d: 'Puedes tener tus datos en tu país y aún así perder el control cuando el razonamiento vive afuera. La soberanía real es cognitiva — modelo, inferencia y decisión, todo bajo tu jurisdicción.' },
        ].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: 26, letterSpacing: '-0.02em', 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>
);

// 3 MODOS DE DESPLIEGUE
const SecDeployV2 = () => {
  const modes = [
    { k: 'VPC PRIVADA',   t: 'Sobre tu nube.',        d: 'Despliegue dentro de tu VPC en AWS / Azure / GCP. Tráfico interno, sin exposición pública. OMNIX opera con acceso mínimo y auditado. Ideal para operaciones que ya viven en cloud.', latency: 'Sub-100ms', deploy: '2 – 4 semanas', when: 'Cloud-first · IT moderna' },
    { k: 'ON-PREMISE',    t: 'En tu data center.',    d: 'Instalación completa en tu infraestructura física. Sin dependencia de proveedores cloud. Ideal para infraestructura crítica y regulada (banca central, minería, gobierno).',                                              latency: 'Sub-50ms',  deploy: '6 – 10 semanas', when: 'Infra crítica · alta regulación' },
    { k: 'AIR-GAPPED',    t: 'Sin conexión externa.', d: 'Aislado de internet. Actualizaciones offline auditadas. Para operaciones militares, defensa nacional, infraestructura de energía crítica y misiones de máxima criticidad.',                                                latency: 'Sub-30ms',  deploy: '10 – 16 semanas', when: 'Defensa · máxima criticidad' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="02" label="Modelos de despliegue" 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 }}>
            Tres modos. Tú decides dónde vive tu inteligencia.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {modes.map((m, i) => (
            <SlideIn key={m.k} direction="up" delay={i * 120}>
              <MagneticHover strength={4}>
                <div style={{
                  padding: 0, border: '1.5px solid #1E1F26', background: '#FFF',
                  minHeight: 480, display: 'flex', flexDirection: 'column',
                  transition: 'transform 220ms',
                }}>
                  <VaultDiagramV2 mode={m.k}/>
                  <div style={{ padding: '24px 28px 28px', display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD' }}>MODO 0{i+1} · {m.k}</div>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>{m.t}</h3>
                    <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#52557A', margin: 0, flex: 1 }}>{m.d}</p>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, paddingTop: 14, borderTop: '1px solid #E4EBF3' }}>
                      <div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>LATENCIA</div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#1E1F26', fontWeight: 500 }}>{m.latency}</div>
                      </div>
                      <div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>DEPLOY</div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#1E1F26', fontWeight: 500 }}>{m.deploy}</div>
                      </div>
                    </div>
                    <div style={{ marginTop: 4, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C', textTransform: 'uppercase' }}>
                      Ideal para · {m.when}
                    </div>
                  </div>
                </div>
              </MagneticHover>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

const VaultDiagramV2 = ({ mode }) => (
  <div style={{ background: '#FAFBFD', borderBottom: '1.5px solid #1E1F26' }}>
    <svg viewBox="0 0 260 140" style={{ width: '100%', height: 130, display: 'block' }}>
      <g stroke="#E4EBF3" strokeWidth="0.5">
        {Array.from({length: 9}).map((_, i) => <line key={i} x1={i*30} y1="0" x2={i*30} y2="140"/>)}
        {Array.from({length: 5}).map((_, i) => <line key={i} x1="0" y1={i*30} x2="260" y2={i*30}/>)}
      </g>
      <DrawLine d="M 30 30 L 230 30 L 230 110 L 30 110 Z" stroke="#0050BD" strokeWidth={1.5} duration={800}/>
      <DrawLine d="M 60 50 L 200 50 L 200 90 L 60 90 Z" stroke="#1E1F26" strokeWidth={1} duration={800} delay={400}/>
      <text x="130" y="74" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.18em" fill="#F4024C">SDM · RUNTIME</text>
      {[[30, 30], [230, 30], [30, 110], [230, 110]].map(([x, y], i) => (
        <rect key={i} x={x-3} y={y-3} width="6" height="6" fill="#0050BD"/>
      ))}
      {mode === 'AIR-GAPPED' && (
        <text x="130" y="130" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.18em" fill="#EA384C">NO EXTERNAL LINK</text>
      )}
    </svg>
  </div>
);

// PILARES DE GOBERNANZA — 6 áreas con tabs
const SecPillarsV2 = () => {
  const [tab, setTab] = React.useState(0);
  const tabs = [
    { l: 'Datos' },
    { l: 'Model Gov' },
    { l: 'Auditoría' },
    { l: 'HITL' },
    { l: 'Compliance' },
    { l: 'Riesgos' },
  ];
  const panes = [
    // DATOS
    { title: 'Protección de datos en origen.',
      items: [
        { i: 'eye-off',        t: 'Anonimización', d: 'PII y PHI enmascarados en OMNIX Ingest antes de vectorización. Nunca salen del sistema fuente en claro.' },
        { i: 'lock',            t: 'Tokenización reversible', d: 'Sólo dentro del perímetro cliente. Fuera de la VPC, no hay clave que reidentifique.' },
        { i: 'shield',          t: 'Segregación por tenant', d: 'Cada cliente tiene su propio pipeline aislado. Ninguna decisión cruza perímetros.' },
        { i: 'file-lock-2',     t: 'Encriptación integral', d: 'AES-256 en reposo, TLS 1.3 en tránsito. HSM opcional para llaves críticas.' },
      ]},
    // MODEL GOVERNANCE
    { title: 'Cada SDM se gobierna como un artefacto crítico.',
      items: [
        { i: 'git-compare',     t: 'Versionado semántico', d: 'Cada release del SDM firmado criptográficamente con hash de dataset, hiperparámetros y evaluación.' },
        { i: 'check-check',     t: 'Approval flows', d: 'Model risk review previo a producción. Quorum ejecutivo configurable por criticidad del caso.' },
        { i: 'rewind',          t: 'Rollback en minutos', d: 'A cualquier versión histórica. Sin pérdida de logs, sin ventanas de inconsistencia.' },
        { i: 'activity',        t: 'Drift monitoring', d: 'Detección automática de degradación de performance o cambio distribución. Alerta a Governance Board.' },
      ]},
    // AUDITORÍA
    { title: 'Cada decisión con traza inmutable.',
      items: [
        { i: 'file-text',       t: 'Logs WORM · 10 años', d: 'Write-once, read-many. Append-only con firma criptográfica. Ideal para SR 11-7 y DORA.' },
        { i: 'file-search',     t: 'Explicabilidad por decisión', d: 'Features, pesos, políticas aplicadas, versión de SDM. Reproducible con la misma entrada.' },
        { i: 'clock',           t: 'Timeline reconstruible', d: 'Cualquier decisión histórica reconstruible con el snapshot exacto del modelo y datos.' },
        { i: 'download',        t: 'Export regulator-ready', d: 'Reportes generados automáticamente en formato exigido por regulador sectorial.' },
      ]},
    // HITL
    { title: 'Human-in-the-loop configurable por caso.',
      items: [
        { i: 'user-check',      t: 'Umbrales de escalado', d: 'Cada caso define score mínimo, riesgo máximo y ventana temporal para escalar a humano.' },
        { i: 'users',           t: 'Governance Board interno', d: 'Rol permanente del cliente. Aprueba release de SDMs, cambios de política y niveles de autonomía.' },
        { i: 'flag',            t: 'Hard limits inviolables', d: 'Guardrails que nunca la IA puede saltar, incluso en N5. Ejemplo: montos, aprobaciones legales.' },
        { i: 'circle-slash',    t: 'Kill switch', d: 'Detención completa del runtime desde un comando único. Recuperación bajo control humano.' },
      ]},
    // COMPLIANCE
    { title: 'Marcos regulatorios cubiertos.',
      items: [
        { i: 'globe',           t: 'GDPR · LGPD', d: 'Anonimización nativa, derecho al olvido, DPO integration, RoPA generado automáticamente.' },
        { i: 'heart-pulse',     t: 'HIPAA · HITECH', d: 'Segregación PHI, BAA disponible, audit logs conformes 45 CFR §164.' },
        { i: 'credit-card',     t: 'PCI-DSS L1', d: 'Segregación de datos de tarjetas, controles de acceso, escaneos trimestrales.' },
        { i: 'building-2',      t: 'Sectoriales', d: 'SR 11-7 (banca US), DORA (finanzas EU), NERC-CIP (energía), ISO 27017/27018 (cloud).' },
      ]},
    // RIESGOS
    { title: 'Riesgos que se reducen estructuralmente.',
      items: [
        { i: 'shield-alert',    t: 'Fuga de datos', d: 'Sin llamadas a APIs públicas, sin prompt leak, sin telemetría cross-tenant.' },
        { i: 'ban',             t: 'Dependencia de LLM público', d: 'Cero uso de modelos externos. Continuidad garantizada aunque el proveedor cambie precios o servicios.' },
        { i: 'file-x',          t: 'Decisiones no auditables', d: 'Determinismo por diseño. Cada acción reproducible ante regulador o litigio.' },
        { i: 'scale',           t: 'Falta de control regulatorio', d: 'Modelo y decisión bajo tu jurisdicción. Sin acuerdos internacionales de transferencia de datos.' },
      ]},
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <Reveal><SectionMeta n="03" label="Seis pilares de gobernanza"/></Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000', maxWidth: 720 }}>
                {panes[tab].title}
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <SegmentedTabs tabs={tabs} active={tab} onChange={setTab}/>
          </Reveal>
        </div>

        <div key={tab} style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16,
          animation: 'omnix-slide-in 340ms cubic-bezier(0.2,0.7,0.2,1)',
        }}>
          {panes[tab].items.map((c, i) => (
            <div key={c.t} style={{
              padding: '28px 26px', background: '#FFF', border: '1px solid #E4EBF3',
              minHeight: 160, display: 'flex', gap: 20,
              transition: 'border-color 220ms',
            }}
            onMouseEnter={(e) => e.currentTarget.style.borderColor = '#0050BD'}
            onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
              <div style={{ width: 40, height: 40, background: '#E6EEFB', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <i data-lucide={c.i} width="20" height="20" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
              </div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em', color: '#000', margin: '0 0 8px', lineHeight: 1.2 }}>{c.t}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#52557A', margin: 0 }}>{c.d}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// MATRIZ DE CONTROLES DE SEGURIDAD
const SecMatrix = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="04" label="Matriz de controles"/></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 }}>
          Lo que un CISO firma antes de aprobar el deploy.
        </h2>
      </Reveal>

      <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 0.6fr',
          background: '#000', color: '#FFF', padding: '18px 24px',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>
          <div>CONTROL</div>
          <div>IMPLEMENTACIÓN</div>
          <div>MARCO</div>
          <div style={{ textAlign: 'right' }}>ESTADO</div>
        </div>
        {[
          { c: 'Encriptación en reposo',     i: 'AES-256 · HSM opcional',           f: 'ISO 27001 · SOC 2',            s: 'live'      },
          { c: 'Encriptación en tránsito',    i: 'TLS 1.3 · mTLS interno',           f: 'ISO 27001 · PCI-DSS',          s: 'live'      },
          { c: 'Anonimización PII/PHI',        i: 'Enmascarado en origen',            f: 'GDPR · LGPD · HIPAA',           s: 'live'      },
          { c: 'Logs inmutables',              i: 'WORM · 10 años · firma cripto',    f: 'SR 11-7 · DORA · SOX',          s: 'live'      },
          { c: 'Model versioning',             i: 'Semver + hash de artefacto',       f: 'ISO 42001 · SR 11-7',           s: 'live'      },
          { c: 'Human-in-the-loop',            i: 'Configurable N1 → N5',              f: 'EU AI Act · Model risk',        s: 'live'      },
          { c: 'Rollback de modelos',          i: '< 5 min · sin data loss',           f: 'SR 11-7',                       s: 'live'      },
          { c: 'Drift monitoring',             i: 'Auto-alertas a Governance Board',   f: 'ISO 42001',                     s: 'live'      },
          { c: 'Air-gapped deployment',        i: 'Actualizaciones offline auditadas', f: 'NERC-CIP · Def. nacional',      s: 'live'      },
          { c: 'SOC 2 Type II',                i: 'Auditor independiente',             f: 'SOC 2',                         s: 'validate'  },
          { c: 'ISO 27001',                    i: 'Certificación en curso',            f: 'ISO 27001',                     s: 'validate'  },
          { c: 'ISO 42001 (AI mgmt)',          i: 'Framework aplicado, cert. en curso', f: 'ISO 42001',                    s: 'validate'  },
        ].map((r, i) => (
          <SlideIn key={r.c} direction="right" delay={i * 40}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 0.6fr',
              padding: '18px 24px', borderTop: '1px solid #E4EBF3',
              background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: '#000' }}>{r.c}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#1E1F26' }}>{r.i}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#0050BD', letterSpacing: '0.06em' }}>{r.f}</div>
              <div style={{ textAlign: 'right' }}>
                <Badge tone={r.s === 'live' ? 'success' : 'warning'}>{r.s === 'live' ? 'LIVE' : 'VALIDATE*'}</Badge>
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// OBJECTIONS
const SecObjections = () => {
  const items = [
    { q: '¿Cómo garantizan que ningún dato del cliente sale de nuestro perímetro?',
      a: 'OMNIX Ingest anonimiza PII/PHI en origen antes de vectorización. Los SDMs se entrenan y operan dentro de tu VPC / on-prem / air-gap. Cero llamadas a APIs públicas, cero telemetría cross-tenant. Auditable con network logs y policy egress.' },
    { q: '¿Qué pasa si el regulador nos pide reconstruir una decisión de hace un año?',
      a: 'Cada decisión queda con logs WORM (write-once, read-many) firmados criptográficamente durante 10 años. Contexto, features, pesos, versión de SDM, política aplicada y output. Reproducible bit-exacto con la misma entrada. Formato regulator-ready (SR 11-7, DORA).' },
    { q: '¿Podemos hacer un pentest independiente antes de firmar?',
      a: 'Sí. Es parte estándar del assessment. Facilitamos entornos de red team, documentación de arquitectura completa, informes SOC 2 Type II (en validación con auditor independiente), y accesos supervisados. Cualquier hallazgo entra al remediation plan del contrato.' },
    { q: '¿Cómo manejan actualizaciones en modo air-gapped?',
      a: 'Releases empaquetados y firmados con hash SHA-256 + firma criptográfica del build. Transferencia offline auditada (media física o red aislada). Validación pre-instalación con checksums, y ventana de rollback de 30 días con dual-run del modelo anterior.' },
    { q: '¿Qué certificaciones tienen hoy vs cuáles están en curso?',
      a: 'Los controles operan bajo GDPR, LGPD, HIPAA, PCI-DSS L1 nativos. SOC 2 Type II, ISO 27001 e ISO 42001 (gestión de IA) están en proceso de certificación con auditor independiente. Actualización trimestral en Trust Center — todos los claims cuantitativos marcados como VALIDATE deben confirmarse antes de firma contractual.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="05" label="Objeciones · CISO · Legal · Risk" dark color="#F4024C"/></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: '#FFF', maxWidth: 900 }}>
            Preguntas que aparecen en el security questionnaire.
          </h2>
        </Reveal>
        <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: (i < items.length - 1) ? '1px solid #2E3140' : 'none' }}>
              <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '24px 28px', display: 'grid', gridTemplateColumns: '48px 1fr auto', gap: 20, alignItems: 'center',
                color: '#FFF',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: '#F4024C' }}>Q · 0{i+1}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, letterSpacing: '-0.015em', color: '#FFF', lineHeight: 1.3 }}>{it.q}</span>
                <span style={{ color: '#F4024C', transition: 'transform 280ms', transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>
                  <i data-lucide="plus" width="20" height="20"></i>
                </span>
              </button>
              <div style={{ maxHeight: openIdx === i ? 280 : 0, overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ padding: '0 28px 28px 28px', display: 'grid', gridTemplateColumns: '48px 1fr', gap: 20 }}>
                  <div/>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 17, lineHeight: 1.6, color: '#96A3B5', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, {
  SecHeroV2, SecProblemV2, SecDeployV2, SecPillarsV2, SecMatrix, SecObjections,
});