function Footer() {
  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <footer style={{
      background: 'var(--navy)',
      color: 'white',
      padding: '64px 0 28px',
      position: 'relative',
    }}>
      <div className="container">

        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1.2fr',
          gap: 64,
          paddingBottom: 40,
          borderBottom: '1px solid rgba(255,255,255,0.10)',
        }}>

          {/* Brand */}
          <div>
            <img src="assets/logo-cmpi.png" alt="CMPI" style={{ height: 56, width: 'auto', marginBottom: 20 }} />
            <p style={{
              fontSize: 14,
              lineHeight: 1.6,
              color: 'rgba(255,255,255,0.72)',
              marginBottom: 8,
              maxWidth: 360,
            }}>
              Importación y distribución de papel y materias primas para la industria gráfica y de empaque en Colombia.
            </p>
          </div>

          {/* Nav */}
          <div>
            <div style={{
              fontSize: 11,
              fontWeight: 700,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.55)',
              marginBottom: 18,
            }}>Navegación</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { label: 'Inicio', id: 'top' },
                { label: 'Quiénes somos', id: 'quienes' },
                { label: 'Servicios', id: 'portafolio' },
                { label: 'Portafolio', id: 'portafolio' },
                { label: 'Aliados', id: 'aliados' },
                { label: 'Contacto', id: 'contacto' },
              ].map((it) => (
                <a key={it.label} href={`#${it.id}`} onClick={scrollTo(it.id)}
                  style={{ fontSize: 14, color: 'rgba(255,255,255,0.82)', transition: 'color .2s' }}
                  onMouseOver={(e)=>e.target.style.color='var(--teal)'}
                  onMouseOut={(e)=>e.target.style.color='rgba(255,255,255,0.82)'}
                >{it.label}</a>
              ))}
            </div>
          </div>

          {/* Contact */}
          <div>
            <div style={{
              fontSize: 11,
              fontWeight: 700,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.55)',
              marginBottom: 18,
            }}>Contacto</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a href="mailto:administrativo@cmpi.com.co" style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'rgba(255,255,255,0.82)' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.6 }}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                administrativo@cmpi.com.co
              </a>
              <a href="mailto:servicioalcliente@cmpi.com.co" style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'rgba(255,255,255,0.82)' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.6 }}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                servicioalcliente@cmpi.com.co
              </a>
              <a href="tel:+576014137719" style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'rgba(255,255,255,0.82)' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.6 }}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                (601) 413 7719
              </a>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'rgba(255,255,255,0.82)' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.6, marginTop: 3, flexShrink: 0 }}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                Calle 14 No. 57-36, Piso 3, Bogotá
              </div>
            </div>
          </div>

        </div>

        <div style={{
          paddingTop: 24,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 12,
        }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.04em' }}>
            © 2026 CMPI S.A.S. Todos los derechos reservados.
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.04em' }}>
            Compañía de Materiales & Papeles Internacionales
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;