<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { useLocale } from "@/composables/useLocale";

const { path } = useLocale();
const { t } = useI18n();

const route = useRoute();
const router = useRouter();

const goBack = () => router.back();
const url = computed(() => route.fullPath);
</script>

<template>
  <header class="fixed w-full z-40 transition-all py-6">
    <div class="flex items-center justify-center">
      <!-- LOGO -->
      <a href="/">
        <img
          src="/muco-logo.svg"
          alt="Müco Logo"
          class="transition-all duration-300 h-16"
        />
      </a>
    </div>
  </header>
  <section
    class="relative flex min-h-screen w-screen items-center justify-center overflow-hidden bg-white px-6 py-28 text-dark"
  >
    <div class="not-found-blob not-found-blob-left" />
    <div class="not-found-blob not-found-blob-right" />

    <div class="relative z-10 mx-auto max-w-5xl text-center">
      <h1
        class="font-handwritten text-[clamp(72px,18vw,190px)] font-light leading-none tracking-widest text-dark"
      >
        404
      </h1>

      <p
        class="mx-auto mt-4 max-w-3xl font-handwritten text-[clamp(42px,8vw,92px)] font-light leading-[0.9] tracking-widest text-dark"
      >
        {{ t("errors.title") }}
      </p>

      <p v-if="url" class="mt-6">
        <code
          class="inline-block max-w-full rounded-full border border-dark/10 bg-dark/[0.04] px-4 py-2 text-xs text-dark/55 md:text-sm"
        >
          {{ url }}
        </code>
      </p>

      <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
        <RouterLink
          :to="path"
          class="inline-flex items-center justify-center rounded-full bg-dark px-7 py-3 text-sm font-medium text-white transition hover:scale-[1.03] active:scale-[0.98]"
        >
          {{ t("errors.backHome") }}
        </RouterLink>

        <button
          type="button"
          class="inline-flex cursor-pointer items-center justify-center rounded-full border border-dark/15 bg-white px-7 py-3 text-sm font-medium text-dark transition hover:bg-light active:scale-[0.98]"
          @click="goBack"
        >
          {{ t("errors.goBack") }}
        </button>
      </div>
    </div>
  </section>
</template>

<style scoped>
.not-found-blob {
  position: absolute;
  z-index: 0;
  width: clamp(320px, 42vw, 720px);
  height: clamp(320px, 42vw, 720px);
  border-radius: 9999px;
  background:
    radial-gradient(
      circle at 35% 35%,
      rgba(245, 231, 204, 0.95),
      transparent 58%
    ),
    radial-gradient(circle at 70% 70%, rgba(45, 44, 42, 0.08), transparent 62%);
  filter: blur(2px);
  pointer-events: none;
}

.not-found-blob-left {
  left: -18vw;
  bottom: -18vh;
  animation: floatLeft 9s ease-in-out infinite;
}

.not-found-blob-right {
  right: -20vw;
  top: -20vh;
  transform: scale(0.85);
  animation: floatRight 11s ease-in-out infinite;
}

@keyframes floatLeft {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(2vw, -2vh, 0) rotate(4deg);
  }
}

@keyframes floatRight {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.85) rotate(0deg);
  }

  50% {
    transform: translate3d(-2vw, 2vh, 0) scale(0.9) rotate(-4deg);
  }
}

@media (max-width: 640px) {
  .not-found-blob-left {
    left: -45vw;
    bottom: -16vh;
  }

  .not-found-blob-right {
    right: -48vw;
    top: -14vh;
  }
}
</style>
