const Footer = () => {
  const cols = [
    { title: 'Plataforma', items: [
      { l: 'Arquitectura', h: 'plataforma.html' },
      { l: 'OMNIX Ingest', h: 'plataforma.html' },
      { l: 'OMNIX Core',   h: 'plataforma.html' },
      { l: 'OMNIX Runtime',h: 'plataforma.html' },
      { l: 'OMNIX Cortex', h: 'plataforma.html' },
    ]},
    { title: 'Producto', items: [
      { l: 'IAs propietarias (SDMs)', h: 'ias-propietarias.html' },
      { l: 'Transferencia de control', h: 'transferencia.html' },
      { l: 'Seguridad y Gobernanza',   h: 'seguridad.html' },
    ]},
    { title: 'Industrias', items: [
      { l: 'Banca',      h: 'industrias.html' },
      { l: 'Telco',      h: 'industrias.html' },
      { l: 'Retail',     h: 'industrias.html' },
      { l: 'Manufactura',h: 'industrias.html' },
      { l: 'Minería',    h: 'industrias.html' },
    ]},
    { title: 'Compañía',  items: [
      { l: 'Manifiesto', h: '#' },
      { l: 'Recursos',   h: '#' },
      { l: 'Trust center',h: '#' },
      { l: 'Contacto',   h: 'diagnostico.html' },
    ]},
  ];
  return (
    <footer style={{ background: '#FFFFFF', color: '#1E1F26', paddingTop: 96, paddingBottom: 40, borderTop: '1.5px solid #1E1F26' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr 1fr', gap: 40, marginBottom: 72 }}>
          <div>
            <img src="assets/logo-omnix.png" alt="OMNIX" style={{ height: 28, marginBottom: 20 }}/>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#52557A', lineHeight: 1.55, maxWidth: 280, margin: '0 0 20px' }}>
              Cognición operacional soberana para grandes empresas críticas.
            </p>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15, color: '#1E1F26', lineHeight: 1.4, maxWidth: 280, margin: 0 }}>
              La velocidad se compra. La cognición institucional se construye.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Badge tone="outline">SOC 2 Type II</Badge>
              <Badge tone="outline">ISO 27001</Badge>
              <Badge tone="outline">GDPR · LGPD</Badge>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#96A3B5', marginBottom: 20 }}>{c.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.items.map((it) => (
                  <li key={it.l}><a href={it.h} style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', textDecoration: 'none' }}>{it.l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid #E4EBF3', paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#7A7F95', letterSpacing: '0.06em' }}>
            © 2026 OMNIX CORP · CHILE · ESPAÑA · MÉXICO · +5 · 8 PAÍSES · 600M+ TX PROCESADAS
          </div>
          <div style={{ display: 'flex', gap: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#7A7F95', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacidad</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Términos</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Trust center</a>
          </div>
        </div>
      </Container>
    </footer>
  );
};

Object.assign(window, { Footer });