import Link from "next/link";
import Window from "@/components/window";
import GoBackButton from "@/components/go-back-button";

export default function NotFound() {
  return (
    <div className="mx-auto max-w-md pt-16">
      <Window title="Windows cannot find this page">
        <div className="flex items-start gap-4 mb-6">
          <div className="flex-shrink-0 flex h-10 w-10 items-center justify-center rounded-full bg-red-600 shadow-inner">
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 3L15 15M3 15L15 3"
                stroke="white"
                strokeWidth="2.5"
                strokeLinecap="round"
              />
            </svg>
          </div>
          <div>
            <h2 className="font-bold text-gray-900 text-base mb-1">
              404 — Not Found
            </h2>
            <p className="text-sm text-gray-600 leading-relaxed">
              The page you're looking for doesn't exist. Check the address or
              head back home.
            </p>
          </div>
        </div>

        <div className="border-t border-gray-200/60 pt-4 flex justify-end gap-2">
          <GoBackButton />
          <Link
            href="/"
            className="px-4 py-1.5 text-sm bg-gradient-to-b from-blue-100 to-blue-200 border border-blue-300 rounded hover:from-blue-200 hover:to-blue-300 transition-colors"
          >
            Home
          </Link>
        </div>
      </Window>
    </div>
  );
}