---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
import { getLocalizedPath } from '@/i18n/utils';
import type { Lang } from '@/types/i18n';
import { defaultLang } from '@/i18n/ui';

const lang = (Astro.currentLocale as Lang) || defaultLang;
const isZh = lang === 'zh';
const homePath = getLocalizedPath('/', lang);
---

<Layout
  title={isZh ? '页面未找到' : 'Page Not Found'}
  description={isZh ? '抱歉，您访问的页面不存在。' : 'Sorry, the page you are looking for does not exist.'}
>
  <GlassHeader lang={lang} client:load transition:persist="header" />

  <main id="main-content" class="min-h-screen pt-24 pb-20">
    <Container>
      <div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
        <h1 class="text-9xl font-bold text-primary">404</h1>
        <h2 class="text-2xl font-semibold mt-4">
          {isZh ? '页面未找到' : 'Page Not Found'}
        </h2>
        <p class="text-muted-foreground mt-4 max-w-md">
          {isZh
            ? '抱歉，您访问的页面不存在或已被移除。'
            : 'Sorry, the page you are looking for does not exist or has been moved.'}
        </p>
        <div class="mt-8 flex flex-col sm:flex-row gap-4">
          <a
            href={homePath}
            class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
          >
            {isZh ? '返回首页' : 'Go Home'}
          </a>
          <a
            href={isZh ? '/zh/blog' : '/blog'}
            class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-lg border border-border hover:bg-muted transition-colors"
          >
            {isZh ? '浏览博客' : 'Browse Blog'}
          </a>
        </div>
      </div>
    </Container>
  </main>

  <Footer lang={lang} client:load />
</Layout>
