@extends('layouts.app')

@section('title', 'تسجيل الدخول')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary-900 via-secondary-600 to-primary-800 p-5">
    <div class="w-full max-w-[420px] glass rounded-[20px] p-9 shadow-2xl">
        <div class="text-center mb-4">
            <div class="w-14 h-14 rounded-[14px] bg-gradient-to-br from-accent-500 to-accent-600 flex items-center justify-center text-2xl mx-auto mb-3 shadow-lg shadow-orange-500/30">📘</div>
            <h1 class="text-[1.4rem] font-display font-extrabold text-primary-900">{{ __('LINK ACADEMY') }}</h1>
            <p class="text-sm text-muted mt-1">{{ __('نظام إدارة الموارد ERP') }}</p>
        </div>

        @if ($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-600 rounded-lg px-4 py-3 text-sm font-semibold mb-4">
                {{ $errors->first('email') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="mb-3">
                <label class="block text-sm font-semibold text-text mb-1">{{ __('الإيميل') }}</label>
                <input type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus
                       class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg bg-white font-body text-sm text-text outline-none transition-all focus:border-accent-500 focus:ring-3 focus:ring-accent-500/15">
            </div>
            <div class="mb-3">
                <label class="block text-sm font-semibold text-text mb-1">{{ __('كلمة السر') }}</label>
                <input type="password" name="password" required autocomplete="current-password"
                       class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg bg-white font-body text-sm text-text outline-none transition-all focus:border-accent-500 focus:ring-3 focus:ring-accent-500/15">
            </div>
            <button type="submit" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-bold text-sm text-white bg-accent-500 hover:bg-accent-600 transition-all shadow-lg shadow-accent-500/25 mt-4 cursor-pointer">
                {{ __('تسجيل الدخول') }}
            </button>
        </form>

        <div class="text-center mt-4 text-[0.78rem] text-muted">
            &copy; {{ date('Y') }} Link Academy — {{ __('جميع الحقوق محفوظة') }}
        </div>
    </div>
</div>
@endsection