---
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'

const locale = getLocale(Astro)
const {
  routes: { donate },
  layout,
} = getUI(locale)
---

<Layout title={layout.donate.title} description={layout.donate.description}>
  <main class="container flex flex-col items-center gap-12 pb-52 pt-24">
    <div class="flex flex-col gap-4 lg:text-center">
      <Description class="text-6xl font-bold">{donate.title}</Description>
      <Description class="max-w-3xl">
        {donate.description}
      </Description>
    </div>
    <div class="grid max-w-5xl grid-cols-1 gap-12 text-center lg:grid-cols-[1fr_1px_1fr]">
      <div class="flex flex-col items-center gap-4">
        <div class="text-6xl font-bold">{donate.patreon.title}</div>
        <Description>
          {donate.patreon.description}
        </Description>
        <Button isPrimary href="https://www.patreon.com/zen_browser" class="w-fit">
          {donate.patreon.button}
          <ArrowRightIcon class="size-4" />
        </Button>
      </div>
      <hr class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block" />
      <div class="flex flex-col items-center gap-4">
        <div class="text-6xl font-bold">{donate.koFi.title}</div>
        <Description>
          {donate.koFi.description}
        </Description>
        <Button href="https://ko-fi.com/zen_browser" isPrimary class="w-fit">
          {donate.koFi.button}
          <ArrowRightIcon class="size-4" />
        </Button>
      </div>
    </div>
  </main>
</Layout>
