const SiteFooter = ({ t }) => (
  <footer className="site-footer">
    <div className="container footer-grid">
      <div>
        <img src="assets/logo-alliance-official.png" alt="ALLIANCE" className="footer-logo" />
        <p className="footer-lede">{t.footer_desc}</p>
        <p className="footer-disclaimer">{t.footer_disclaimer}</p>
      </div>
      <div className="footer-col">
        <div className="footer-label">{t.footer_label_email}</div>
        <ul>
          <li>
            <i data-lucide="mail"></i>
            <a href="mailto:hola@alliance.org.mx?subject=Propuesta%20de%20remolcador%20usado">hola@alliance.org.mx</a>
          </li>
        </ul>
      </div>
      <div className="footer-col">
        <div className="footer-label">{t.footer_label_refs}</div>
        <ul>
          <li><a href="#units">{t.footer_ref_units}</a></li>
          <li><a href="#compare">{t.footer_ref_table}</a></li>
          <li><a href="#form">{t.footer_ref_form}</a></li>
        </ul>
      </div>
      <div className="footer-col">
        <div className="footer-label">{t.footer_label_legal}</div>
        <ul>
          <li><a href="#legal-scope">{t.footer_legal_scope}</a></li>
          <li><a href="privacy-notice.html">{t.footer_privacy}</a></li>
          <li><a href="terms-of-use.html">{t.footer_terms}</a></li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <div className="container footer-bottom-inner">
        <span className="footer-entity">{t.footer_entity}</span>
        <a href="mailto:hola@alliance.org.mx?subject=Propuesta%20de%20remolcador%20usado" className="footer-email-link">
          hola@alliance.org.mx
        </a>
      </div>
    </div>
  </footer>
);

window.SiteFooter = SiteFooter;