// TRUST CENTER · Hero + AEO + Estado de Confianza (8 dominios verificables)
// Regla: evidencia antes que claims · estados diferenciados por texto e iconografía · sin sellos ficticios

// Sistema de estados público reutilizable
const TrustBadge = ({ state }) => {
  const map = {
    'CERTIFIED':          { c: '#0F5132', bg: '#E3F2E9',  b: '#0F5132', icon: 'shield-check',    l: 'CERTIFICADO' },
    'ATTESTED':            { c: '#0050BD', bg: '#E8F2FB', b: '#0050BD', icon: 'file-check',       l: 'ATESTADO' },
    'ASSESSED':            { c: '#0050BD', bg: '#F0F5FA', b: '#0050BD', icon: 'search',           l: 'EVALUADO' },
    'IMPLEMENTED':         { c: '#0050BD', bg: '#F0F5FA', b: '#0050BD', icon: 'check',            l: 'IMPLEMENTADO' },
    'REFERENCE':            { c: '#B8860B', bg: '#FBF3D9', b: '#B8860B', icon: 'book-open',        l: 'REFERENCIA' },
    'IN_PROGRESS':         { c: '#B8860B', bg: '#FBF3D9', b: '#B8860B', icon: 'loader',           l: 'EN IMPLEMENTACIÓN' },
    'PLANNED':              { c: '#52557A', bg: '#F2F5F9', b: '#52557A', icon: 'calendar',         l: 'PLANIFICADO' },
    'NOT_APPLICABLE':      { c: '#96A3B5', bg: '#FAFBFD', b: '#96A3B5', icon: 'minus',            l: 'NO APLICABLE' },
    'EXPIRED':              { c: '#EA384C', bg: '#FDE4E7', b: '#EA384C', icon: 'x-circle',         l: 'EXPIRADO' },
    'PENDING':              { c: '#B8860B', bg: '#FBF3D9', b: '#B8860B', icon: 'clock',            l: 'PENDIENTE' },
  };
  const s = map[state] || map['PENDING'];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px 4px 8px', background: s.bg, border: `1px solid ${s.b}`, color: s.c, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>
      <i data-lucide={s.icon} width="12" height="12" style={{ strokeWidth: 1.8 }}/>{s.l}
    </span>
  );
};

const TrustAccessBadge = ({ level }) => {
  const map = {
    'L1': { c: '#0F5132', b: '#0F5132', l: 'L1 · PÚBLICO' },
    'L2': { c: '#B8860B', b: '#B8860B', l: 'L2 · CONTROLADO' },
    'L3': { c: '#EA384C', b: '#EA384C', l: 'L3 · RESTRINGIDO' },
  };
  const s = map[level] || map['L2'];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', padding: '2px 8px', border: `1px solid ${s.b}`, color: s.c, fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>
      {s.l}
    </span>
  );
};

const TrustHero = () => (
  <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 78% 40%, #000 0%, transparent 65%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 78% 40%, #000 0%, transparent 65%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <a href="index.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#52557A', textDecoration: 'none', textTransform: 'uppercase' }}>← OMNIX</a>
              <span style={{ color: '#96A3B5' }}>/</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase' }}>Trust Center · centro de confianza</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 74, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              Confianza respaldada por <span style={{ color: '#F4024C' }}>controles y evidencia</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' }}>
              Explore cómo OMNIX protege datos, modelos y operaciones mediante controles de seguridad,
              privacidad, trazabilidad, gobierno de IA y opciones de despliegue adaptadas al riesgo de cada organización.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
              <Button variant="primary" icon="arrow-right" href="#request">Solicitar documentación de confianza</Button>
              <Button variant="ghost" icon="arrow-right" href="#controls">Revisar controles de seguridad</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              La disponibilidad de documentos depende del alcance, la etapa de evaluación y los acuerdos de confidencialidad
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 32, padding: '18px 22px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <i data-lucide="scale" 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 }}>Cómo leer esta página</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>
                    Cada evidencia se etiqueta con su <strong>estado real</strong> — Certificado · Atestado · Evaluado · Implementado · Referencia · En implementación · Planificado · No aplicable. Certificación y atestación no son sinónimos. Marco de referencia no equivale a cumplimiento. Esta página <strong>no sustituye</strong> DPA, contratos, Política de Privacidad ni auditorías del cliente.
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}><TrustHeroPanel/></Reveal>
      </div>
    </Container>
  </section>
);

