<script lang="ts" setup>
import { useGlobalClientsQuery } from "~/queries/clients";
const { data: clients } = useGlobalClientsQuery();
</script>

<template>
  <section
    id="hero"
    class="-mt-header bg-gradient-odd relative overflow-hidden max-2xl:flex max-2xl:flex-col max-2xl:justify-center"
  >
    <HomeHeroBackroundStars />
    <HomeHeroBackgroundGrid position="top" />
    <div
      class="2xl:pt-header relative z-[1] container mx-auto flex flex-col justify-center px-4 pt-[calc(var(--header-height)+4rem)]"
    >
      <h1
        class="dark-text-gradient mx-auto max-w-[850px] text-center text-2xl leading-10 font-semibold text-pretty md:text-4xl md:leading-14 2xl:pt-36 2xl:text-5xl 2xl:leading-16"
      >
        {{ $t("homeHero.title") }}
      </h1>

      <p
        class="text-muted-foreground mx-auto max-w-[400px] py-10 text-center md:max-w-[735px]"
      >
        {{ $t("homeHero.description") }}
      </p>

      <GlowWrapper>
        <NuxtLinkLocale to="/contact" class="mx-auto">
          <Button
            class="mx-auto cursor-pointer !text-black dark:!text-white"
            variant="wsDefault"
            size="wsDefault"
          >
            {{ $t("homeHero.button") }}
          </Button>
        </NuxtLinkLocale>
      </GlowWrapper>
    </div>

    <div class="xl:py-section relative z-[2] py-[50px]">
      <div v-if="!clients" class="overflow-hidden pt-8">
        <div class="flex h-[4rem] items-center md:h-[5rem] lg:h-[6rem]">
          <div class="container mx-auto px-4">
            <div class="flex w-full animate-pulse items-center gap-7">
              <div
                v-for="n in 3"
                :key="`mobile-${n}`"
                class="h-16 w-full rounded-md bg-gray-200 sm:hidden dark:bg-gray-700"
              />

              <div
                v-for="n in 5"
                :key="`tablet-${n}`"
                class="hidden h-16 w-full rounded-md bg-gray-200 sm:flex lg:hidden dark:bg-gray-700"
              />
              <div
                v-for="n in 8"
                :key="`desktop-${n}`"
                class="hidden h-16 w-full rounded-md bg-gray-200 lg:flex xl:hidden dark:bg-gray-700"
              />
              <div
                v-for="n in 10"
                :key="`large-screen-${n}`"
                class="hidden h-16 w-full rounded-md bg-gray-200 xl:flex dark:bg-gray-700"
              />
            </div>
          </div>
        </div>
      </div>
      <LazyHeroClientsLogos
        v-if="clients"
        :clients="clients!"
        :hydrate-after="1000"
      />
    </div>
    <HomeHeroBackgroundGrid position="bottom" />
  </section>
</template>
