@extends('layouts.app')

@section('content')
    @include('partials.header')

    <div class="lg:ml-64">
        @include('partials.topbar')

        <div class="min-h-[70vh] flex items-center justify-center px-4">
            <div class="text-center max-w-md">
                <img src="/img/svg/404.svg" alt="Error" class="w-64 sm:w-80 mx-auto mb-8">
                <h1 class="text-3xl font-bold text-gray-900 mb-2">Server đang gặp sự cố</h1>
                <p class="text-gray-500 text-sm mb-8">Đã xảy ra lỗi hệ thống. Vui lòng thử lại sau ít phút.</p>
                <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-amber-400 hover:bg-amber-500 text-gray-900 font-bold text-sm rounded-xl transition-all shadow-lg shadow-amber-200 hover:-translate-y-0.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1h-2z"/></svg>
                    Về trang chủ
                </a>
            </div>
        </div>

        @include('partials.footer')
    </div>
@endsection