// Panel: 8 dominios con estados reales
const TrustHeroPanel = () => {
  const rows = [
    { k: 'ISO/IEC 27001',    scope: 'ISMS · sistema de gestión de seguridad',   state: 'IN_PROGRESS',   next: 'Q3 2026' },
    { k: 'ISO/IEC 27701',    scope: 'PIMS · privacidad de la información',      state: 'IN_PROGRESS',   next: 'Q4 2026' },
    { k: 'ISO/IEC 42001',    scope: 'AIMS · gestión de sistemas de IA',         state: 'REFERENCE',      next: '2027' },
    { k: 'SOC 2 Type II',     scope: 'Trust Services Criteria',                    state: 'PLANNED',        next: '2027' },
    { k: 'NIST AI RMF',       scope: 'Marco de gestión de riesgo de IA',           state: 'REFERENCE',      next: 'Continuo' },
    { k: 'GDPR · LGPD',       scope: 'Marco jurídico de privacidad · por caso',    state: 'REFERENCE',      next: 'Por proyecto' },
    { k: 'Pentest anual',      scope: 'Prueba independiente · resumen ejecutivo',   state: 'ASSESSED',       next: 'Anual' },
    { k: 'Gobierno IA · SDMs', scope: 'Programa interno de gobernanza',            state: 'IMPLEMENTED',    next: 'Q2 2026' },
  ];
  return (
    <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>ESTADO DE CONFIANZA · JULIO 2026</span>
        <span style={{ color: '#0F5132', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#0F5132' }} className="omnix-blink"/>
          ACTUALIZADO
        </span>
      </div>
      <div style={{ background: '#FFF' }}>
        {rows.map((r, i, arr) => (
          <div key={r.k} style={{
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center',
            padding: '14px 20px',
            borderBottom: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none',
          }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#000', letterSpacing: '-0.005em', marginBottom: 2 }}>{r.k}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', letterSpacing: '0.06em' }}>{r.scope} · próx. {r.next}</div>
            </div>
            <TrustBadge state={r.state}/>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1.5px solid #1E1F26', padding: '12px 20px', background: '#000', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
        <span>Estados · texto + iconografía + color</span>
        <span style={{ color: '#F4024C' }}>[VALIDAR CERTIFICACIÓN]</span>
      </div>
    </div>
  );
};

// RESPUESTA AEO PRINCIPAL
const TrustAEO = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 72, paddingBottom: 72, 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: '#F4024C', textTransform: 'uppercase' }}>Respuesta AEO</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', marginTop: 4 }}>tl;dr · trust center</div>
        </div>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.55, color: '#000', margin: 0, maxWidth: 900 }}>
          El Trust Center de OMNIX centraliza información sobre <strong>seguridad, privacidad, gobierno de inteligencia artificial, resiliencia, auditorías y gestión de terceros</strong>. Permite a clientes y evaluadores comprender los controles de OMNIX, <strong>verificar el estado de cada evidencia</strong> y solicitar documentación técnica o contractual mediante un proceso de acceso controlado.
        </p>
      </div>
    </Container>
  </section>
);

// ESTADO DE CONFIANZA · 8 dominios en grid detallado
const TrustStatus = () => {
  const domains = [
    { k: 'SEGURIDAD DE LA INFORMACIÓN',   ref: 'ISO/IEC 27001 · NIST CSF',        state: 'IN_PROGRESS',   access: 'L1', owner: 'CISO',       rev: 'Ago 2026', next: 'Q3 2026',   evid: 'Programa · políticas · controles', anchor: '#security' },
    { k: 'PRIVACIDAD Y PROTECCIÓN DATOS',  ref: 'ISO/IEC 27701 · GDPR · LGPD',    state: 'IN_PROGRESS',   access: 'L1', owner: 'DPO',        rev: 'Ago 2026', next: 'Q4 2026',   evid: 'Política · DPA por proyecto',       anchor: '#privacy' },
    { k: 'GOBIERNO DE IA',                 ref: 'ISO/IEC 42001 · NIST AI RMF',    state: 'REFERENCE',      access: 'L1', owner: 'AI Gov',     rev: 'Jul 2026', next: 'Continuo',   evid: 'Programa Govern·Map·Measure·Manage', anchor: '#ai-gov' },
    { k: 'CONTINUIDAD OPERACIONAL',        ref: 'ISO 22301',                        state: 'IMPLEMENTED',    access: 'L2', owner: 'Ops',        rev: 'Jun 2026', next: 'Semestral',  evid: 'BCP · runbooks · pruebas',           anchor: '#continuity' },
    { k: 'DESARROLLO SEGURO',               ref: 'NIST SSDF · OWASP ASVS',          state: 'IMPLEMENTED',    access: 'L2', owner: 'Eng',        rev: 'Jul 2026', next: 'Continuo',   evid: 'SDLC · SAST · SBOM · firma',        anchor: '#sdlc' },
    { k: 'GESTIÓN DE VULNERABILIDADES',    ref: 'CVSS · programa interno',         state: 'IMPLEMENTED',    access: 'L2', owner: 'SecOps',     rev: 'Jul 2026', next: 'Continuo',   evid: 'Programa · pentest anual',            anchor: '#vulns' },
    { k: 'GESTIÓN DE TERCEROS',              ref: 'Programa interno · DPA',           state: 'IMPLEMENTED',    access: 'L2', owner: 'Legal · IT', rev: 'Jul 2026', next: 'Semestral',  evid: 'Lista de subprocesadores',           anchor: '#third-parties' },
    { k: 'CERTIFICACIONES Y AUDITORÍAS',    ref: 'Múltiples marcos',                 state: 'IN_PROGRESS',   access: 'L1', owner: 'CISO',       rev: 'Jul 2026', next: 'Trimestral', evid: 'Registro público de estados',       anchor: '#certifications' },
  ];
  return (
    <section id="status" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="01" label="Estado de confianza · vista pública"/></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' }}>
              Ocho dominios · <span style={{ color: '#F4024C' }}>estados verificables</span> · propietarios asignados.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
              Sin logos de certificaciones no autorizados. Sin sellos genéricos. Cada dominio muestra su estado real, alcance, evidencia disponible, propietario interno y fecha de próxima revisión.
            </p>
          </Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {domains.map((d, i) => (
            <SlideIn key={d.k} direction="up" delay={i * 60}>
              <a href={d.anchor} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
                <div style={{ padding: '24px 26px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 200, display: 'flex', flexDirection: 'column', gap: 12, transition: 'border-color 220ms, transform 220ms', cursor: 'pointer' }}
                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#F4024C'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = '#E4EBF3'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, letterSpacing: '-0.005em', color: '#000', lineHeight: 1.25 }}>{d.k}</div>
                    <TrustBadge state={d.state}/>
                  </div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: '#0050BD' }}>{d.ref}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#52557A', lineHeight: 1.5 }}>{d.evid}</div>
                  <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid #E4EBF3', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#52557A' }}>
                    <div><span style={{ color: '#96A3B5' }}>OWNER</span><br/><strong style={{ color: '#000' }}>{d.owner}</strong></div>
                    <div><span style={{ color: '#96A3B5' }}>REV</span><br/><strong style={{ color: '#000' }}>{d.rev}</strong></div>
                    <div style={{ textAlign: 'right' }}><TrustAccessBadge level={d.access}/></div>
                  </div>
                </div>
              </a>
            </SlideIn>
          ))}
        </div>

        {/* Sistema de estados · leyenda */}
        <Reveal delay={200}>
          <div style={{ marginTop: 40, padding: '24px 28px', background: '#000', color: '#FFF', border: '1.5px solid #000' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>Sistema de estados · leyenda pública</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
              {[
                { s: 'CERTIFIED',     d: 'Certificado vigente emitido por organismo autorizado' },
                { s: 'ATTESTED',       d: 'Informe de atestación válido (SOC, similar)' },
                { s: 'ASSESSED',       d: 'Evaluación independiente realizada' },
                { s: 'IMPLEMENTED',    d: 'Control existe con evidencia interna' },
                { s: 'REFERENCE',      d: 'Marco tomado como referencia · sin certificación' },
                { s: 'IN_PROGRESS',    d: 'Programa aprobado · plan en ejecución' },
                { s: 'PLANNED',        d: 'Iniciativa considerada · sin implementar' },
                { s: 'NOT_APPLICABLE', d: 'Marco no corresponde al alcance actual' },
                { s: 'EXPIRED',        d: 'Evidencia perdió vigencia · no debe mostrarse activa' },
                { s: 'PENDING',        d: 'Documento por preparar o validar' },
              ].map((r) => (
                <div key={r.s} style={{ padding: '10px 12px', background: '#0A0B10', border: '1px solid #2E3140' }}>
                  <div style={{ marginBottom: 6 }}><TrustBadge state={r.s}/></div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#96A3B5', lineHeight: 1.4 }}>{r.d}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.06em', lineHeight: 1.6 }}>
              <strong style={{ color: '#F4024C' }}>Regla:</strong> los estados también se diferencian por texto e iconografía · no solamente por color. Los sellos visuales no son intercambiables. Cada evidencia identifica expresamente su estado para evitar interpretaciones incorrectas.
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
};

Object.assign(window, { TrustBadge, TrustAccessBadge, TrustHero, TrustAEO, TrustStatus });