<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login – SMART Academy</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-poppins antialiased">
<div class="min-h-screen flex" style="background: linear-gradient(135deg, #111 0%, #1a0505 50%, #111 100%)">

    {{-- Desktop left panel --}}
    <div class="hidden lg:flex flex-1 flex-col justify-center px-16 relative overflow-hidden">
        <img src="{{ asset('images/classroom-hero.jpg') }}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-20">
        <div class="relative z-10">
            <x-smart.logo :white="true" :height="52" />
            <h2 class="text-5xl font-black text-white leading-[1.1] mt-10 mb-5">
                Your Learning<br><span class="text-[#ED1C24]">Journey Starts</span><br>Here.
            </h2>
            <p class="text-white/55 text-base leading-relaxed max-w-sm">
                Access your subjects, lesson recaps, quiz results, and class timetable — all in one place.
            </p>
            <div class="flex flex-wrap gap-3 mt-12">
                @foreach(['Lesson Recaps','Quiz Results','Live Timetable','Progress Tracker'] as $f)
                    <span class="bg-white/08 border border-white/12 rounded-full px-4 py-2 text-sm text-white/75 font-semibold">✓ {{ $f }}</span>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Login card --}}
    <div class="flex items-center justify-center w-full lg:w-auto px-6 lg:px-16 py-10">
        <div class="bg-white rounded-3xl p-8 lg:p-12 w-full max-w-md shadow-[0_40px_80px_rgba(0,0,0,0.35)]">
            <div class="mb-8">
                <a href="{{ route('home') }}"
                   class="inline-flex items-center gap-2 text-gray-400 text-sm hover:text-gray-600 transition mb-7">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
                    Back to website
                </a>
                <div class="flex justify-center mb-5"><x-smart.logo /></div>
                <h1 class="text-2xl font-black text-gray-900 text-center">Welcome Back</h1>
                <p class="text-sm text-gray-500 text-center mt-1.5">Sign in to your SMART Academy portal</p>
            </div>

            <x-auth-session-status class="mb-4 text-sm text-emerald-600 bg-emerald-50 rounded-xl px-4 py-3" :status="session('status')" />

            {{-- Role hint --}}
            <div class="bg-blue-50 border border-blue-100 rounded-xl px-4 py-3 mb-6 text-xs text-blue-700">
                <strong>Demo credentials:</strong><br>
                Admin: admin@smart.lk / password<br>
                Teacher: ruwan.sir@smart.lk / password<br>
                Student: amal.perera@student.smart.lk / password
            </div>

            <form method="POST" action="{{ route('login') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-bold text-gray-500 tracking-wider mb-2">EMAIL</label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus
                           class="w-full rounded-xl border @error('email') border-red-400 @else border-gray-200 @enderror px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-400/30 focus:border-red-400 transition">
                    @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-xs font-bold text-gray-500 tracking-wider mb-2">PASSWORD</label>
                    <input id="password" type="password" name="password" required
                           class="w-full rounded-xl border border-gray-200 px-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-400/30 focus:border-red-400 transition">
                    @error('password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="flex items-center justify-between">
                    <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                        <input type="checkbox" name="remember" class="rounded border-gray-300 text-[#ED1C24] focus:ring-red-400/30">
                        Remember me
                    </label>
                    @if(Route::has('password.request'))
                        <a href="{{ route('password.request') }}" class="text-sm text-[#ED1C24] font-semibold hover:underline">Forgot password?</a>
                    @endif
                </div>
                <button type="submit"
                        class="w-full bg-[#ED1C24] text-white rounded-xl py-4 font-bold text-base shadow-[0_6px_20px_rgba(237,28,36,0.4)] hover:bg-red-700 transition mt-2">
                    Sign In
                </button>
            </form>
        </div>
    </div>
</div>
</body>
</html>
