@extends('layouts.app')

@section('title', 'Server Error | Kevron Suites')

@section('content')
<section class="section-soft-blue min-h-[70vh] flex items-center justify-center py-16">
    <div class="max-w-md w-full px-4 text-center">
        
        <div class="card-luxury p-8 md:p-12 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm relative overflow-hidden">
            <div class="absolute top-0 left-0 right-0 h-1 bg-amber-500"></div>
            
            <div class="text-3xl md:text-4xl font-normal text-amber-500 mb-4 tracking-widest">
                500
            </div>
            
            <h1 class="text-base md:text-lg font-normal text-slate-900 dark:text-white mb-4 uppercase tracking-wider">
                System Interruption
            </h1>
            
            <p class="text-xs text-slate-500 dark:text-slate-400 font-semibold leading-relaxed mb-8">
                We are experiencing a temporary smart system interruption on our administrative servers. Our executive support engineers have been notified and are rectifying the issue.
            </p>
            
            <div class="space-y-4">
                <a href="{{ route('home') }}" class="btn-pill btn-primary w-full py-3 text-xs uppercase tracking-wider font-bold">
                    Return to Homepage
                </a>
                <a href="{{ route('contact') }}" class="btn-pill btn-outline-gold w-full py-3 text-xs uppercase tracking-wider font-bold">
                    Contact Concierge Desk
                </a>
            </div>
        </div>
        
    </div>
</section>
@endsection