---
import Layout from '@/components/Layout.astro';
import { SITE_NAME } from '@/consts';
---

<Layout title={`404 - 页面未找到 | ${SITE_NAME}`}>
  <div class="min-h-[calc(100vh-4rem)] flex items-center justify-center">
    <div class="text-center px-4">
      <h1 class="text-6xl md:text-8xl font-bold bg-gradient-to-r from-primary-600 to-primary-400 dark:from-primary-400 dark:to-primary-200 text-transparent bg-clip-text mb-6">
        404
      </h1>
      <p class="text-2xl md:text-3xl font-semibold text-secondary-800 dark:text-secondary-200 mb-4">
        页面未找到
      </p>
      <p class="text-lg md:text-xl text-secondary-600 dark:text-secondary-400 max-w-2xl mx-auto leading-relaxed mb-8">
        您访问的页面不存在或已被移动到其他位置
      </p>
      <a href="/" class="inline-block px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg">
        返回首页
      </a>
    </div>
  </div>
</Layout>