---
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import { motion } from 'motion/react'
import { Github, Check } from 'lucide-astro'
import { getTitleAnimation } from '../animations'
import ComImage from '../assets/ComImage.png'
import Image from 'astro/components/Image.astro'
---

<section
  id="Community"
  class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:pt-36"
>
  <Description class="mb-2 px-4 text-6xl font-bold">
    <motion.span client:load {...getTitleAnimation(0.2)}> Our </motion.span>
    <motion.span client:load {...getTitleAnimation(0.4)}> Core </motion.span>
    <motion.span client:load {...getTitleAnimation(0.6)}> Values </motion.span>
  </Description>
  <motion.p
    client:load
    {...getTitleAnimation(0.6)}
    className="px-4 md:px-24 lg:w-1/2 lg:px-0"
  >
    We make it not only a priority but a necessity to ensure that Zen provides
    always the best experience for you. We are committed to making Zen the most
    beautiful, productive, and privacy-focused browser out there.
  </motion.p>
  <div
    class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 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>Free and open-source</span>
      </Button>
    </motion.span>
    <motion.div
      client:load
      {...getTitleAnimation(1)}
      className="flex items-center gap-4"
    >
      <Check class="size-4" />
      <span>Simple yet powerful</span>
    </motion.div>
    <motion.div
      client:load
      {...getTitleAnimation(1.2)}
      className="flex items-center gap-4"
    >
      <Check class="size-4" />
      <span>True privacy and always up-to-date</span>
    </motion.div>
  </div>
  <motion.span
    className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
    client:load
    {...getTitleAnimation(1.4)}
  >
    <Image
      src={ComImage}
      alt="Community"
      class="my-24 rounded-3xl shadow-md lg:mx-auto lg:w-4/5 dark:opacity-80"
    />
  </motion.span>
</section>