<script setup lang="ts">
definePageMeta({
  layout: "card-layout",
  middleware: [
    defineNuxtRouteMiddleware(() => {
      const formSubmitted = useState("form-submitted", () => false);
      if (!formSubmitted.value) {
        return navigateTo("/");
      }
      formSubmitted.value = false;
    }),
  ],
});

const { t } = useI18n();
useSeoMeta({
  title: computed(() => t("thankYouSeo.title")),
  description: computed(() => t("thankYouSeo.description")),
});
</script>

<template>
  <section
    id="thanks"
    class="h-[calc(100vh-5rem)] bg-gradient-odd relative overflow-hidden flex flex-col justify-center items-center"
  >
    <HomeHeroBackroundStars />
    <HomeHeroBackgroundGrid position="top" />

    <div class="container mx-auto flex flex-col items-center justify-center gap-6 text-center">
      <h1
        class="text-primary max-w-[900px] px-6 leading-relaxed dark-text-gradient text-[48px] font-semibold"
      >
        {{ $t("thanks.title") }}
      </h1>

      <p
        class="text-primary max-w-[700px] px-6 text-[16px] leading-relaxed md:text-[18px] dark-text-gradient"
      >
        {{ $t("thanks.check-mail") }}
      </p>

      <NuxtLinkLocale :to="`/`" class="mt-4 w-[30%] cursor-pointer">
        <Button
          variant="wsGradient"
          size="wsDefault"
          class="w-full cursor-pointer text-base md:text-lg"
        >
          {{ $t("thanks.button") }}
        </Button>
      </NuxtLinkLocale>
    </div>

    <HomeHeroBackgroundGrid position="bottom" />
  </section>
</template>

