'use client';

import React, { useEffect } from 'react';
import Link from 'next/link';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error('App runtime error boundary caught:', error);
  }, [error]);

  return (
    <section className="error-hero-fullscreen">
      <div className="error-hero-container">
        {/* Floating Pill Badge */}
        <span className="error-badge-pill">System Notice • Temporary Issue</span>

        {/* Big Colorful Gradient Number */}
        <div className="error-number-wrap">
          <span className="error-number-gradient">Oops!</span>
        </div>

        {/* Serif Headline */}
        <h1 className="error-title">
          Something Went Off-Routine
        </h1>

        {/* Supportive Description */}
        <p className="error-description">
          An unexpected bump occurred while loading this page. Don’t worry, your cart items and settings are completely safe. Please try refreshing or return to the homepage.
        </p>

        {/* Actions Row */}
        <div className="error-actions">
          <button
            type="button"
            onClick={() => reset()}
            className="btn btn-pri"
          >
            Try Again
          </button>
          <Link href="/" className="error-btn-secondary">
            Back to Home
          </Link>
        </div>
      </div>
    </section>
  );
}