"use client"

import { useEffect } from "react"

// Erreur critique dans le root layout, doit rendre son propre <html><body>
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <html lang="fr">
      <body
        style={{
          margin: 0,
          backgroundColor: "#fff",
          fontFamily: "system-ui, -apple-system, sans-serif",
        }}
      >
        <div
          style={{
            minHeight: "100vh",
            display: "flex",
            alignItems: "center",
          }}
        >
          <div
            style={{
              position: "relative",
              maxWidth: "672px",
              margin: "0 auto",
              padding: "6rem 1.5rem",
              width: "100%",
              overflow: "hidden",
            }}
          >
            {/* Watermark */}
            <span
              aria-hidden
              style={{
                position: "absolute",
                top: "-1rem",
                left: "-1rem",
                fontSize: "clamp(140px, 20vw, 220px)",
                fontWeight: 900,
                lineHeight: 1,
                color: "#f3f4f6",
                pointerEvents: "none",
                userSelect: "none",
              }}
            >
              500
            </span>

            {/* Contenu */}
            <div style={{ position: "relative" }}>
              <div style={{ height: "2px", width: "2rem", backgroundColor: "#d40924", marginBottom: "1.5rem" }} />

              <p
                style={{
                  fontSize: "9px",
                  fontWeight: 600,
                  textTransform: "uppercase",
                  letterSpacing: "0.15em",
                  color: "rgba(212,9,36,0.6)",
                  marginBottom: "0.75rem",
                }}
              >
                Erreur critique
              </p>

              <h1
                style={{
                  fontSize: "clamp(1.75rem, 4vw, 2.5rem)",
                  fontWeight: 700,
                  color: "#111827",
                  lineHeight: 1.25,
                  marginBottom: "1rem",
                }}
              >
                Une erreur critique est survenue
              </h1>

              <p
                style={{
                  color: "#6b7280",
                  fontSize: "0.875rem",
                  lineHeight: 1.7,
                  marginBottom: "2.5rem",
                  maxWidth: "28rem",
                }}
              >
                Une erreur inattendue s'est produite lors du chargement de
                l'application. Veuillez réessayer ou retourner à l'accueil.
              </p>

              <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
                <button
                  onClick={reset}
                  style={{
                    display: "inline-flex",
                    alignItems: "center",
                    gap: "0.5rem",
                    padding: "0.625rem 1.25rem",
                    backgroundColor: "#d40924",
                    color: "#fff",
                    fontSize: "11px",
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.1em",
                    border: "none",
                    cursor: "pointer",
                  }}
                >
                  Réessayer
                </button>
                <a
                  href="/fr"
                  style={{
                    display: "inline-flex",
                    alignItems: "center",
                    gap: "0.5rem",
                    padding: "0.625rem 1.25rem",
                    border: "1px solid #e5e7eb",
                    color: "#374151",
                    fontSize: "11px",
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.1em",
                    textDecoration: "none",
                  }}
                >
                  Accueil
                </a>
                <a
                  href="/fr/plan-du-site"
                  style={{
                    display: "inline-flex",
                    alignItems: "center",
                    gap: "0.5rem",
                    padding: "0.625rem 1.25rem",
                    border: "1px solid #e5e7eb",
                    color: "#374151",
                    fontSize: "11px",
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.1em",
                    textDecoration: "none",
                  }}
                >
                  Plan du site
                </a>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
  )
}
