---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Container from '@/components/Container.astro'
import Link from '@/components/Link.astro'
import { buttonVariants } from '@/components/ui/button'
import { SITE } from '@/consts'
import Layout from '@/layouts/Layout.astro'
import { cn } from '@/lib/utils'
---

<Layout title="404" description={SITE.DESCRIPTION}>
  <Container class="flex grow flex-col gap-y-6">
    <Breadcrumbs items={[{ label: '???', icon: 'lucide:circle-help' }]} />

    <section
      class="flex flex-col items-center justify-center gap-y-4 text-center"
    >
      <div class="max-w-md">
        <h1 class="mb-4 text-3xl font-bold">404: Page not found</h1>
        <p class="prose prose-neutral dark:prose-invert">
          Oops! The page you're looking for doesn't exist.
        </p>
      </div>
      <Link
        href="/"
        class={cn(
          buttonVariants({ variant: 'outline' }),
          'flex gap-x-1.5 group',
        )}
      >
        <span class="transition-transform group-hover:-translate-x-1"
          >&larr;</span
        > Go to home page
      </Link>
    </section>
  </Container>
</Layout>