<x-layouts.blank>
    <div class="min-h-screen relative overflow-hidden flex items-center justify-center px-6">

        {{-- Background glows --}}
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[500px] bg-indigo-50 rounded-full blur-3xl opacity-60 pointer-events-none"></div>
        <div class="absolute top-20 right-0 w-72 h-72 bg-purple-100 rounded-full blur-3xl opacity-40 pointer-events-none"></div>
        <div class="absolute top-10 left-0 w-64 h-64 bg-sky-100 rounded-full blur-3xl opacity-40 pointer-events-none"></div>

        <div class="relative text-center max-w-lg">

            {{-- Logo --}}
            <div class="flex items-center justify-center gap-2.5 mb-10">
                <div class="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center shadow-sm shadow-indigo-200">
                    <x-heroicon-o-bolt class="w-5 h-5 text-white"/>
                </div>
                <span class="font-bold text-gray-900 text-xl tracking-tight">aziros</span>
            </div>

            {{-- Error Code --}}
            <p class="text-8xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent leading-none">
                501
            </p>

            {{-- Text --}}
            <h1 class="mt-6 text-2xl font-bold text-gray-900 tracking-tight">{{ t('errors.501.title') }}</h1>
            <p class="mt-3 text-gray-500 leading-relaxed">{{ t('errors.501.message') }}</p>

            {{-- CTA --}}
            <div class="mt-10 flex flex-wrap justify-center gap-3">
                <a href="{{ url('/') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200 hover:shadow-indigo-300 hover:-translate-y-0.5">
                    {{ t('errors.back_home') }}
                    <x-heroicon-o-arrow-right class="w-4 h-4"/>
                </a>
                <button onclick="history.back()"
                        class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-white border border-gray-200 text-gray-700 font-semibold hover:bg-gray-50 hover:border-gray-300 transition-all">
                    <x-heroicon-o-arrow-left class="w-4 h-4 text-indigo-500"/>
                    {{ t('errors.go_back') }}
                </button>
            </div>

        </div>
    </div>
</x-layouts.blank>
