<template>
  <div class="flex min-h-screen items-center justify-center bg-muted">
    <div class="text-center">
      <h1 class="mb-4 text-4xl font-bold">{{ t("errors.404.title") }}</h1>
      <p class="mb-4 text-xl text-muted-foreground">{{ t("errors.404.subtitle") }}</p>
      <RouterLink to="/" class="text-primary underline hover:text-primary/90">{{ t("errors.404.button") }}</RouterLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { useHead } from "@unhead/vue";
import { computed } from "vue";

const route = useRoute();
const { t } = useI18n();

useHead({
  title: computed(() => t('errors.404.title')),
  meta: [
    { name: 'robots', content: 'noindex, nofollow' }
  ]
});

console.error("404 Error: User attempted to access non-existent route:", route.path);
</script>
