---
import Image from 'astro/components/Image.astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import ComImage from '~/assets/ComImage.png'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import CheckIcon from '~/icons/CheckIcon.astro'
import GitHubIcon from '~/icons/GitHubIcon.astro'
import { getLocale, getUI } from '~/utils/i18n'

const locale = getLocale(Astro)

const {
  routes: {
    index: { community },
  },
} = getUI(locale)
---

<section
  id="Community"
  class="relative flex w-full flex-col items-center gap-6 py-12 text-start md:text-center lg:py-36"
>
  <Description class="mb-2 text-4xl font-bold sm:text-6xl">
    {
      community.title.map((title, index) =>
        title !== '\n' ? (
          <motion.span client:load {...getTitleAnimation(0.2 + index * 0.2)}>
            {title}
          </motion.span>
        ) : (
          <br class="hidden md:block" />
        )
      )
    }
  </Description>
  <motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2 lg:px-0">
    {community.description}
  </motion.p>
  <div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
    <motion.span client:load {...getTitleAnimation(0.8)}>
      <Button class:list={['px-4']} href="https://github.com/zen-browser">
        <GitHubIcon class="size-4" />
        <span>{community.lists.freeAndOpenSource.title}</span>
      </Button>
    </motion.span>
    <motion.div client:load {...getTitleAnimation(1)} className="flex items-center gap-4">
      <CheckIcon class="size-4" />
      <span>{community.lists.simpleYetPowerful.title}</span>
    </motion.div>
    <motion.div client:load {...getTitleAnimation(1.2)} className="flex items-center gap-4">
      <CheckIcon class="size-4" />
      <span>{community.lists.privateAndAlwaysUpToDate.title}</span>
    </motion.div>
  </div>
  <motion.span
    className="flex max-w-full lg:max-w-none lg:flex-none"
    client:load
    {...getTitleAnimation(1.4)}
  >
    <Image
      src={ComImage}
      alt={community.images.community.alt}
      class="rounded-3xl shadow-md lg:mx-auto dark:opacity-80"
    />
  </motion.span>
</section>