<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $errorTitle ?? 'Error' }} — {{ config('app.name') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800&display=swap" rel="stylesheet">

    <!-- FontAwesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
          crossorigin="anonymous" referrerpolicy="no-referrer">

    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --color-bg:        #0f172a;
            --color-surface:   #1e293b;
            --color-border:    #334155;
            --color-text:      #f1f5f9;
            --color-muted:     #94a3b8;
            --color-accent:    #1a4731;
            --color-accent-lt: #22c55e;
            --color-card-bg:   #1e293b;
        }

        html, body {
            height: 100%;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--color-bg);
            color: var(--color-text);
            -webkit-font-smoothing: antialiased;
        }

        /* ── Animated background ── */
        .bg-grid {
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 0;
        }

        .bg-glow {
            position: fixed;
            border-radius: 50%;
            filter: blur(120px);
            pointer-events: none;
            z-index: 0;
            animation: pulse-glow 8s ease-in-out infinite alternate;
        }

        .bg-glow-1 {
            width: 600px; height: 600px;
            top: -200px; left: -200px;
            background: radial-gradient(circle, rgba(26,71,49,.35) 0%, transparent 70%);
        }

        .bg-glow-2 {
            width: 500px; height: 500px;
            bottom: -150px; right: -150px;
            background: radial-gradient(circle, rgba(220,38,38,.2) 0%, transparent 70%);
            animation-delay: 4s;
        }

        @keyframes pulse-glow {
            0%   { opacity: .6; transform: scale(1); }
            100% { opacity: 1;  transform: scale(1.1); }
        }

        /* ── Layout ── */
        .page-wrapper {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
        }

        /* ── Hero header (org name) ── */
        .org-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .org-logo-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px; height: 64px;
            border-radius: 16px;
            background: linear-gradient(135deg, #1a4731 0%, #166534 100%);
            box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 32px rgba(26,71,49,.5);
            margin-bottom: 1rem;
        }

        .org-logo-wrap img {
            width: 44px; height: 44px;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

        .org-logo-initials {
            font-size: 1.5rem;
            font-weight: 800;
            color: #fff;
            letter-spacing: -.02em;
        }

        .org-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-muted);
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        /* ── Error card ── */
        .error-card {
            width: 100%;
            max-width: 560px;
            background: var(--color-card-bg);
            border: 1px solid var(--color-border);
            border-radius: 24px;
            overflow: hidden;
            box-shadow:
                0 0 0 1px rgba(255,255,255,.04),
                0 24px 64px rgba(0,0,0,.5);
        }

        /* ── Card top stripe ── */
        .card-stripe {
            height: 4px;
            width: 100%;
        }

        /* ── Card body ── */
        .card-body {
            padding: 2.5rem 2rem;
            text-align: center;
        }

        /* ── Error code badge ── */
        .error-code-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .35rem 1rem;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
        }

        /* ── Big code number ── */
        .error-code-number {
            font-size: clamp(4rem, 15vw, 7rem);
            font-weight: 800;
            line-height: 1;
            letter-spacing: -.04em;
            margin-bottom: .5rem;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* ── Icon ── */
        .error-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            display: block;
        }

        /* ── Title ── */
        .error-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-text);
            margin-bottom: .75rem;
            line-height: 1.3;
        }

        /* ── Description ── */
        .error-description {
            font-size: .9375rem;
            color: var(--color-muted);
            line-height: 1.7;
            margin-bottom: 2rem;
        }

        /* ── Divider ── */
        .card-divider {
            height: 1px;
            background: var(--color-border);
            margin: 0 -2rem 2rem;
        }

        /* ── Action buttons ── */
        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
            justify-content: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .65rem 1.4rem;
            border-radius: 10px;
            font-size: .875rem;
            font-weight: 600;
            text-decoration: none;
            transition: all .2s ease;
            cursor: pointer;
            border: none;
            outline: none;
        }

        .btn:focus-visible {
            outline: 2px solid var(--color-accent-lt);
            outline-offset: 2px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #1a4731 0%, #166534 100%);
            color: #fff;
            box-shadow: 0 4px 16px rgba(26,71,49,.4);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #166534 0%, #14532d 100%);
            box-shadow: 0 6px 20px rgba(26,71,49,.5);
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: rgba(255,255,255,.06);
            color: var(--color-muted);
            border: 1px solid var(--color-border);
        }

        .btn-secondary:hover {
            background: rgba(255,255,255,.1);
            color: var(--color-text);
            transform: translateY(-1px);
        }

        /* ── Footer note ── */
        .card-footer {
            padding: 1rem 2rem 1.5rem;
            text-align: center;
            border-top: 1px solid var(--color-border);
            background: rgba(0,0,0,.15);
        }

        .footer-note {
            font-size: .8125rem;
            color: #475569;
        }

        .footer-note a {
            color: var(--color-accent-lt);
            text-decoration: none;
        }

        .footer-note a:hover { text-decoration: underline; }

        /* ── Colour themes per error category ── */

        /* 2xx — Success/Info (shouldn't normally show, but just in case) */
        .theme-2xx .card-stripe { background: linear-gradient(90deg, #059669, #10b981); }
        .theme-2xx .error-code-number { background-image: linear-gradient(135deg, #059669, #34d399); }
        .theme-2xx .error-code-badge { background: rgba(5,150,105,.15); color: #34d399; border: 1px solid rgba(52,211,153,.2); }
        .theme-2xx .error-icon { color: #34d399; }

        /* 3xx — Redirects */
        .theme-3xx .card-stripe { background: linear-gradient(90deg, #0284c7, #38bdf8); }
        .theme-3xx .error-code-number { background-image: linear-gradient(135deg, #0284c7, #7dd3fc); }
        .theme-3xx .error-code-badge { background: rgba(2,132,199,.15); color: #38bdf8; border: 1px solid rgba(56,189,248,.2); }
        .theme-3xx .error-icon { color: #38bdf8; }

        /* 4xx — Client errors */
        .theme-4xx .card-stripe { background: linear-gradient(90deg, #d97706, #f59e0b); }
        .theme-4xx .error-code-number { background-image: linear-gradient(135deg, #d97706, #fcd34d); }
        .theme-4xx .error-code-badge { background: rgba(217,119,6,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
        .theme-4xx .error-icon { color: #fbbf24; }

        /* 401/403 — Auth errors (red-ish) */
        .theme-auth .card-stripe { background: linear-gradient(90deg, #dc2626, #ef4444); }
        .theme-auth .error-code-number { background-image: linear-gradient(135deg, #dc2626, #fca5a5); }
        .theme-auth .error-code-badge { background: rgba(220,38,38,.15); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
        .theme-auth .error-icon { color: #f87171; }

        /* 404 — Not found (purple) */
        .theme-404 .card-stripe { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
        .theme-404 .error-code-number { background-image: linear-gradient(135deg, #7c3aed, #c4b5fd); }
        .theme-404 .error-code-badge { background: rgba(124,58,237,.15); color: #a78bfa; border: 1px solid rgba(167,139,250,.2); }
        .theme-404 .error-icon { color: #a78bfa; }

        /* 419 — Session expired (orange) */
        .theme-419 .card-stripe { background: linear-gradient(90deg, #ea580c, #fb923c); }
        .theme-419 .error-code-number { background-image: linear-gradient(135deg, #ea580c, #fdba74); }
        .theme-419 .error-code-badge { background: rgba(234,88,12,.15); color: #fb923c; border: 1px solid rgba(251,146,60,.2); }
        .theme-419 .error-icon { color: #fb923c; }

        /* 429 — Rate limit (yellow) */
        .theme-429 .card-stripe { background: linear-gradient(90deg, #ca8a04, #eab308); }
        .theme-429 .error-code-number { background-image: linear-gradient(135deg, #ca8a04, #fde047); }
        .theme-429 .error-code-badge { background: rgba(202,138,4,.15); color: #facc15; border: 1px solid rgba(250,204,21,.2); }
        .theme-429 .error-icon { color: #facc15; }

        /* 5xx — Server errors (red) */
        .theme-5xx .card-stripe { background: linear-gradient(90deg, #dc2626, #b91c1c); }
        .theme-5xx .error-code-number { background-image: linear-gradient(135deg, #dc2626, #fca5a5); }
        .theme-5xx .error-code-badge { background: rgba(220,38,38,.15); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
        .theme-5xx .error-icon { color: #f87171; }

        /* Cloudflare errors (grey-blue) */
        .theme-cf .card-stripe { background: linear-gradient(90deg, #475569, #64748b); }
        .theme-cf .error-code-number { background-image: linear-gradient(135deg, #475569, #94a3b8); }
        .theme-cf .error-code-badge { background: rgba(71,85,105,.3); color: #94a3b8; border: 1px solid rgba(148,163,184,.2); }
        .theme-cf .error-icon { color: #94a3b8; }

        /* ── Responsive ── */
        @media (max-width: 480px) {
            .card-body { padding: 2rem 1.25rem; }
            .card-divider { margin: 0 -1.25rem 1.5rem; }
            .card-footer { padding: .875rem 1.25rem 1.25rem; }
            .error-title { font-size: 1.25rem; }
        }

        /* ── Countdown timer (for 429) ── */
        .countdown-badge {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .4rem .9rem;
            background: rgba(250,204,21,.1);
            border: 1px solid rgba(250,204,21,.25);
            border-radius: 8px;
            font-size: .8125rem;
            color: #facc15;
            font-weight: 600;
            margin-bottom: 1.25rem;
        }

        /* ── Subtle pulse on icon for server errors ── */
        .icon-pulse {
            animation: icon-pulse 2s ease-in-out infinite;
        }

        @keyframes icon-pulse {
            0%, 100% { opacity: 1; }
            50%       { opacity: .5; }
        }
    </style>
</head>
<body>

{{-- Animated background --}}
<div class="bg-grid" aria-hidden="true"></div>
<div class="bg-glow bg-glow-1" aria-hidden="true"></div>
<div class="bg-glow bg-glow-2" aria-hidden="true"></div>

<div class="page-wrapper" role="main">

    {{-- ── Organisation hero header ── --}}
    <div class="org-header" aria-label="Organisation">
        <div class="org-logo-wrap" aria-hidden="true">
            @php
                $logoPath1 = public_path('assets/img/logo.png');
                $logoPath2 = public_path('storage/organization/logo.png');
            @endphp
            @if(file_exists($logoPath1))
                <img src="{{ asset('assets/img/logo.png') }}" alt="{{ config('app.name') }} logo">
            @elseif(file_exists($logoPath2))
                <img src="{{ asset('storage/organization/logo.png') }}" alt="{{ config('app.name') }} logo">
            @else
                <span class="org-logo-initials">
                    {{ strtoupper(substr(config('app.name', 'S'), 0, 2)) }}
                </span>
            @endif
        </div>
        <p class="org-name">{{ config('app.name') }}</p>
    </div>

    {{-- ── Error card ── --}}
    <div class="error-card {{ $themeClass ?? 'theme-5xx' }}" role="alert" aria-live="assertive">

        {{-- Colour stripe at top --}}
        <div class="card-stripe" aria-hidden="true"></div>

        <div class="card-body">

            {{-- Error code badge --}}
            <div class="error-code-badge" aria-label="Error code {{ $statusCode ?? '500' }}">
                <i class="{{ $badgeIcon ?? 'fas fa-exclamation-circle' }}" aria-hidden="true"></i>
                <span>HTTP {{ $statusCode ?? '500' }}</span>
            </div>

            {{-- Big code number --}}
            <div class="error-code-number" aria-hidden="true">{{ $statusCode ?? '500' }}</div>

            {{-- Icon --}}
            <span class="error-icon {{ $iconPulse ?? '' }}" aria-hidden="true">
                <i class="{{ $errorIcon ?? 'fas fa-server' }}"></i>
            </span>

            {{-- Title --}}
            <h1 class="error-title">{{ $errorTitle ?? 'Something Went Wrong' }}</h1>

            {{-- Description --}}
            <p class="error-description">{{ $errorDescription ?? 'An unexpected error occurred. Please try again later.' }}</p>

            {{-- 429 countdown (only shown for rate-limit errors) --}}
            @if(($statusCode ?? 0) == 429)
            <div class="countdown-badge" id="retry-countdown" aria-live="polite">
                <i class="fas fa-clock" aria-hidden="true"></i>
                <span id="countdown-text">Please wait before trying again</span>
            </div>
            @endif

            <div class="card-divider" aria-hidden="true"></div>

            {{-- Action buttons --}}
            <div class="actions">
                @if($isDashboard ?? false)
                    {{-- Dashboard context: offer back to dashboard --}}
                    <a href="{{ url('/dashboard') }}" class="btn btn-primary">
                        <i class="fas fa-gauge" aria-hidden="true"></i>
                        Back to Dashboard
                    </a>
                    <a href="{{ url('/') }}" class="btn btn-secondary">
                        <i class="fas fa-home" aria-hidden="true"></i>
                        Main Website
                    </a>
                @else
                    {{-- Public context --}}
                    <a href="{{ url('/') }}" class="btn btn-primary">
                        <i class="fas fa-home" aria-hidden="true"></i>
                        Back to Homepage
                    </a>
                    @if(($statusCode ?? 0) == 419)
                    <button onclick="history.back()" class="btn btn-secondary">
                        <i class="fas fa-rotate-left" aria-hidden="true"></i>
                        Go Back
                    </button>
                    @elseif(($statusCode ?? 0) == 429)
                    <button onclick="location.reload()" class="btn btn-secondary" id="retry-btn" disabled>
                        <i class="fas fa-rotate" aria-hidden="true"></i>
                        Try Again
                    </button>
                    @else
                    <button onclick="history.back()" class="btn btn-secondary">
                        <i class="fas fa-arrow-left" aria-hidden="true"></i>
                        Go Back
                    </button>
                    @endif
                @endif
            </div>
        </div>

        {{-- Card footer --}}
        <div class="card-footer">
            <p class="footer-note">
                Need help?
                <a href="mailto:{{ config('mail.from.address', 'info@sshia.org') }}">Contact support</a>
                &nbsp;·&nbsp;
                <a href="{{ url('/') }}">{{ config('app.name') }}</a>
                &nbsp;·&nbsp;
                &copy; {{ date('Y') }}
            </p>
        </div>
    </div>

</div>

@if(($statusCode ?? 0) == 429)
<script>
    (function () {
        // Retry-After header value is passed via the view if available
        var seconds = {{ $retryAfter ?? 60 }};
        var btn     = document.getElementById('retry-btn');
        var text    = document.getElementById('countdown-text');

        function tick() {
            if (seconds <= 0) {
                if (text) text.textContent = 'You may try again now.';
                if (btn)  { btn.disabled = false; btn.style.opacity = '1'; }
                return;
            }
            if (text) text.textContent = 'Please wait ' + seconds + ' second' + (seconds !== 1 ? 's' : '') + ' before trying again.';
            seconds--;
            setTimeout(tick, 1000);
        }

        tick();
    })();
</script>
@endif

</body>
</html>
