import Link from "next/link";
import Footer from "@/components/Footer";
import Fox from "@/components/Fox";
import Header from "@/components/Header";

export default function NotFound() {
  return (
    <div className="grain flex min-h-dvh flex-col">
      <Header />
      <main className="flex-1">
        <div className="flex min-h-[80vh] flex-col items-center justify-center px-5 text-center">
          <Fox className="h-16 w-16 text-white/20" />
          <p className="mt-8 font-mono text-xs tracking-[0.3em] text-accent uppercase">
            Error 404 · Frame missing
          </p>
          <h1 className="mt-4 font-display text-5xl font-thin uppercase md:text-7xl">
            Shot not found
          </h1>
          <Link
            href="/"
            className="mt-10 border border-white/25 px-6 py-3.5 font-mono text-xs tracking-[0.2em] uppercase hover:border-fg"
          >
            Back to home
          </Link>
        </div>
      </main>
      <Footer />
    </div>
  );
}