---
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import Description from '~/components/Description.astro'
import { getLocale, getUI } from '~/utils/i18n'

const locale = getLocale(Astro)

import tutaLogo from '~/assets/tuta-logo.png'

import Image from 'astro/components/Image.astro'
const { showSponsors = true } = Astro.props

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

<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
  <div class="mx-auto flex flex-col text-center">
    <motion.span client:load {...getTitleAnimation(0.2)}>
      <Description class="mb-2 text-6xl font-bold">Our Sponsors</Description>
    </motion.span>
    <motion.span client:load {...getTitleAnimation(0.4)}>
      <Description set:html={sponsors.description} />
    </motion.span>
    <div class="relative mt-8 flex items-center justify-center">
      <motion.span client:load {...getTitleAnimation(0.6)}>
        <a href={sponsors.sponsors['tuta'].url} target="_blank" class="w-fit">
          <Image
            src={tutaLogo}
            alt={sponsors.sponsors['tuta'].name}
            class="h-16 w-fit object-contain"
          />
        </a>
      </motion.span>
    </div>
  </div>
</section>
