<script setup lang="ts">
const props = defineProps<{ error: any }>()

useHead({ title: '页面未找到' })
</script>

<template>
  <div class="min-h-screen flex items-center justify-center" style="background-color: var(--app-bg)">
    <div class="text-center px-6">
      <h1
        class="text-8xl font-black mb-4"
        style="font-family: 'Noto Serif SC', serif; color: var(--muted-2)"
      >
        {{ error?.statusCode || 404 }}
      </h1>
      <p
        class="text-xl mb-8"
        style="font-family: 'Noto Serif SC', serif; color: var(--text-2)"
      >
        {{ error?.message || '页面不存在' }}
      </p>
      <NuxtLink
        to="/"
        class="inline-block px-6 py-2.5 rounded-lg text-sm font-medium text-white transition-all hover:opacity-90"
        style="background-color: var(--accent); font-family: 'Noto Sans SC', sans-serif"
      >
        返回首页
      </NuxtLink>
    </div>
  </div>
</template>
