---
import Layout from "@/layouts/Layout.astro";
import MainGridLayout from "@/layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
import { siteConfig } from "@/config";
---

<Layout title="页面未找到">
	<MainGridLayout>
		<div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
			<!-- 404 图标 -->
			<div class="mb-8">
				<div class="relative">
					<div class="text-8xl md:text-9xl font-bold text-[var(--primary)] opacity-20">
						404
					</div>
					<div class="absolute inset-0 flex items-center justify-center">
						<Icon name="fa6-solid:face-sad-tear" class="text-6xl md:text-7xl text-[var(--primary)]" />
					</div>
				</div>
			</div>

			<!-- 错误信息 -->
			<div class="card-base p-8 max-w-md mx-auto mb-8">
				<h1 class="text-2xl md:text-3xl font-bold text-90 mb-4">
					页面走丢了
				</h1>
				<p class="text-75 mb-6 leading-relaxed">
					抱歉，您访问的页面不存在或已被移动。
					<br>
					请检查URL是否正确，或者返回首页继续浏览。
				</p>
				
				<!-- 导航按钮 -->
				<div class="flex flex-col sm:flex-row gap-3 justify-center">
					<a href="/" class="btn-regular-dark px-6 py-3 rounded-lg text-white font-medium">
						<Icon name="fa6-solid:house" class="mr-2" />
						返回首页
					</a>
					<a href="/archive/" class="btn-regular px-6 py-3 rounded-lg font-medium">
						<Icon name="fa6-solid:box-archive" class="mr-2" />
						文章归档
					</a>
				</div>
			</div>

			<!-- 返回提示 -->
			<div class="mt-8 text-50 text-sm">
				<p class="flex items-center justify-center">
					<Icon name="fa6-solid:clock-rotate-left" class="mr-2" />
					您也可以使用浏览器的后退按钮返回上一页
				</p>
			</div>
		</div>
	</MainGridLayout>
</Layout>