"use client";

export default function GlobalError({
  error: _error,
  reset: _reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html lang="en">
      <head>
        <style>{`
          :root {
            --text-primary: #000;
            --text-muted: #999;
            --text-tertiary: #888;
            --bg-primary: #fefefe;
          }
          @media (prefers-color-scheme: dark) {
            :root {
              --text-primary: rgba(255, 255, 255, 0.92);
              --text-muted: rgba(255, 255, 255, 0.45);
              --text-tertiary: rgba(255, 255, 255, 0.55);
              --bg-primary: #1b1a19;
            }
          }
          * { box-sizing: border-box; margin: 0; padding: 0; }
          html, body {
            height: 100%;
          }
          body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
            -webkit-font-smoothing: antialiased;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .container {
            text-align: center;
            padding: 2rem;
          }
          h1 {
            font-family: "SF Mono", Monaco, Inconsolata, "Fira Code", monospace;
            font-size: 1.25rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            text-transform: lowercase;
            letter-spacing: -0.02em;
          }
          p {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 1.5rem;
            text-transform: lowercase;
          }
          button {
            font-family: inherit;
            font-size: 0.8125rem;
            font-weight: 500;
            padding: 0.5rem 1rem;
            background: transparent;
            color: var(--text-primary);
            border: 1.5px solid var(--text-tertiary);
            border-radius: 6px;
            cursor: pointer;
            text-transform: lowercase;
            transition: border-color 0.2s ease;
          }
          button:hover {
            border-color: var(--text-primary);
          }
        `}</style>
      </head>
      <body>
        <div className="container">
          <h1>lost the trail</h1>
          <p>no worries. reload to get back on track</p>
          <button onClick={() => window.location.reload()}>reload</button>
        </div>
      </body>
    </html>
  );
}
