'use client';

export default function GlobalError({
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="en">
      <body
        style={{
          margin: 0,
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: '#0a1d2a',
          color: '#f8fafc',
          fontFamily:
            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
        }}
      >
        <main style={{ textAlign: 'center', padding: '2rem', maxWidth: '28rem' }}>
          <p style={{ color: '#FBCD08', fontSize: '0.75rem', letterSpacing: '0.16em', textTransform: 'uppercase', margin: 0 }}>
            SSEOA
          </p>
          <h1 style={{ fontSize: '1.5rem', margin: '1rem 0 0.75rem' }}>
            Something went wrong
          </h1>
          <p style={{ color: '#94a3b8', lineHeight: 1.6, margin: '0 0 1.5rem' }}>
            The page could not be loaded. Please try again.
          </p>
          <button
            type="button"
            onClick={() => reset()}
            style={{
              background: '#FBCD08',
              color: '#0a1d2a',
              border: 0,
              borderRadius: '999px',
              padding: '0.75rem 1.5rem',
              fontWeight: 700,
              cursor: 'pointer',
            }}
          >
            Try again
          </button>
        </main>
      </body>
    </html>
  );
}
