// PRIVACIDAD · Hero + Respuesta AEO + 6 Principios + Ciclo de vida del dato
// Tono: sobrio, legal-solvente, corporativo, con etiquetas [VALIDAR] visibles.

const PrivHero = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 120, 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.4, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 50% 30%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, #000 0%, transparent 60%)',
    }}/>
    <Container narrow>
      <div style={{ position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#0050BD', textTransform: 'uppercase', marginBottom: 20 }}>
            Privacidad y protección de datos
          </div>
          <Rule width={72}/>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 84, lineHeight: 0.96, letterSpacing: '-0.035em', margin: '24px 0 40px', color: '#000' }}>
            Sus datos. Sus reglas. <span style={{ color: '#0050BD' }}>Su control</span>.
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 22, lineHeight: 1.5, color: '#52557A', maxWidth: 780, margin: '0 0 40px' }}>
            OMNIX incorpora privacidad, seguridad y gobierno de datos en el diseño de modelos, integraciones
            y automatizaciones para que cada organización mantenga control sobre su información y su
            inteligencia operacional.
          </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 documentación de privacidad</Button>
            <Button variant="ghost" icon="arrow-right" href="seguridad.html">Revisar Seguridad y Gobernanza</Button>
          </div>
        </Reveal>
        <Reveal delay={260}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            Los controles, jurisdicciones y obligaciones se validan según el alcance de cada proyecto
          </div>
        </Reveal>
        <Reveal delay={320}>
          <div style={{ marginTop: 40, padding: '20px 24px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <i data-lucide="scale" width="20" height="20" 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 }}>Naturaleza de esta página</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.6 }}>
                  Este documento describe el enfoque de OMNIX sobre privacidad y protección de datos con lenguaje simplificado. <strong>No sustituye</strong> el Aviso de Privacidad legal, la Política de Cookies, el Data Processing Agreement (DPA) ni la evaluación jurídica que cada organización debe realizar por jurisdicción.
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// RESPUESTA AEO PRINCIPAL
const PrivAEO = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 80, paddingBottom: 80, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 40, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase' }}>Respuesta directa</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', marginTop: 6 }}>tl;dr · privacidad</div>
        </div>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.55, color: '#000', margin: 0, maxWidth: 900 }}>
          OMNIX protege la privacidad mediante una arquitectura diseñada para <strong>limitar accesos, minimizar datos, mantener trazabilidad</strong> y permitir despliegues privados según las necesidades del cliente. Los controles se configuran de acuerdo con el tipo de información, la jurisdicción, el sector y el rol contractual de cada organización.
        </p>
      </div>
    </Container>
  </section>
);

