@extends('layouts.app')

@section('title', '500 - Server Error')

@section('content')
<div class="min-h-screen bg-gray-50 flex items-center justify-center py-16 px-4">
    <div class="text-center max-w-xl">
        <div class="relative mb-8">
            <div class="text-[160px] font-black text-gray-100 leading-none select-none">500</div>
            <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-24 h-24 bg-red-500 rounded-3xl flex items-center justify-center shadow-2xl">
                    <i class="fas fa-exclamation-triangle text-white text-4xl"></i>
                </div>
            </div>
        </div>

        <h1 class="text-3xl font-bold text-navy mb-3">Server Error</h1>
        <p class="text-gray-500 mb-8 text-lg">Something went wrong on our end. Our team has been notified and is working on a fix.</p>

        <div class="flex flex-wrap gap-3 justify-center mb-8">
            <a href="{{ route('home') }}" class="bg-electric-blue text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-dark transition-colors">
                <i class="fas fa-home mr-2"></i> Go Back Home
            </a>
            <button onclick="window.location.reload()" class="bg-white border border-gray-200 text-navy px-6 py-3 rounded-xl font-semibold hover:border-electric-blue transition-colors">
                <i class="fas fa-redo mr-2"></i> Try Again
            </button>
        </div>

        <p class="text-sm text-gray-400">
            If this error persists, please <a href="{{ route('contact') }}" class="text-electric-blue hover:underline">contact our support team</a>.
        </p>
    </div>
</div>
@endsection