<?php 
// 404页面
?>
<?php get_header();?>

<!-- 404 主体内容区 -->
<main class="min-h-[75vh] flex items-center justify-center bg-background px-4 py-20 sm:px-6 lg:px-8 relative overflow-hidden">
    <!-- 背景装饰光辉粒子 -->
    <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary-light/50 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-accent-light/50 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-2xl w-full text-center relative py-20 z-10" >
        <!-- 404 动画数字 & 状态图标 -->
        <div class="relative inline-block mb-6">
            <h1 class="text-8xl sm:text-9xl font-black tracking-tight text-slate-heading font-['Space_Grotesk'] select-none">
                4<span class="text-primary inline-block animate-pulse">0</span>4
            </h1>
            <!-- 悬浮光环 decoration -->
        </div>

        <!-- 提示文案 -->
        <h2 class="text-2xl sm:text-3xl font-bold text-slate-heading mb-4">
            抱歉，您访问的页面已移出或不存在
        </h2>
        <p class="text-base sm:text-lg text-slate-text/80 mb-8 max-w-md mx-auto leading-relaxed">
            您可以尝试搜索或返回首页。
        </p>

        <!-- 页面内快速搜索框 -->
        <div class="max-w-md mx-auto mb-10">
            <form role="search" method="get" action="<?php echo esc_url(home_url('/category/news-center/')); ?>" class="relative flex items-center shadow-soft rounded-2xl overflow-hidden bg-surface border border-slate-200/80 focus-within:border-primary transition-all duration-300">
                <span class="pl-4 text-slate-400 flex items-center">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <circle cx="11" cy="11" r="8" stroke-width="2"></circle>
                        <path d="m21 21-4.35-4.35" stroke-width="2" stroke-linecap="round"></path>
                    </svg>
                </span>
                <input type="hidden" name="category" value="" />
                <input type="hidden" name="post_type" value="post" />
                <input type="search" name="search_keyword" placeholder="试试搜索您需要的关键词..." class="w-full py-3.5 px-3 text-slate-text border-none focus:ring-0 focus:outline-none p-0 bg-transparent placeholder-slate-400 focus:outline-none text-sm sm:text-base" autocomplete="off" />
                <button type="submit" class="mr-1.5 px-5 py-2 bg-primary hover:bg-primary-dark text-white font-medium rounded-xl text-sm transition-colors duration-200 flex-shrink-0">
                    搜索
                </button>
            </form>
        </div>

        <!-- 操作按钮组 -->
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="w-full sm:w-auto inline-flex items-center justify-center px-7 py-3.5 bg-primary hover:bg-primary-dark text-white hover:text-white font-semibold rounded-xl shadow-float hover:shadow-xl hover:shadow-primary/30 transform hover:-translate-y-0.5 transition-all duration-300">
                <svg class="w-5 h-5 mr-2 stroke-current text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
                <span class="text-white hover:text-white">返回网站首页</span>
            </a>
            
            <button onclick="window.history.back();" class="w-full sm:w-auto inline-flex items-center justify-center px-7 py-3.5 bg-surface hover:bg-slate-50 text-slate-text hover:text-primary font-semibold rounded-xl border border-slate-200 hover:border-slate-300 transition-all duration-200 cursor-pointer">
                <svg class="w-5 h-5 mr-2 stroke-current" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
                返回上一页
            </button>
        </div>
    </div>
</main>
<?php get_footer();?>