// Shared footer
function Footer() {
  const cols = [
    { title: 'Producto', links: [['Facturación','/software-facturacion-cloud/'], ['Control horario','/software-control-horario/'], ['Fichaje por WhatsApp','/fichaje-por-whatsapp/'], ['IA & OCR','/erp-con-ia/'], ['Verifactu','/programa-facturacion-certificado-adaptado-verifactu/'], ['Precios','/precios/'], ['Sectores','/sectores/']] },
    { title: 'Sectores', links: [['Construcción','/software-gestion-empresas-construccion/'], ['Jardinería','/software-gestion-empresas-jardineria-mantenimiento/'], ['Servicios profesionales','/software-gestion-servicios-profesionales-abogados-consultores-asesorias/'], ['Retail','/software-gestion-tiendas-retail/'], ['Industria','/software-gestion-industriales-carpinteria-fontaneria-electricidad-herreria/'], ['Marina','/software-gestion-empresas-nautica/'], ['Marketing & diseño','/software-gestion-agencias-marketing-diseno/'], ['Asesorías','/asesorias/']] },
    { title: 'Empresa', links: [['Sobre nosotros','/sobre-nosotros/'], ['Asesorías','/asesorias/'], ['Academy','https://www.aferapp.com/academy/'], ['Programa de referidos','/programa-referidos/'], ['FAQs','/faqs/']] },
    { title: 'Legal', links: [['Términos de uso','/terminos-de-uso/'], ['Política de privacidad','/politica-privacidad/'], ['Cookies y privacidad','/cookies-y-privacidad/'], ['Verifactu','/programa-facturacion-certificado-adaptado-verifactu/']] },
  ];
  return (
    <footer style={{ background: 'var(--neutral-900)', color: '#CBD5E1', padding: '80px 0 40px' }}>
      <style>{`
        .afer-footer-grid {
          display: grid;
          grid-template-columns: 1.4fr repeat(4, 1fr);
          gap: 48px;
          margin-bottom: 56px;
        }
        .afer-footer-cols {
          display: contents;
        }
        @media (max-width: 900px) {
          .afer-footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 32px;
          }
          .afer-footer-brand {
            grid-column: 1 / -1;
          }
        }
        @media (max-width: 480px) {
          .afer-footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 24px;
          }
        }
      `}</style>
      <Container>
        <div className="afer-footer-grid">
          <div className="afer-footer-brand">
            <div style={{ marginBottom: 20 }}><Logo light={true}/></div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: '#94A3B8', maxWidth: 280, marginBottom: 20 }}>
              ProSuite para PYMEs y autónomos. Facturación, control horario e inteligencia artificial — todo en una plataforma.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              {['globe', 'send', 'users'].map(n => (
                <div key={n} style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                  <Icon name={n} size={16} color="#CBD5E1"/>
                </div>
              ))}
            </div>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 16 }}>{col.title}</div>
              {col.links.map(([l, h]) => (
                <a key={l} href={h} style={{ display: 'block', fontSize: 14, color: '#94A3B8', textDecoration: 'none', padding: '6px 0' }}
                   onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                   onMouseLeave={e => e.currentTarget.style.color = '#94A3B8'}>{l}</a>
              ))}
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'center', justifyContent: 'space-between', paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: '#94A3B8' }}>
              <Icon name="shield" size={14} color="#16A34A"/> Verifactu y Ley Antifraude
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: '#94A3B8' }}>
              <Icon name="bank" size={14} color="#3D6CF5"/> Supervisado por Banco de España
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: '#94A3B8' }}>
              <Icon name="lock" size={14} color="#F59E0B"/> GDPR · Cifrado AES-256
            </div>
          </div>
          <div style={{ fontSize: 12, color: '#64748B' }}>© 2026 Afer · Hecho en España</div>
        </div>
      </Container>
    </footer>
  );
}
window.Footer = Footer;