<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-4 sm:mb-8">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('مكتب الاستقبال') }}</h1>
            <p class="text-xs sm:text-sm text-gray-500 mt-1">{{ __('اليوم') }}: {{ now()->translatedFormat('l j F Y') }}</p>
        </div>
    </div>

    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-4 sm:mb-6 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 text-sm">
        {{ session('success') }}
    </div>
    @endif

    {{-- Today's Stats — 2x2 on mobile --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-blue-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500 truncate">{{ __('تسجيلات اليوم') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['registrations_today'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-green-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500 truncate">{{ __('مدفوعات اليوم') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ number_format($stats['payments_today'] / 100, 2) }}</p>
                    <p class="text-xs text-gray-400" dir="ltr">{{ $stats['payments_count'] }} {{ __('عملية') }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-amber-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500 truncate">{{ __('حصص اليوم') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['sessions_in_progress'] }} / {{ $stats['sessions_today'] }}</p>
                    <p class="text-xs text-gray-400 hidden sm:block">{{ __('جارية / إجمالي') }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-purple-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500 truncate">{{ __('الحضور') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['checked_in'] }}</p>
                    <p class="text-xs text-gray-400" dir="ltr">/ {{ $stats['expected_today'] }} {{ __('متوقع') }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Actions --}}
    <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-3 sm:mb-4">{{ __('إجراءات سريعة') }}</h2>

    {{-- Primary Action — Full width hero on mobile --}}
    @can('participants.create')
    <a href="{{ route('receptionist.new-registration') }}" wire:navigate
       class="group block mb-3 sm:mb-5 bg-blue-600 rounded-2xl shadow-md p-5 sm:p-6 hover:bg-blue-700 active:scale-[0.98] transition-all">
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-xl bg-white/20 flex items-center justify-center shrink-0">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                </svg>
            </div>
            <div class="min-w-0">
                <h3 class="font-bold text-white text-lg sm:text-xl">{{ __('تسجيل جديد') }}</h3>
                <p class="text-blue-100 text-sm mt-0.5">{{ __('مشترك + ولي أمر + برنامج') }}</p>
            </div>
            <svg class="w-6 h-6 text-white/60 ms-auto shrink-0 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </div>
    </a>
    @endcan

    {{-- Secondary Actions — compact grid --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
        @can('enrollments.create')
        <a href="{{ route('receptionist.enroll-existing') }}" wire:navigate
           class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-emerald-300 active:scale-[0.97] transition-all">
            <div class="w-12 h-12 rounded-xl bg-emerald-100 flex items-center justify-center group-hover:bg-emerald-200 transition-colors shrink-0">
                <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                </svg>
            </div>
            <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('تسجيل في برنامج') }}</span>
        </a>
        @endcan

        @can('invoices.create')
        <a href="{{ route('receptionist.collect-payment') }}" wire:navigate
           class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-amber-300 active:scale-[0.97] transition-all">
            <div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center group-hover:bg-amber-200 transition-colors shrink-0">
                <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('تحصيل دفعة') }}</span>
        </a>
        @endcan

        @can('enrollments.create')
        <a href="{{ route('receptionist.retroactive-enrollment') }}" wire:navigate
           class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-purple-300 active:scale-[0.97] transition-all">
            <div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center group-hover:bg-purple-200 transition-colors shrink-0">
                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('تسجيل لاعب سابق') }}</span>
        </a>
        @endcan

        @can('pos.sell')
        <a href="{{ route('pos.terminal') }}" wire:navigate
           class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-rose-300 active:scale-[0.97] transition-all">
            <div class="w-12 h-12 rounded-xl bg-rose-100 flex items-center justify-center group-hover:bg-rose-200 transition-colors shrink-0">
                <svg class="w-6 h-6 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/>
                </svg>
            </div>
            <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('بيع منتج') }}</span>
        </a>
        @endcan

        @can('attendance.mark')
        <a href="{{ route('attendance.list') }}" wire:navigate
           class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-purple-300 active:scale-[0.97] transition-all">
            <div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center group-hover:bg-purple-200 transition-colors shrink-0">
                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('تسجيل حضور') }}</span>
        </a>
        @endcan
    </div>
</div>