// 6 PRINCIPIOS DE PRIVACIDAD
const PrivPrinciples = () => {
  const principles = [
    { n: '01', k: 'PRIVACIDAD POR DISEÑO', icon: 'shield',
      p: 'La privacidad se evalúa desde el diseño del caso, las fuentes, las integraciones y los workflows.',
      apply: 'Cada proyecto incluye una revisión temprana de datos, propósitos, permisos y controles antes de conectar sistemas productivos.',
      risk: 'Datos innecesarios · accesos amplios · usos no documentados.',
      evidence: 'Documentación de arquitectura · matriz de responsabilidades · política de retención.',
      status: 'DISEÑADO' },
    { n: '02', k: 'MINIMIZACIÓN', icon: 'filter',
      p: 'Utilizar únicamente los datos necesarios para el propósito autorizado.',
      apply: 'Se identifica el conjunto mínimo de campos, se aplican filtros y se documentan las exclusiones. Los datos sensibles se protegen adicionalmente.',
      risk: 'Recolección excesiva · superficie de exposición ampliada.',
      evidence: 'Inventario de datos · reglas de filtrado · logs de acceso.',
      status: 'CONFIGURABLE' },
    { n: '03', k: 'CONTROL DE ACCESO', icon: 'key-round',
      p: 'Limitar el acceso según roles, responsabilidades, propósitos y permisos aprobados.',
      apply: 'Modelo RBAC/ABAC · segregación de funciones · mínimo privilegio · revisión periódica de accesos.',
      risk: 'Accesos amplios sin justificación · uso fuera de propósito.',
      evidence: 'Matriz de roles · logs de acceso · revisiones documentadas.',
      status: 'CONFIGURABLE' },
    { n: '04', k: 'TRAZABILIDAD', icon: 'file-search',
      p: 'Registrar fuentes, accesos, versiones, decisiones, aprobaciones y acciones cuando corresponda.',
      apply: 'Logs firmados WORM · versionado de modelos · registro de aprobaciones · retención según política.',
      risk: 'Decisiones no auditables · falta de evidencia en revisiones.',
      evidence: 'Logs de decisión · trace por caso · reportes de auditoría.',
      status: 'DISEÑADO' },
    { n: '05', k: 'CONTROL DEL CLIENTE', icon: 'user-check',
      p: 'El cliente mantiene gobierno sobre sus datos, reglas, modelos y políticas dentro del alcance contratado.',
      apply: 'Datos, corpus, modelos y logs permanecen bajo control del cliente en el despliegue autorizado.',
      risk: 'Dependencia del proveedor · pérdida de propiedad de activos institucionales.',
      evidence: 'Contrato · DPA · plan de transferencia · matriz de responsabilidades.',
      status: 'CONTRACTUAL' },
    { n: '06', k: 'MEJORA CONTINUA', icon: 'refresh-cw',
      p: 'Revisar riesgos, controles, cambios tecnológicos, incidentes y obligaciones aplicables.',
      apply: 'Revisión periódica del programa · actualización según jurisdicción · gestión de vulnerabilidades · lecciones aprendidas.',
      risk: 'Programa estático frente a un entorno regulatorio y tecnológico en cambio.',
      evidence: 'Registro de revisiones · plan de acción · métricas de seguridad y privacidad.',
      status: 'PROGRAMA VIGENTE' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 72 }}>
          <Reveal><SectionMeta n="01" label="Principios de privacidad" 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' }}>
              Seis principios · seis controles verificables.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
              La privacidad no es una pantalla de consentimiento ni un documento legal separado del producto. Forma parte de la arquitectura, los permisos, las fuentes, los modelos, los workflows, los logs, la retención y la eliminación.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {principles.map((p, i) => (
            <SlideIn key={p.n} direction="up" delay={i * 70}>
              <div style={{ padding: '28px 26px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 380, display: 'flex', flexDirection: 'column', gap: 12, transition: 'border-color 220ms' }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = '#0050BD'}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ width: 40, height: 40, border: '1.5px solid #0050BD', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i data-lucide={p.icon} width="20" height="20" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#0050BD' }}>PRINCIPIO · {p.n}</span>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase' }}>{p.k}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.005em', color: '#000', lineHeight: 1.3 }}>{p.p}</div>
                <div style={{ paddingTop: 12, borderTop: '1px solid #E4EBF3', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Aplicación práctica</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.5 }}>{p.apply}</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Riesgo reducido</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{p.risk}</div>
                  </div>
                </div>
                <div style={{ paddingTop: 10, borderTop: '1px solid #E4EBF3', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#0F5132', textTransform: 'uppercase' }}>● {p.status}</span>
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// CICLO DE VIDA DEL DATO · 9 etapas
const PrivLifecycle = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="02" label="Ciclo de vida del dato" 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' }}>
            ¿Cómo protege OMNIX los datos durante todo su ciclo de vida?
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: '#52557A', margin: 0 }}>
            Nueve etapas · con propósito documentado, controles técnicos, controles organizacionales y evidencia disponible. Los periodos de retención se establecen según contrato, instrucciones del cliente, obligaciones legales, necesidades operacionales y política documentada.
          </p>
        </Reveal>
      </div>

      <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '80px 1.2fr 1fr 1fr 1fr',
          background: '#000', color: '#FFF', padding: '14px 24px',
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>
          <div>ETAPA</div>
          <div>PROPÓSITO</div>
          <div style={{ color: '#0050BD' }}>CONTROL TÉCNICO</div>
          <div style={{ color: '#F4024C' }}>CONTROL ORGANIZACIONAL</div>
          <div style={{ color: '#0F5132' }}>EVIDENCIA</div>
        </div>
        {[
          { n: '01', k: 'RECOPILACIÓN',   p: 'Ingesta desde fuentes autorizadas del cliente',            tec: 'Conectores autenticados · APIs autorizadas · cifrado en tránsito', org: 'Autorización de fuente · documentación de propósito', ev: 'Registro de conexiones · consentimientos documentados' },
          { n: '02', k: 'CLASIFICACIÓN',   p: 'Identificación del tipo, sensibilidad y régimen aplicable', tec: 'Taxonomía de datos · etiquetado por sensibilidad · reglas de detección', org: 'Política de clasificación · revisión de titular del dato', ev: 'Inventario de datos · matriz de sensibilidad' },
          { n: '03', k: 'TRANSFERENCIA',   p: 'Movimiento controlado entre sistemas y regiones',            tec: 'TLS · cifrado en tránsito · tokenización · brokers autorizados', org: 'Evaluación de transferencia · cláusulas contractuales', ev: 'Registro de transferencias · salvaguardas aplicables' },
          { n: '04', k: 'ALMACENAMIENTO',  p: 'Persistencia dentro del perímetro autorizado',               tec: 'Cifrado en reposo · gestión de llaves · segregación por tenant', org: 'Residencia por jurisdicción · políticas de backup', ev: 'Configuración de residencia · certificados [VALIDAR CERTIFICACIÓN]' },
          { n: '05', k: 'USO',               p: 'Acceso operacional para propósitos autorizados',              tec: 'RBAC/ABAC · segregación de funciones · propósito registrado', org: 'Aprobación por caso · segregación entre equipos', ev: 'Logs de acceso · registro de propósito' },
          { n: '06', k: 'INFERENCIA',       p: 'Ejecución de modelos sobre datos del cliente',                 tec: 'Contexto acotado · datos sensibles filtrados · SDM aislado', org: 'Governance Board · monitoreo de drift · fairness testing', ev: 'Logs de decisión · versión de modelo · evaluaciones' },
          { n: '07', k: 'REGISTRO',          p: 'Trazabilidad de decisiones y accesos',                          tec: 'Logs WORM inmutables · firma criptográfica · versionado', org: 'Política de retención de logs · auditoría', ev: 'Trace por caso · reportes de auditoría reproducibles' },
          { n: '08', k: 'RETENCIÓN',         p: 'Conservación según contrato, ley y política',                   tec: 'TTL configurable · políticas por tipo · archivado', org: 'Contrato · obligaciones legales · matriz de retención', ev: 'Política de retención · [VALIDAR RETENCIÓN JURISDICCIÓN]' },
          { n: '09', k: 'ELIMINACIÓN',      p: 'Borrado seguro al finalizar propósito o contrato',              tec: 'Crypto-shredding · borrado en cascada · verificación', org: 'Plan de salida · certificación de borrado', ev: 'Certificados de eliminación · logs de purga' },
        ].map((r, i, arr) => (
          <SlideIn key={r.n} direction="right" delay={i * 40}>
            <div style={{
              display: 'grid', gridTemplateColumns: '80px 1.2fr 1fr 1fr 1fr',
              padding: '18px 24px', gap: 16,
              borderTop: '1px solid #E4EBF3',
              background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
            }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#0050BD', marginBottom: 4 }}>{r.n}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '-0.005em', color: '#000' }}>{r.k}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.5 }}>{r.p}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#0050BD', lineHeight: 1.5 }}>{r.tec}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#F4024C', lineHeight: 1.5 }}>{r.org}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#0F5132', lineHeight: 1.5 }}>{r.ev}</div>
            </div>
          </SlideIn>
        ))}
      </div>

      <div style={{ marginTop: 20, padding: '16px 20px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.6 }}>
        <strong>Nota:</strong> OMNIX no decide unilateralmente los periodos de retención. Se establecen según el contrato, las instrucciones del cliente, las obligaciones legales aplicables por jurisdicción, las necesidades operacionales del caso y la política documentada acordada. [VALIDAR RETENCIÓN · JURISDICCIÓN]
      </div>
    </Container>
  </section>
);

Object.assign(window, { PrivHero, PrivAEO, PrivPrinciples, PrivLifecycle });