---
import Footer from "@/components/Footer.astro";
import Navbar from "@/components/Navbar.astro";
import Base from "@/layouts/Base.astro";
---

<Base
  title="Page Not Found | SnapOtter"
  description="The page you are looking for does not exist."
  noindex={true}
>
  <Navbar />

  <main id="main" class="flex min-h-[60vh] flex-col items-center justify-center px-6 pt-32 pb-20 text-center">
    <div class="reveal">
      <p class="text-6xl font-bold text-primary">404</p>
      <h1 class="mt-4 font-display text-3xl font-bold tracking-tight md:text-4xl">
        Page not found
      </h1>
      <p class="mt-4 text-lg text-muted">
        The page you are looking for does not exist or has been moved.
      </p>
      <a
        href="/"
        class="btn-primary mt-8 inline-flex items-center gap-2 rounded-lg px-6 py-3 text-sm font-semibold"
      >
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="m12 19-7-7 7-7" />
          <path d="M19 12H5" />
        </svg>
        Back to homepage
      </a>
    </div>
  </main>

  <Footer />
</Base>