import Image from "next/image";
import Link from "next/link";

export default function NotFound() {
  return (
    <main className="flex flex-1 items-center justify-center bg-[var(--background)] px-4 py-16 md:px-6 md:py-24">
      <div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-8 md:flex-row md:gap-12">
        <div className="flex w-full flex-col items-center text-center md:w-1/2 md:items-start md:text-left">
          <h2 className="text-2xl font-black tracking-tight md:text-3xl flex flex-wrap gap-x-3 gap-y-0 items-baseline">
            <span className="font-extralight">Page</span>
            <span>not found</span>
          </h2>

          <p className="mt-4 max-w-md text-base leading-relaxed md:text-lg">
            Sorry, we couldn&apos;t find the page you&apos;re looking for. It
            may have been moved, renamed, or no longer exists.
          </p>

          <Link
            href="/"
            className="mt-8 inline-flex items-center rounded-full bg-primary px-8 py-3 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 md:w-auto"
          >
            Back to Home
          </Link>
        </div>

        <div className="order-first flex w-full max-w-xs flex-col items-center gap-2 md:order-last md:w-1/2 md:max-w-none">
          <Image
            src="/illustrations/404_not_found.svg"
            alt="Page not found illustration"
            width={500}
            height={500}
            priority
            className="h-auto w-full"
          />
          <a
            href="https://storyset.com/online"
            target="_blank"
            rel="noopener noreferrer"
            className="text-xs text-[var(--muted)] hover:underline"
          >
            Online illustrations by Storyset
          </a>
        </div>
      </div>
    </main>
  );
}
