---
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/sponsors/tutaLogo_monochrome.svg"

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>