<div>
    <div class="bg-white rounded-xl shadow-lg p-6 sm:p-8">
        <!-- Logo/Title -->
        <div class="text-center mb-6 sm:mb-8">
            @php
                $branding = app(\App\Domain\Shared\Services\SettingsService::class);
                $logo = $branding->get('branding.logo');
            @endphp
            @if($logo)
                <img src="{{ Storage::disk('public')->url($logo) }}" alt="{{ __('الكابتن') }}" class="h-14 sm:h-16 mx-auto mb-3">
            @else
                <h1 class="text-2xl sm:text-3xl font-bold mb-2" style="color: var(--brand-primary, #2563eb);">{{ __('الكابتن') }}</h1>
            @endif
            <p class="text-sm sm:text-base text-gray-500">{{ __('إدارة الأكاديميات الرياضية') }}</p>
        </div>

        <!-- Error message -->
        @if($errorMessage)
            <div class="mb-4 rounded-lg bg-red-50 p-3 sm:p-4 border border-red-200">
                <p class="text-sm text-red-700">{{ $errorMessage }}</p>
            </div>
        @endif

        <form wire:submit="login">
            <!-- Identifier (email or phone) -->
            <div class="mb-4">
                <label for="identifier" class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني أو رقم الهاتف') }}</label>
                <input type="text" id="identifier" wire:model="identifier"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent text-sm sm:text-base @error('identifier') border-red-500 @enderror"
                       style="--tw-ring-color: var(--brand-primary, #2563eb);"
                       placeholder="{{ __('admin@example.com أو 01012345678') }}" dir="ltr" required autofocus autocomplete="username">
                @error('identifier')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Password -->
            <div class="mb-5 sm:mb-6">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور') }}</label>
                <input type="password" id="password" wire:model="password"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent text-sm sm:text-base @error('password') border-red-500 @enderror"
                       style="--tw-ring-color: var(--brand-primary, #2563eb);"
                       placeholder="••••••••" required autocomplete="current-password">
                @error('password')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Remember me -->
            <div class="flex items-center justify-between mb-5 sm:mb-6">
                <label class="flex items-center gap-2 cursor-pointer min-h-[44px]">
                    <input type="checkbox" wire:model="remember" class="w-5 h-5 rounded border-gray-300 focus:ring-2" style="color: var(--brand-primary, #2563eb); --tw-ring-color: var(--brand-primary, #2563eb);">
                    <span class="text-sm text-gray-600">{{ __('تذكرني') }}</span>
                </label>
            </div>

            <!-- Submit -->
            <button type="submit"
                    wire:loading.attr="disabled"
                    class="w-full py-3 px-4 text-white font-medium rounded-lg transition-colors disabled:opacity-60 text-sm sm:text-base"
                    style="background-color: var(--brand-primary, #2563eb);">
                <span wire:loading.remove wire:target="login">{{ __('تسجيل الدخول') }}</span>
                <span wire:loading wire:target="login">{{ __('جارٍ الدخول...') }}</span>
            </button>
        </form>
    </div>

    <!-- Footer -->
    <p class="text-center text-xs sm:text-sm text-gray-400 mt-4 sm:mt-6">
        El Captain Sports Management &copy; {{ date('Y') }}
    </p>
</div>
