"use client";

import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";

export default function NotFoundPage() {
  const router = useRouter();

  return (
    <div className="flex flex-col items-center justify-center py-24 text-center px-4">
      <div className="text-8xl font-serif font-bold text-[#1D9E75] leading-none">
        404
      </div>
      <h1 className="text-2xl font-serif font-bold text-gray-900 mt-4">
        This page does not exist.
      </h1>
      <p className="text-gray-500 mt-3 max-w-md leading-relaxed">
        Congrats! You've found the digital equivalent of an empty room. The page
        you're looking for was never built, was deleted, or is hiding from you
        out of self-preservation.
      </p>
      <p className="text-gray-400 text-sm mt-2">
        We promise it's not personal. Probably.
      </p>
      <div className="flex flex-col sm:flex-row items-center gap-3 mt-8">
        <Button onClick={() => router.push("/home")} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white cursor-pointer">
          Take me home
        </Button>
        <Button variant="outline" onClick={() => router.back()} className="cursor-pointer">
          Go back (to whatever you were doing before this)
        </Button>
      </div>
      <p className="text-gray-300 text-xs mt-8">
        (Yes, home still exists. We checked. Unlike this page, which never
        existed in the first place.)
      </p>
    </div>
  );
}