<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div class="text-center">
      <div class="mb-8">
        <h1 class="text-9xl font-bold text-gray-300">404</h1>
        <h2 class="text-2xl font-semibold text-gray-900 mb-4">{{ t('errors.404.title') }}</h2>
        <p class="text-gray-600 mb-8">{{ t('errors.404.message') }}</p>
      </div>
      
      <NuxtLink 
        :to="localePath('/')"
        class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
      >
        {{ t('errors.404.backHome') }}
      </NuxtLink>
    </div>
  </div>
</template>

<script setup>
const { t } = useI18n()
const localePath = useLocalePath()
</script>


