// Footer — azul noche (#050A30) per brandbook
// Exports: Footer

function Footer() {
  return (
    <footer style={{ background: '#050A30', color: 'rgba(255,255,255,0.85)', paddingTop: 64, paddingBottom: 28, position: 'relative', overflow: 'hidden' }}>
      <Molecule width={220} style={{ position: 'absolute', top: 40, right: 60, opacity: 0.18 }} color="#20E7AF" />
      <Molecule width={160} style={{ position: 'absolute', bottom: 30, left: 80, opacity: 0.16 }} color="#20E7AF" />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1.2fr 1fr', gap: 48, paddingBottom: 36, borderBottom: '1px solid rgba(140,200,255,0.12)' }}>
          {/* Logo + tagline */}
          <div>
            <img
              src="assets/logo-principal-blanco.png"
              alt="DISPROQUILIM"
              style={{ height: 42, width: 'auto', display: 'block' }}
            />
            <p style={{ fontSize: 13, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)', marginTop: 18, maxWidth: 280 }}>
              Soluciones químicas de limpieza profesional para negocios, comercios e industrias.
            </p>
          </div>

          {/* Menu */}
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#20E7AF', marginBottom: 20 }}>Menú</h4>
            <ul style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {['Inicio', 'Soluciones', 'Sectores', 'Productos', 'Contacto'].map(item => (
                <li key={item}><a style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)', cursor: 'pointer' }}>{item}</a></li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#20E7AF', marginBottom: 20 }}>Contacto</h4>
            <ul style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { icon: 'phone', label: 'Teléfono:', value: 'Agregar teléfono' },
                { icon: 'mail', label: 'Email:', value: 'Agregar correo' },
                { icon: 'mapPin', label: 'Ubicación:', value: 'San Francisco, Zulia' },
              ].map(item => (
                <li key={item.label} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 999, border: '1.5px solid rgba(32,231,175,0.5)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#20E7AF', flex: 'none',
                  }}>
                    <Icon name={item.icon} size={14} />
                  </div>
                  <div>
                    <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.55)' }}>{item.label}</div>
                    <div style={{ fontSize: 14, color: '#fff', fontWeight: 500 }}>{item.value}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* Social */}
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#20E7AF', marginBottom: 20 }}>Síguenos</h4>
            <div style={{ display: 'flex', gap: 12 }}>
              {['facebook', 'linkedin', 'instagram', 'youtube'].map(n => (
                <a key={n} style={{ width: 40, height: 40, borderRadius: 999, border: '1.5px solid rgba(140,200,255,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', cursor: 'pointer', transition: 'border-color 150ms, color 150ms' }}
                   onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#20E7AF'; e.currentTarget.style.color = '#20E7AF'; }}
                   onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(140,200,255,0.3)'; e.currentTarget.style.color = '#fff'; }}>
                  <Icon name={n} size={18} />
                </a>
              ))}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 10, paddingTop: 24, fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>
          <Icon name="shield" size={16} color="#20E7AF" />
          © DISPROQUILIM. Todos los derechos reservados.
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;