@extends('layouts.app')

@section('title', 'تسجيل الدخول - دكان موتورز')

@section('content')
    <div class="max-w-md mx-auto px-4 py-12">
        <div class="bg-surface rounded-2xl border border-line p-8">
            <h1 class="text-2xl font-extrabold text-fg mb-1">تسجيل الدخول</h1>
            <p class="text-sm text-muted mb-6">ادخل لحسابك لإدارة إعلاناتك</p>

            @if ($errors->any())
                <div class="mb-4 rounded-lg bg-red-500/10 border border-red-500/30 p-3 text-sm text-red-400">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('login') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="dm-label">البريد الإلكتروني</label>
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus
                           class="dm-field">
                </div>
                <div>
                    <label class="dm-label">كلمة المرور</label>
                    <input type="password" name="password" required
                           class="dm-field">
                </div>
                <label class="flex items-center gap-2 text-sm text-muted">
                    <input type="checkbox" name="remember" class="rounded bg-surface2 border-line2 text-accent focus:ring-brand-400">
                    تذكرني
                </label>
                <button type="submit" class="w-full rounded-lg bg-brand-400 px-4 py-3 text-sm font-bold text-black hover:bg-brand-300 transition">
                    دخول
                </button>
            </form>

            <p class="mt-6 text-center text-sm text-muted">
                ليس لديك حساب؟
                <a href="{{ route('register') }}" class="font-semibold text-accent hover:underline">أنشئ حساب جديد</a>
            </p>
        </div>
    </div>
@endsection