---
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import HomePageVideo from '~/assets/HomePageVideo.webm'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import Title from '~/components/Title.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import SocialMediaStrip from './SocialMediaStrip.astro'
import Video from './Video.astro'

let titleAnimationCounter = 0
function getNewAnimationDelay() {
  titleAnimationCounter++
  return titleAnimationCounter * 0.15
}

function getHeroTitleAnimation() {
  return getTitleAnimation(getNewAnimationDelay())
}

const locale = getLocale(Astro)

const getLocalePath = getPath(locale)

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

<header
  id="header"
  class="flex w-full flex-col items-center gap-[20%] py-32 text-center lg:gap-[25%]"
>
  <div class="flex h-full flex-col items-center justify-center">
    <Title
      class="relative px-12 text-center !font-normal leading-8 md:text-7xl lg:px-0 lg:text-9xl"
    >
      <motion.span client:load {...getHeroTitleAnimation()}>
        {hero.title[0]}
      </motion.span>
      <motion.span client:load {...getHeroTitleAnimation()}>
        {hero.title[1]}
      </motion.span>
      <br class="hidden md:block" />
      <motion.span client:load {...getHeroTitleAnimation()}>
        {hero.title[2]}
      </motion.span>
      <motion.span
        client:load
        {...getHeroTitleAnimation()}
        className="italic text-coral"
      >
        {hero.title[3]}
      </motion.span>
      <motion.span client:load {...getHeroTitleAnimation()}>
        {hero.title[4]}
      </motion.span>
    </Title>
    <motion.span client:load {...getHeroTitleAnimation()}>
      <Description class="px-12 text-center lg:px-0">
        {hero.description[0]}.
        <br class="hidden sm:inline" />
        {hero.description[1]}</Description
      >
    </motion.span>
    <div class="mt-6 flex w-2/3 flex-col gap-3 sm:gap-6 md:w-fit md:flex-row">
      <motion.span client:load {...getHeroTitleAnimation()}>
        <Button class="w-full" href={getLocalePath('/download')} isPrimary>
          {hero.buttons.beta}
          <ArrowRightIcon class="size-4" />
        </Button>
      </motion.span>
      <motion.span client:load {...getHeroTitleAnimation()}>
        <Button href={getLocalePath('/donate')}>{hero.buttons.support}</Button>
      </motion.span>
    </div>
    <motion.span
      client:load
      {...getHeroTitleAnimation()}
      class="mx-auto translate-y-16 !transform"
    >
      <SocialMediaStrip />
    </motion.span>
  </div>
</header>
<motion.span
  className="flex max-w-full lg:max-w-none lg:flex-none"
  client:load
  {...getHeroTitleAnimation()}
>
  <Video
    src={HomePageVideo}
    autoplay
    loop
    muted
    playsinline
    preload="none"
    class="mb-24 rounded-3xl shadow-md dark:opacity-80"
  />
</motion.span>
