---
import Layout from '../layouts/Layout.astro';
import SiteHeader from '../components/SiteHeader.astro';
import SiteFooter from '../components/SiteFooter.astro';

const base = import.meta.env.BASE_URL;
---

<Layout title="404 — Not Found" noIndex>
  <SiteHeader />

  <main id="main-content" class="pt-14 min-h-[60vh] flex items-center justify-center px-4">
    <div class="text-center">
      <h1 class="text-6xl sm:text-8xl font-bold text-gray-500 mb-4">404</h1>
      <p class="text-2xl font-bold text-ink mb-3">Page not found</p>
      <p class="text-ink-secondary mb-8">The frame you're looking for doesn't exist.</p>
      <a
        href={base}
        class="inline-flex items-center gap-2 bg-accent text-white font-medium px-6 py-3 rounded-full hover:bg-accent-dark transition-colors text-sm"
      >
        ← Back to portfolio
      </a>
    </div>
  </main>

  <SiteFooter />
</Layout>
