import type {Metadata} from "next";
import Image from "next/image";
import Link from "next/link";

export const metadata: Metadata = {
  title: "404NF Page : Alegria De La Vida",
};

export default async function NotFound() {

  return (
    <main className="min-h-screen w-screen">
      <div className="grid grid-cols-1 lg:grid-cols-2 lg:h-auto h-screen">
        <div className="bg-main h-full lg:h-screen w-full flex justify-center items-center">
          <Image
          src='/alegria.png'
          alt="Alegria Logo"
          width={443}
          height={708}
          className="w-28 md:w-60"
          />
        </div>
        <div className="flex flex-col justify-center items-center h-full lg:h-screen w-full gap-4 px-5 lg:px-0 text-center">
          <h1 className="text-main text-4xl">Something went wrong!</h1>
          <p className=" text-main text-lg">
            It looks like the page you looking for is no-show or already
            checked-out.
          </p>
          <Link href="/">
            <div className="bg-main text-white text-sm p-5 rounded w-fit font-bold">
              Take Me Home
            </div>
          </Link>
        </div>
      </div>
    </main>
  );
}