---
import { Icon } from "astro-icon/components";

import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import GridLayout from "@layouts/grid.astro";
---

<GridLayout title={i18n(I18nKey.notFound)} description={i18n(I18nKey.notFoundDescription)}>
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-96">
        <div class="card-base z-10 px-9 py-12 relative w-full flex flex-col items-center justify-center text-center">
            <!-- 404 大号数字 -->
            <div class="text-8xl md:text-9xl font-bold text-(--primary) opacity-20 mb-4">
                {i18n(I18nKey.notFound)}
            </div>

            <!-- 404 图标 -->
            <div class="mb-6">
                <Icon name="material-symbols:error-outline" class="text-6xl text-(--primary)" />
            </div>

            <!-- 标题 -->
            <h1 class="text-3xl md:text-4xl font-bold mb-4 text-90">
                {i18n(I18nKey.notFoundTitle)}
            </h1>

            <!-- 描述 -->
            <p class="text-lg text-75 mb-8 max-w-md">
                {i18n(I18nKey.notFoundDescription)}
            </p>

            <!-- 返回首页按钮 -->
            <a
                href="/"
                class="inline-flex items-center gap-2 px-6 py-3 bg-(--primary) text-white rounded-(--radius-large) hover:bg-(--primary-dark) transition-colors duration-300 font-medium"
            >
                <Icon name="material-symbols:home" class="text-xl" />
                {i18n(I18nKey.backToHome)}
            </a>

            <!-- 装饰性元素 -->
            <div class="absolute top-4 left-4 opacity-10">
                <Icon name="material-symbols:sentiment-sad" class="text-4xl text-(--primary)" />
            </div>
            <div class="absolute bottom-4 right-4 opacity-10">
                <Icon name="material-symbols:search-off" class="text-4xl text-(--primary)" />
            </div>
        </div>
    </div>
</GridLayout>

<style>
    /* 添加一些动画效果 */
    .card-base {
        animation: fadeInUp 0.6s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            translate: 0 30px;
        }
        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* 按钮悬停效果 */
    a:hover {
        translate: 0 -2px;
        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    }
</style>