const FOOTER_CSS = `
.site-footer{ background:var(--navy-900); color:#fff; padding:64px 28px 32px; }
.site-footer__in{ max-width:var(--container-max); margin:0 auto; }
.site-footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer__logo{ height:38px; margin-bottom:18px; }
.site-footer__brand p{ font-family:var(--font-body); font-size:var(--fs-body-sm); color:var(--navy-100);
  line-height:1.6; margin:0; max-width:34ch; }
.fcol h4{ font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-300); margin:0 0 16px; }
.fcol a{ display:block; font-family:var(--font-body); font-size:var(--fs-body-sm); color:var(--navy-100);
  margin-bottom:11px; transition:color var(--dur-fast) var(--ease-standard); }
.fcol a:hover{ color:#fff; }
.site-footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px;
  font-family:var(--font-body); font-size:12px; color:var(--navy-300); flex-wrap:wrap; gap:10px; }
@media(max-width:760px){ .site-footer__top{ grid-template-columns:1fr 1fr; } }
`;
{
  const _p = document.getElementById('footer-css'); if (_p) _p.remove();
  const s = document.createElement('style'); s.id = 'footer-css'; s.textContent = FOOTER_CSS; document.head.appendChild(s);
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="site-footer__in">
        <div className="site-footer__top">
          <div className="site-footer__brand">
            <img className="site-footer__logo" src="assets/logos/logo-mono.svg" alt="Grupo Haykù" />
            <p>Transporte refrigerado y carga seca con flota propia. 25 años moviendo la cadena de frío de México.</p>
          </div>
          <div className="fcol"><h4>Servicios</h4><a href="#">Transporte refrigerado</a><a href="#">Carga seca</a><a href="#">Distribución</a><a href="#">Rastreo</a></div>
          <div className="fcol"><h4>Empresa</h4><a href="#">Nosotros</a><a href="#">Flota</a><a href="#">Cobertura</a><a href="#">Contacto</a></div>
          <div className="fcol"><h4>Contacto</h4><a href="#">hola@grupohayku.mx</a><a href="#">+52 55 0000 0000</a><a href="#">Ciudad de México</a></div>
        </div>
        <div className="site-footer__bottom">
          <span>© 2026 Grupo Haykù · Transporte | Distribución</span>
          <span>Aviso de privacidad · Términos</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;