@extends('user.layouts.auth', ['title' => ($status ?? 500) . ' - ' . ($title ?? 'Something went wrong')])

@php
    $status = $status ?? 500;
    $title = $title ?? 'Something went wrong';
    $message = $message ?? 'An unexpected error occurred. Please try again.';
    $icon = $icon ?? 'bi-exclamation-octagon';
    $actionLabel = $actionLabel ?? 'Go to Home';
    $actionUrl = $actionUrl ?? url('/');
@endphp

@push('head')
<style>
    .error-shell {
        min-height: 100vh;
        width: 100%;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(circle at 15% 18%, rgba(99, 232, 185, 0.34), transparent 18%),
            radial-gradient(circle at 84% 20%, rgba(39, 193, 142, 0.32), transparent 22%),
            radial-gradient(circle at 78% 82%, rgba(135, 244, 205, 0.18), transparent 18%),
            linear-gradient(135deg, #085540 0%, #074936 26%, #0a6b51 58%, #054131 100%);
        position: relative;
        overflow: hidden;
    }

    .error-shell::before,
    .error-shell::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
    }

    .error-shell::before {
        width: 370px;
        height: 110px;
        left: -45px;
        bottom: 48px;
        background: linear-gradient(135deg, rgba(189, 255, 231, 0.34), rgba(108, 229, 184, 0.08));
        box-shadow: inset -20px -12px 40px rgba(255, 255, 255, 0.08), inset 16px 14px 24px rgba(255, 255, 255, 0.18);
    }

    .error-shell::after {
        width: 320px;
        height: 110px;
        right: -10px;
        bottom: 40px;
        background: linear-gradient(135deg, rgba(191, 255, 233, 0.36), rgba(108, 215, 176, 0.12));
        box-shadow: inset -16px -12px 34px rgba(255, 255, 255, 0.06), inset 16px 14px 24px rgba(255, 255, 255, 0.16);
    }

    .error-wrap {
        width: min(1120px, 100%);
        min-height: min(700px, calc(100vh - 48px));
        margin: 0 auto;
        position: relative;
        display: grid;
        place-items: center;
        padding: 42px;
        border-radius: 28px;
        background: linear-gradient(180deg, rgba(6, 75, 56, 0.44), rgba(6, 75, 56, 0.28));
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 40px 100px rgba(2, 13, 32, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        overflow: hidden;
    }

    .error-wrap::before {
        content: "";
        position: absolute;
        inset: 22px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.04);
    }

    .error-card {
        position: relative;
        z-index: 2;
        width: min(640px, 100%);
        border-radius: 24px;
        padding: 34px 30px;
        background: linear-gradient(180deg, rgba(108, 228, 184, 0.26), rgba(27, 141, 104, 0.28));
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 22px 60px rgba(2, 13, 32, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(18px);
        color: #f7fbff;
        text-align: center;
    }

    .error-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 12px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        font-size: 1.6rem;
        color: #064a38;
        background: linear-gradient(135deg, #e4fff5, #7ee7be);
        box-shadow: 0 14px 30px rgba(74, 222, 128, 0.28);
    }

    .error-status {
        font-size: clamp(2.2rem, 6vw, 4rem);
        line-height: 1;
        font-weight: 800;
        letter-spacing: -0.03em;
        margin: 6px 0 8px;
    }

    .error-title {
        font-size: clamp(1.1rem, 3vw, 1.6rem);
        font-weight: 700;
        margin-bottom: 10px;
    }

    .error-message {
        color: rgba(233, 244, 255, 0.82);
        font-size: 0.95rem;
        max-width: 520px;
        margin: 0 auto;
    }

    .error-actions {
        margin-top: 24px;
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .error-btn,
    .error-btn-outline {
        min-height: 44px;
        border-radius: 10px;
        padding: 0.55rem 1.2rem;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }

    .error-btn {
        background: linear-gradient(180deg, #0b6e52, #08563f);
        color: #fff;
        box-shadow: 0 14px 28px rgba(2, 13, 32, 0.25);
    }

    .error-btn:hover {
        background: linear-gradient(180deg, #0d7f5d, #0a6549);
        color: #fff;
    }

    .error-btn-outline {
        border-color: rgba(255, 255, 255, 0.32);
        color: #ecfffb;
        background: rgba(255, 255, 255, 0.06);
    }

    .error-btn-outline:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
    }

    .error-note {
        margin-top: 16px;
        color: rgba(233, 244, 255, 0.7);
        font-size: 0.82rem;
    }

    @media (max-width: 767.98px) {
        .error-shell {
            padding: 14px;
        }

        .error-wrap {
            min-height: calc(100vh - 28px);
            padding: 16px;
            border-radius: 22px;
        }

        .error-card {
            padding: 28px 18px;
        }
    }
</style>
@endpush

@section('content')
<div class="error-shell">
    <div class="error-wrap">
        <div class="error-card">
            <div class="error-icon">
                <i class="bi {{ $icon }}"></i>
            </div>

            <div class="error-status">{{ $status }}</div>
            <h1 class="error-title">{{ $title }}</h1>
            <p class="error-message">{{ $message }}</p>

           {{-- <div class="error-actions">
                <a href="{{ $actionUrl }}" class="error-btn">
                    <i class="bi bi-house-door"></i>
                    <span>{{ $actionLabel }}</span>
                </a>

                <a href="javascript:history.back()" class="error-btn-outline">
                    <i class="bi bi-arrow-left"></i>
                    <span>Go Back</span>
                </a>
            </div>--}}

            <div class="error-note">
                If the issue continues, please contact support.
            </div>
        </div>
    </div>
</div>
@endsection