@extends('layouts.app')
@section('content')
<div class="min-h-screen flex items-center justify-center px-4 py-24 bengali-pattern">
    <div class="glass-card p-8 md:p-12 max-w-md w-full shadow-2xl relative overflow-hidden" data-aos="zoom-in">
        <div class="absolute -top-10 -right-10 w-32 h-32 bg-gold/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-bo/10 rounded-full blur-3xl"></div>

        <div class="text-center mb-8 relative">
            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gold to-bo flex items-center justify-center mx-auto mb-4 shadow-lg">
                <span class="text-white font-playfair font-bold text-2xl">শ</span>
            </div>
            <h1 class="font-playfair text-3xl text-cream font-bold">Welcome Back</h1>
            <p class="text-cream/50 text-sm mt-1">Sign in to your Shalik account</p>
        </div>

        @if($errors->any())
        <div class="bg-red-500/20 border border-red-500/40 text-red-400 p-4 rounded-xl mb-6 text-sm">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ route('login.post') }}" method="POST" class="space-y-6 relative">
            @csrf
            <div>
                <label class="block text-cream/70 text-xs uppercase tracking-widest mb-2 font-semibold">Email Address</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-4 flex items-center text-gold/50"><i class="fas fa-envelope"></i></span>
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus
                           class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/20 rounded-xl pl-12 pr-4 py-3 focus:outline-none focus:border-gold transition-colors"
                           placeholder="your@email.com">
                </div>
            </div>

            <div>
                <div class="flex justify-between mb-2">
                    <label class="block text-cream/70 text-xs uppercase tracking-widest font-semibold">Password</label>
                    <a href="#" class="text-gold/60 hover:text-gold text-[10px] uppercase tracking-tighter">Forgot?</a>
                </div>
                <div class="relative">
                    <span class="absolute inset-y-0 left-4 flex items-center text-gold/50"><i class="fas fa-lock"></i></span>
                    <input type="password" name="password" required
                           class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/20 rounded-xl pl-12 pr-4 py-3 focus:outline-none focus:border-gold transition-colors"
                           placeholder="••••••••">
                </div>
            </div>

            <div class="flex items-center">
                <input type="checkbox" name="remember" id="remember" class="w-4 h-4 rounded bg-deep-green border-gold/20 accent-gold">
                <label for="remember" class="ml-2 text-cream/50 text-sm cursor-pointer select-none">Remember me</label>
            </div>

            <button type="submit" class="btn-gold w-full py-4 text-base shadow-xl">
                Sign In <i class="fas fa-sign-in-alt ml-2"></i>
            </button>
        </form>

        <div class="mt-8 text-center text-sm text-cream/40 border-t border-white/5 pt-6 relative">
            Don't have an account? 
            <a href="{{ route('register') }}" class="text-gold hover:text-light-gold font-semibold">Join the Family</a>
        </div>
    </div>
</div>
@endsection