---
import ImageCarousel from "../components/ImageCarousel.astro";
import MainLayout from "../layouts/MainLayout.astro";

import { convertEagerImagesImportGlobToArray } from "@/lib/utils";

const heroImages = import.meta.glob<{ default: ImageMetadata; eager: true }>(
  "../assets/img/hero/*"
);

const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
---

<MainLayout title="Oops! 404" navbarDisplay="transparent">
  <div class="absolute inset-0 h-full w-full bg-black">
    <ImageCarousel
      images={heroImagesArray}
      class="h-full w-full"
      foreground={true}
      foreground={true}
      foregroundOpacity="opacity-80"
    />
  </div>
  <div
    class="absolute inset-0 flex h-full w-full flex-col justify-center px-8 py-36 text-center"
  >
    <h1
      class="font-header pb-8 text-5xl font-medium text-white uppercase text-shadow-lg/75 md:text-7xl lg:text-9xl"
    >
      Oops!
    </h1>
    <h2
      class="font-header text-2xl font-medium text-gray-300 uppercase text-shadow-lg/75 md:text-2xl lg:text-4xl"
    >
      404 - Page not found
    </h2>

    <a
      href="/"
      class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
    >
      Home
    </a>
  </div>
</MainLayout>
