---
import Button from '~/components/Button.astro'
import Circles from '~/components/Circles.astro'
import Description from '~/components/Description.astro'
import SocialMediaStrip from '~/components/SocialMediaStrip.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'

const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
  components: { footer },
} = getUI(locale)
---

<footer
  id="footer"
  class="relative flex w-full flex-col items-center gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24"
  role="contentinfo"
  aria-label="Site footer"
>
  <div class="container flex w-full flex-col items-start justify-between gap-12">
    <section
      class="flex w-full flex-col gap-4 text-center lg:w-1/2 lg:text-left"
      aria-labelledby="footer-title"
    >
      <Description id="footer-title" class="text-6xl font-bold !text-paper"
        >{footer.title}</Description
      >
      <Description class="mx-auto max-w-xl lg:mx-0">
        {footer.description}
      </Description>
    </section>
    <section class="grid gap-10 place-self-center lg:place-self-start">
      <Button
        href="/download"
        isPrimary
        class="h-fit w-fit bg-paper !text-dark"
        aria-label={footer.download}
      >
        {footer.download}
        <ArrowRightIcon class="size-4" aria-hidden="true" />
      </Button>
    </section>
    <section
      class="grid w-full max-w-5xl place-items-center gap-12 text-center sm:text-left"
      aria-label="Footer navigation and links"
    >
      <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:w-full">
        <div class="grid gap-8 sm:col-span-2 sm:grid-cols-2 md:col-span-1 md:grid-cols-1">
          <section
            class="flex flex-col items-center gap-2 sm:items-start"
            aria-labelledby="follow-us-heading"
          >
            <h2 id="follow-us-heading" class="text-base !font-semibold">
              {footer.followUs}
            </h2>
            <SocialMediaStrip />
          </section>
          <section class="flex flex-col gap-2" aria-labelledby="about-us-heading">
            <h2 id="about-us-heading" class="text-base !font-semibold">
              {footer.aboutUs}
            </h2>
            <nav aria-label="About navigation">
              <ul class="grid gap-2 opacity-80">
                <li>
                  <a href={getLocalePath('/about')} class="font-normal"
                    >{footer.teamAndContributors}</a
                  >
                </li>
                <li>
                  <a href={getLocalePath('/privacy-policy')} class="font-normal"
                    >{footer.privacyPolicy}</a
                  >
                </li>
              </ul>
            </nav>
          </section>
        </div>
        <nav class="flex flex-col gap-2" aria-labelledby="get-started-heading">
          <h2 id="get-started-heading" class="text-base !font-semibold">
            {footer.getStarted}
          </h2>
          <ul class="grid gap-2 opacity-80">
            <li>
              <a href="https://docs.zen-browser.app/" class="font-normal">{footer.documentation}</a>
            </li>
            <li>
              <a href={getLocalePath('/mods')} class="font-normal">{footer.zenMods}</a>
            </li>
            <li>
              <a href={getLocalePath('/release-notes')} class="font-normal">{footer.releaseNotes}</a
              >
            </li>
            <li>
              <a href={getLocalePath('/download?twilight')} class="font-normal">{footer.twilight}</a
              >
            </li>
          </ul>
        </nav>
        <nav class="flex flex-col gap-2" aria-labelledby="get-help-heading">
          <h2 id="get-help-heading" class="text-base !font-semibold">
            {footer.getHelp}
          </h2>
          <ul class="grid gap-2 opacity-80">
            <li>
              <a href="https://discord.gg/zen-browser" class="font-normal">{footer.discord}</a>
            </li>
            <li>
              <a href="https://uptime.zen-browser.app/" class="font-normal">{footer.uptimeStatus}</a
              >
            </li>
            <li>
              <a href="https://github.com/zen-browser/desktop/issues/new/choose" class="font-normal"
                >{footer.reportAnIssue}</a
              >
            </li>
          </ul>
        </nav>
      </div>
    </section>
    <section
      class="grid w-full grid-cols-[1fr_auto] items-center gap-2"
      aria-label="Copyright information"
    >
      <p
        class="flex justify-center gap-2 lg:justify-start"
        set:html={footer.madeWith.replace('{link}', getLocalePath('/about'))}
      />
    </section>
    <section class="absolute bottom-0 right-0">
      <Circles white multiplier={0.7} class="mb-[-100px] ml-auto mr-[-80px] hidden lg:block" />
    </section>
  </div>
</footer>
