---
import Image from 'astro/components/Image.astro'
import { Check, Github } from 'lucide-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 { 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 text-start md:text-center lg:py-36 gap-6 py-12"
>
  <Description class="mb-2 text-6xl font-bold">
    <motion.span client:load {...getTitleAnimation(0.2)}>
      {community.title[0]}
    </motion.span>
    <motion.span client:load {...getTitleAnimation(0.4)}>
      {community.title[1]}
    </motion.span>
    <motion.span client:load {...getTitleAnimation(0.6)}>
      {community.title[2]}
    </motion.span>
  </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">
        <Github class="size-4" />
        <span>{community.lists.freeAndOpenSource.title}</span>
      </Button>
    </motion.span>
    <motion.div
      client:load
      {...getTitleAnimation(1)}
      className="flex items-center gap-4"
    >
      <Check class="size-4" />
      <span>{community.lists.simpleYetPowerful.title}</span>
    </motion.div>
    <motion.div
      client:load
      {...getTitleAnimation(1.2)}
      className="flex items-center gap-4"
    >
      <Check 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>