"use client";

export default function GlobalError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <html lang="vi">
      <body style={{ margin: 0, background: "#f4f0e8", color: "#24211f", fontFamily: "Arial, sans-serif" }}>
        <main style={{ minHeight: "100vh", display: "grid", alignContent: "center", justifyItems: "start", gap: 18, padding: "clamp(24px, 8vw, 96px)" }}>
          <a href="/" style={{ color: "inherit", fontSize: 13, fontWeight: 700, letterSpacing: ".12em", textDecoration: "none" }}>JUNX <span style={{ color: "#a44335" }}>DESIGN</span></a>
          <p style={{ margin: "24px 0 0", fontSize: 10, fontWeight: 700, letterSpacing: ".16em" }}>ĐÃ CÓ LỖI · ỨNG DỤNG</p>
          <h1 style={{ maxWidth: 720, margin: 0, fontFamily: "Georgia, serif", fontSize: "clamp(42px, 8vw, 84px)", fontWeight: 400, lineHeight: 1.02, letterSpacing: "-.035em" }}>Không thể tải nội dung.</h1>
          <p style={{ maxWidth: 460, margin: 0, fontSize: 14, lineHeight: 1.7 }}>Ứng dụng gặp lỗi nghiêm trọng khi khởi tạo. Hãy tải lại trang hoặc quay về trang chủ.</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 10 }}>
            <button onClick={reset} style={{ minHeight: 44, padding: "0 18px", border: 0, background: "#24211f", color: "#f4f0e8", fontSize: 10, fontWeight: 700, letterSpacing: ".08em", cursor: "pointer" }}>TẢI LẠI ↗</button>
            <a href="/" style={{ display: "inline-flex", alignItems: "center", minHeight: 44, color: "inherit", fontSize: 10, fontWeight: 700, letterSpacing: ".08em" }}>VỀ TRANG CHỦ</a>
          </div>
        </main>
      </body>
    </html>
  );
}
