---
import Link from '@/components/Link.astro'
import PageHead from '@/components/PageHead.astro'
import { buttonVariants } from '@/lib/button-variants'
import Layout from '@/layouts/Layout.astro'
import { cn } from '@/lib/utils'

const currentUrl = Astro.url;
---

<Layout canonicalUrl={currentUrl}>
  <PageHead 
    slot="head" 
    title="404 - Page Not Found" 
    description="The page you're looking for couldn't be found. Return to the homepage to explore Patrick Jaroszewski's latest tech articles, projects, and programming insights."
  />
  
  <!-- Add 404 structured data -->
  <script type="application/ld+json" is:inline set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "404 - Page Not Found",
    "description": "The requested page could not be found on this website.",
    "url": currentUrl.toString(),
    "mainEntity": {
      "@type": "Thing",
      "name": "404 Error",
      "description": "Page not found error"
    }
  })} />

  <section
    class="flex w-full flex-col items-center justify-center gap-y-4 text-center"
  >
    <div class="max-w-md">
      <h1 class="mb-4 text-3xl font-medium">404: Page Not Found</h1>
      <p class="prose mb-4">Oops! The page you're looking for doesn't exist. It might have been moved, deleted, or you entered the wrong URL.</p>
      <p class="prose text-sm text-muted-foreground">Looking for something specific? Try searching our blog or browse our latest articles.</p>
    </div>
    <div class="flex flex-col sm:flex-row gap-3">
      <Link
        href="/"
        class={cn(buttonVariants({ variant: 'default' }), 'flex gap-x-1.5 group')}
      >
        <span class="transition-transform group-hover:-translate-x-1">&larr;</span>
        Go to Home
      </Link>
      <Link
        href="/blog"
        class={cn(buttonVariants({ variant: 'outline' }), 'flex gap-x-1.5')}
      >
        Browse Blog
      </Link>
    </div>
  </section>
</Layout>
