---
import Layout from '@layouts/Layout.astro'
import Container from '@components/Container.astro'
import Link from '@components/Link.astro'
import { SITE } from '@consts'
import { buttonVariants } from '@/components/ui/button'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { HomeIcon } from 'lucide-react'
---

<Layout title="404" description={SITE.DESCRIPTION}>
  <Container>
    <Breadcrumb className="mb-6">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/"
            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
          >
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>???</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>

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