"use client";

import { useEffect } from "react";

/* Last-resort crash shell: replaces the entire tree, so it must bring
   its own <html><body> and zero app dependencies. Never leaks internals. */
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[global-error]", error.digest ?? error.message);
  }, [error]);

  return (
    <html lang="en-IN">
      <body
        style={{
          margin: 0,
          fontFamily: "Arial, Helvetica, sans-serif",
          background: "#0b1b33",
          color: "#fff",
        }}
      >
        <div
          style={{
            maxWidth: 640,
            margin: "0 auto",
            padding: "96px 24px",
            textAlign: "center",
          }}
        >
          <p
            style={{
              fontFamily: "monospace",
              fontSize: 11,
              letterSpacing: "0.18em",
              color: "#cbd5e1",
            }}
          >
            SOMETHING WENT WRONG
          </p>
          <h1 style={{ fontSize: 36, margin: "14px 0 0" }}>
            We couldn&apos;t load this page.
          </h1>
          <p style={{ color: "#cbd5e1", lineHeight: 1.6 }}>
            Please try again — or reach us directly and we&apos;ll help.
          </p>
          <div
            style={{
              display: "flex",
              gap: 12,
              justifyContent: "center",
              marginTop: 28,
              flexWrap: "wrap",
            }}
          >
            <button
              type="button"
              onClick={() => reset()}
              style={{
                minHeight: 48,
                padding: "0 24px",
                borderRadius: 8,
                border: 0,
                background: "#1d4ed8",
                color: "#fff",
                fontSize: 15,
                fontWeight: 600,
                cursor: "pointer",
              }}
            >
              Try again
            </button>
            {/* Plain <a>: next/link router may be dead when this shell renders. */}
            {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
            <a
              href="/"
              style={{
                display: "inline-flex",
                alignItems: "center",
                minHeight: 48,
                padding: "0 24px",
                borderRadius: 8,
                border: "1px solid rgba(255,255,255,0.35)",
                color: "#fff",
                fontSize: 15,
                fontWeight: 600,
                textDecoration: "none",
              }}
            >
              Go home
            </a>
          </div>
          <p style={{ marginTop: 28, fontSize: 13, color: "#cbd5e1" }}>
            Sales: <a href="tel:+919818993537" style={{ color: "#fff" }}>+91-9818993537</a>
            {" · "}Support: <a href="tel:+919899745220" style={{ color: "#fff" }}>+91-9899745220</a>
          </p>
          {error.digest && (
            <p style={{ marginTop: 8, fontFamily: "monospace", fontSize: 11, color: "rgba(255,255,255,0.4)" }}>
              Ref: {error.digest}
            </p>
          )}
        </div>
      </body>
    </html>
  );
}
