"use client";

// This replaces the entire root layout when an error escapes it, so per
// Next.js's own requirements it must be self-contained: its own <html>/
// <body>, no imports that pull in context providers (fonts, session/theme
// state, etc. from layout.tsx) or hooks that depend on them - Next.js 16 has
// a build-time bug where the auto-generated fallback version of this page
// crashes during prerendering if that boundary is crossed.
export default function GlobalError({
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="en">
      <body style={{ fontFamily: "system-ui, sans-serif", padding: "3rem 1.5rem", textAlign: "center" }}>
        <h1 style={{ fontSize: "1.5rem", fontWeight: 600 }}>Something went wrong</h1>
        <p style={{ marginTop: "0.5rem", color: "#525252" }}>
          An unexpected error occurred. Please try again.
        </p>
        <button
          onClick={() => reset()}
          style={{
            marginTop: "1.5rem",
            padding: "0.5rem 1rem",
            border: "1px solid #d4d4d4",
            borderRadius: "0.375rem",
            background: "white",
            cursor: "pointer",
          }}
        >
          Try again
        </button>
      </body>
    </html>
  );
}