import { SmoothLink } from "@/components/providers/NavigationProvider";
import { Button } from "@/components/ui/button";

export const metadata = {
  title: "404 — Page Not Found",
  description:
    "This page doesn't exist. Neither does your free trial of productivity.",
};

export default function NotFoundPage() {
  return (
    <div className="min-h-screen bg-[#E1F5EE] flex items-center justify-center px-4">
      <div className="text-center max-w-lg">
        <div className="text-[120px] font-serif font-bold text-[#1D9E75] leading-none">
          404
        </div>
        <h1 className="text-2xl font-serif font-bold text-gray-900 mt-4">
          Page not found.
        </h1>
        <p className="text-gray-500 mt-3 leading-relaxed">
          We looked everywhere. Under the couch cushions, behind the server
          rack, even inside that one invoice from 2023. Nothing. This page
          simply doesn't exist — much like most corporate synergy meetings.
        </p>
        <p className="text-gray-400 text-sm mt-4">
          The URL you're looking for might be broken, mistyped, or it was a
          victim of our last "restructuring."
        </p>
        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-8">
          <SmoothLink href="/home">
            <Button className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
              Take me home
            </Button>
          </SmoothLink>
        </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>
    </div>
  );
}