@extends('layouts.app')

@section('title', '503 Service Unavailable – DAV College Portal')

@section('content')
<div class="flex-grow flex items-center justify-center py-8 md:py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-dav-700 via-dav-600 to-dav-500 relative overflow-hidden">
    <!-- Background decorative blobs -->
    <div class="absolute -top-40 -left-40 w-96 h-96 bg-white/5 rounded-full blur-3xl"></div>
    <div class="absolute -bottom-40 -right-40 w-96 h-96 bg-white/5 rounded-full blur-3xl"></div>

    <div class="max-w-md w-full space-y-6 glass-card p-6 md:p-8 rounded-3xl shadow-2xl relative z-10 animate-fade-in border border-white/20 text-center">

        {{-- Icon --}}
        <div class="w-20 h-20 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md animate-pulse">
            <i class="fa-solid fa-database text-3xl"></i>
        </div>

        <h2 class="text-2xl md:text-3xl font-extrabold text-slate-800 tracking-tight">
            Database Unavailable
        </h2>

        <span class="badge bg-amber-100 text-amber-800 border border-amber-200 font-extrabold px-3 py-1 text-xs rounded-lg uppercase tracking-wide">
            Error Code 503
        </span>

        <p class="text-slate-500 text-sm leading-relaxed mt-2">
            {{ $message ?? 'The database is temporarily unavailable. Our team has been notified. Please try again in a moment.' }}
        </p>

        {{-- What you can still do --}}
        <div class="bg-slate-50 border border-slate-200 rounded-2xl p-4 text-left text-sm text-slate-600 space-y-2">
            <p class="font-semibold text-slate-700 flex items-center gap-2">
                <i class="fa-solid fa-circle-info text-dav-500"></i> What you can still do:
            </p>
            <ul class="list-disc list-inside space-y-1 text-slate-500">
                <li>Visit the <a href="{{ url('/') }}" class="text-dav-600 font-semibold hover:underline">public portal</a></li>
                <li>Check our CMAT information page</li>
                <li>Try logging in again in a few minutes</li>
            </ul>
        </div>

        <div class="pt-4 border-t border-slate-200 flex flex-col gap-2">
            <a href="{{ url('/') }}"
               class="btn btn-primary bg-dav-500 hover:bg-dav-600 border-0 rounded-pill py-2.5 font-bold shadow-md hover-lift flex items-center justify-center gap-2 text-sm">
                <i class="fa-solid fa-house text-xs"></i> Back to Public Portal
            </a>
            <button onclick="window.location.reload()"
                    class="btn btn-outline-secondary rounded-pill py-2 text-xs font-semibold hover-lift">
                <i class="fa-solid fa-rotate-right text-xs me-1"></i> Try Again
            </button>
        </div>

    </div>
</div>
@endsection