<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
    <div class="max-w-2xl w-full space-y-8 text-center">
      <div>
        <h1 class="text-9xl font-bold text-gray-300 mb-4">404</h1>
        <h2 class="text-3xl font-bold text-gray-900 mb-4">{{ $t('errors.404.title') }}</h2>
        <p class="text-xl text-gray-600 mb-8">{{ $t('errors.404.message') }}</p>
        
        <!-- 导航链接 -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
          <NuxtLink 
            :to="localePath('/')" 
            class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors"
          >
            {{ $t('errors.404.backHome') }}
          </NuxtLink>
          <NuxtLink 
            :to="localePath('/solutions')" 
            class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
          >
            {{ $t('nav.solutions') }}
          </NuxtLink>
          <NuxtLink 
            :to="localePath('/contact')" 
            class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
          >
            {{ $t('nav.contact') }}
          </NuxtLink>
        </div>

        <!-- 搜索建议 -->
        <div class="bg-white rounded-lg p-6 shadow-sm">
          <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ $t('errors.404.searchSuggestions') }}</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-left">
            <NuxtLink :to="localePath('/solutions')" class="text-blue-600 hover:text-blue-800">
              → {{ $t('errors.404.suggestions.0') }}
            </NuxtLink>
            <NuxtLink :to="localePath('/pricing')" class="text-blue-600 hover:text-blue-800">
              → {{ $t('errors.404.suggestions.1') }}
            </NuxtLink>
            <NuxtLink :to="localePath('/blog')" class="text-blue-600 hover:text-blue-800">
              → {{ $t('errors.404.suggestions.2') }}
            </NuxtLink>
            <NuxtLink :to="localePath('/contact')" class="text-blue-600 hover:text-blue-800">
              → {{ $t('errors.404.suggestions.3') }}
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

// 设置404页面的SEO
useSeoMeta({
  title: () => t('errors.404.title'),
  description: () => t('errors.404.message'),
  robots: 'noindex, nofollow'
})
</script>