"use client";

import { useEffect } from "react";

export default function ErrorBoundary({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    console.error("JUNX route error:", error);
  }, [error]);

  return (
    <main style={{ minHeight: "100vh", display: "grid", alignContent: "center", justifyItems: "start", gap: 18, padding: "clamp(24px, 8vw, 96px)", background: "var(--color-paper, #f4f0e8)", color: "var(--color-ink, #24211f)" }}>
      <a href="/" style={{ color: "inherit", fontSize: 13, fontWeight: 700, letterSpacing: ".12em", textDecoration: "none" }}>JUNX <span style={{ color: "var(--color-accent, #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: "var(--font-display, 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 }}>Đã xảy ra lỗi khi hiển thị trang. Hãy thử tải lại nội dung.</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 10 }}>
        <button onClick={reset} style={{ minHeight: 44, padding: "0 18px", border: 0, background: "var(--color-ink, #24211f)", color: "var(--color-paper, #f4f0e8)", fontSize: 10, fontWeight: 700, letterSpacing: ".08em", cursor: "pointer" }}>THỬ 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>
  );
}