// Footer con contacto y enlaces legales. Los textos legales son borrador
// (ver aviso-legal.html, politica-privacidad.html, politica-cookies.html) —
// pendientes de revisar antes de recoger datos reales de clientes.
function Footer() {
  const anio = new Date().getFullYear();

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            {window.SITE_CONFIG.brandName}
            <p>{window.t('footer.desc')}</p>
          </div>

          <div className="footer__cols">
            <div className="footer__col">
              <h4>{window.t('footer.nav')}</h4>
              <ul>
                <li><a href="#inicio">{window.t('footer.home')}</a></li>
                <li><a href="#como-trabajamos">{window.t('nav.how')}</a></li>
                <li><a href="#faq">{window.t('nav.faq')}</a></li>
              </ul>
            </div>
            <div className="footer__col">
              <h4>{window.t('footer.contact')}</h4>
              <ul>
                <li><a href="mailto:hola@example.com">hola@example.com</a></li>
              </ul>
            </div>
            <div className="footer__col">
              <h4>{window.t('footer.legal')}</h4>
              <ul>
                <li><a href="aviso-legal.html">{window.t('footer.l1')}</a></li>
                <li><a href="politica-privacidad.html">{window.t('footer.l2')}</a></li>
                <li><a href="politica-cookies.html">{window.t('footer.l3')}</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div className="footer__bottom">
          <span>© {anio} {window.SITE_CONFIG.brandName}. {window.t('footer.rights')}</span>
        </div>
      </div>
    </footer>
  );
}