---
import h3 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="flex flex-col items-center gap-6 text-center">
    <h3
      class="text-4xl font-bold sm:text-6xl"
      style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
    >
      {sponsors.title}
    </h3>
    <p class="text-base" style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
      <span class="opacity-80" set:html={sponsors.description} />
    </p>
    <div class="sponsors__sponsor relative mt-8 flex items-center justify-center">
      <a
        href={sponsors.sponsors['tuta'].url}
        target="_blank"
        class="w-fit"
        style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
      >
        <Image
          src={tutaLogo}
          alt={sponsors.sponsors['tuta'].name}
          class="h-16 w-fit object-contain"
        />
      </a>
    </div>
  </div>
</section>

<script>
  import { animate, onScroll, stagger } from 'animejs'

  function initAnimations() {
    const debug = false

    const elements = document.querySelectorAll(
      '#sponsors h3, #sponsors p, #sponsors .sponsors__sponsor a'
    )

    animate(elements, {
      opacity: { from: 0.001, to: 1 },
      translateY: { from: 20, to: 0 },
      filter: { from: 'blur(4px)', to: 'blur(0px)' },
      duration: 300,
      delay: stagger(150),
      ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
      autoplay: onScroll({
        target: '#sponsors',
        debug,
      }),
    })
  }
  initAnimations()
</script>
