{{#unless simpleMode}}
<footer
  class="flex-none border-t border-gray-700 bg-gray-800 px-3 sm:px-4 py-2 sm:py-2.5 text-[11px] sm:text-xs text-gray-500"
>
  <nav
    class="flex flex-wrap items-center justify-center sm:justify-start gap-x-3 sm:gap-x-4 gap-y-0.5"
    aria-label="Site links"
  >
    <a
      href="/"
      class="hidden sm:inline hover:text-gray-200"
      data-i18n="nav.home"
      >Home</a
    >
    <a href="/about" class="hover:text-gray-200" data-i18n="nav.about">About</a>
    <a href="/faq" class="hover:text-gray-200" data-i18n="footer.faqLink"
      >FAQ</a
    >
    <a href="/licensing" class="hover:text-gray-200" data-i18n="nav.licensing"
      >Licensing</a
    >
    <a href="/privacy" class="hover:text-gray-200"
      ><span class="sm:hidden" data-i18n="footer.privacyShort">Privacy</span
      ><span class="hidden sm:inline" data-i18n="footer.privacyPolicy"
        >Privacy Policy</span
      ></a
    >
    <a href="/terms" class="hover:text-gray-200"
      ><span class="sm:hidden" data-i18n="footer.termsShort">Terms</span
      ><span class="hidden sm:inline" data-i18n="footer.termsAndConditions"
        >Terms and Conditions</span
      ></a
    >
    <a href="/contact" class="hover:text-gray-200" data-i18n="nav.contact"
      >Contact</a
    >
  </nav>
</footer>
{{/unless}}