<script setup lang="ts">
const { t, locale } = useI18n();
const switchLocalePath = useSwitchLocalePath();

definePageMeta({
  layout: 'blank'
});

useHead({
  title: () => `404 - ${t('common.notFound')}`
});
</script>

<template>
  <div class="min-h-screen flex-col-center">
    <h1 class="text-7xl font-bold text-gray-200 dark:text-gray-700">404</h1>
    <h2 class="mt-16px text-xl font-medium text-gray-700 dark:text-gray-200">
      {{ t('common.notFound') }}
    </h2>
    <p class="mt-8px text-sm text-gray-400">
      {{ t('common.notFoundDesc') }}
    </p>
    <NuxtLink
      :to="switchLocalePath(locale)"
      class="mt-32px px-24px py-10px rounded-6px bg-primary text-white text-sm hover:opacity-90 transition-opacity"
    >
      {{ t('common.backHome') }}
    </NuxtLink>
  </div>
</template>
