<!DOCTYPE html>
<html lang="en" class="h-full bg-slate-900">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Humanity Welfare Society CMS</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/@lucide/web@latest"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'] }
                }
            }
        }
    </script>
</head>
<body class="h-full font-sans antialiased text-slate-800 bg-slate-900 flex items-center justify-center p-4">

    <div class="w-full max-w-5xl grid lg:grid-cols-2 rounded-3xl bg-white shadow-2xl overflow-hidden min-h-[600px]">
        
        <!-- Left Banner (NGO Showcase) -->
        <div class="relative hidden lg:flex flex-col justify-between p-12 bg-gradient-to-br from-slate-900 via-emerald-950 to-slate-900 text-white overflow-hidden">
            <!-- Background Glow -->
            <div class="absolute -top-24 -left-24 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-teal-500/20 rounded-full blur-3xl"></div>
            
            <div class="relative z-10">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-600 text-white flex items-center justify-center font-extrabold text-2xl shadow-xl shadow-emerald-600/40">
                        HWS
                    </div>
                    <div>
                        <h2 class="font-extrabold text-xl tracking-tight leading-none text-white">Humanity Welfare</h2>
                        <span class="text-xs font-semibold text-emerald-400">Society (NGO)</span>
                    </div>
                </div>
            </div>

            <div class="relative z-10 space-y-6 my-auto">
                <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs font-bold tracking-wide uppercase">
                    <i data-lucide="shield-check" class="w-4 h-4"></i>
                    Official Certificate Portal
                </div>
                <h1 class="text-4xl font-extrabold text-white leading-tight tracking-tight">
                    Authentic Student Internship & Certification System
                </h1>
                <p class="text-slate-300 text-sm leading-relaxed">
                    Manage intern records, issue dynamic QR-verified certificates with dynamic college logos, and prevent certificate tampering securely.
                </p>
            </div>

            <div class="relative z-10 pt-6 border-t border-slate-800 text-xs text-slate-400 flex items-center justify-between">
                <span>&copy; {{ date('Y') }} Humanity Welfare Society</span>
                <span class="text-emerald-400 font-semibold">Authorized Admin Access</span>
            </div>
        </div>

        <!-- Right Side: Login Form -->
        <div class="p-8 md:p-12 flex flex-col justify-center bg-white">
            <div class="max-w-md mx-auto w-full space-y-8">
                
                <div class="space-y-2 text-center lg:text-left">
                    <div class="lg:hidden flex justify-center mb-4">
                        <div class="w-14 h-14 rounded-2xl bg-emerald-600 text-white flex items-center justify-center font-extrabold text-2xl shadow-lg">
                            HWS
                        </div>
                    </div>
                    <h2 class="text-3xl font-extrabold text-slate-900 tracking-tight">Welcome Back</h2>
                    <p class="text-sm text-slate-500">Sign in to your admin account to continue</p>
                </div>

                @if($errors->any())
                <div class="bg-rose-50 border border-rose-200 text-rose-700 text-xs p-4 rounded-xl space-y-1">
                    @foreach($errors->all() as $err)
                        <p class="font-medium">• {{ $err }}</p>
                    @endforeach
                </div>
                @endif

                <form method="POST" action="{{ route('login') }}" class="space-y-6">
                    @csrf

                    <div>
                        <label for="email" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Email Address</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                                <i data-lucide="mail" class="w-5 h-5"></i>
                            </div>
                            <input type="email" name="email" id="email" value="{{ old('email') }}" required autofocus
                                   class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-slate-200 bg-slate-50 text-slate-900 text-sm font-medium focus:bg-white focus:border-emerald-600 focus:ring-4 focus:ring-emerald-600/10 transition-all outline-none"
                                   placeholder="admin@humanitywelfare.org">
                        </div>
                    </div>

                    <div>
                        <label for="password" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Password</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                                <i data-lucide="lock" class="w-5 h-5"></i>
                            </div>
                            <input type="password" name="password" id="password" required
                                   class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-slate-200 bg-slate-50 text-slate-900 text-sm font-medium focus:bg-white focus:border-emerald-600 focus:ring-4 focus:ring-emerald-600/10 transition-all outline-none"
                                   placeholder="••••••••">
                        </div>
                    </div>

                    <div class="flex items-center justify-between text-xs">
                        <label class="flex items-center gap-2 font-semibold text-slate-600 cursor-pointer">
                            <input type="checkbox" name="remember" class="w-4 h-4 rounded text-emerald-600 focus:ring-emerald-500 border-slate-300">
                            <span>Remember Me</span>
                        </label>
                    </div>

                    <button type="submit" 
                            class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-bold text-sm tracking-wide shadow-xl shadow-emerald-600/30 transition-all duration-200 hover:scale-[1.01] active:scale-[0.99] flex items-center justify-center gap-2">
                        <span>Sign In to Dashboard</span>
                        <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </button>
                </form>

                <div class="pt-4 border-t border-slate-100 text-center text-xs text-slate-400">
                    Default Super Admin: <span class="font-semibold text-slate-700">admin@humanitywelfare.org</span> | Pass: <span class="font-semibold text-slate-700">password</span>
                </div>
            </div>
        </div>
    </div>

    <script>lucide.createIcons();</script>
</body>
</html>
