"use client";

import Link from "next/link";
import { AlertTriangle, ArrowLeft, RefreshCw } from "lucide-react";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="en">
      <body>
        <div className="min-h-screen bg-neutral-50 flex items-center justify-center px-4">
          <div className="text-center max-w-md">
            <div className="inline-flex items-center justify-center w-20 h-20 bg-red-50 rounded-2xl mb-6">
              <AlertTriangle size={36} className="text-red-500" />
            </div>
            <h1 className="text-6xl font-black text-navy-800 mb-2">500</h1>
            <h2 className="text-xl font-semibold text-navy-700 mb-3">Something went wrong</h2>
            <p className="text-neutral-500 text-sm mb-8">
              An unexpected error occurred. Our team has been notified.
            </p>
            <div className="flex items-center justify-center gap-3">
              <button
                onClick={reset}
                className="inline-flex items-center gap-2 px-6 py-3 bg-navy-800 hover:bg-navy-700 text-white text-sm font-semibold rounded-xl transition-colors"
              >
                <RefreshCw size={16} />
                Try again
              </button>
              <Link
                href="/"
                className="inline-flex items-center gap-2 px-6 py-3 bg-white border border-neutral-200 hover:bg-neutral-50 text-navy-700 text-sm font-semibold rounded-xl transition-colors"
              >
                <ArrowLeft size={16} />
                Go home
              </Link>
            </div>
          </div>
        </div>
      </body>
    </html>
  );
}
