@extends('errors::layout')

@section('title', 'Serviço indisponível')

@section('content')
<div class="w-full max-w-lg mx-auto text-center">

    <div class="mb-6">
        <span class="text-8xl md:text-9xl font-black bg-gradient-to-br from-slate-500 to-gray-700 bg-clip-text text-transparent select-none leading-none">
            503
        </span>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-8">

        <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Serviço indisponível</h1>

        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
            {{ $exception->getMessage() ?: 'O sistema está temporariamente fora do ar para manutenção ou atualização.' }}
        </p>
        <p class="text-sm text-gray-400 dark:text-gray-500 mb-7">
            Voltaremos em breve. Agradecemos a compreensão.
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
            <button onclick="location.reload()"
                    class="inline-flex items-center gap-2 px-5 py-2.5 bg-slate-600 hover:bg-slate-700
                           text-white text-sm font-semibold rounded-xl transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Tentar novamente
            </button>
            @include('errors._buttons')
        </div>
    </div>

    <p class="mt-6 text-xs text-gray-400 dark:text-gray-500">
        Código de erro: <span class="font-mono">503</span>
        &nbsp;·&nbsp; {{ now()->format('d/m/Y H:i') }}
    </p>

</div>
@endsection