@extends('layouts.app')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-900 via-purple-900 to-black p-6">
    
    <div id="login-card" class="w-full max-w-md bg-white/10 backdrop-blur-xl rounded-3xl p-8 border border-white/20 shadow-2xl">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-white mb-2">Welcome Back</h2>
            <p class="text-indigo-200">Silakan login untuk akses dashboard</p>
        </div>

        <form method="POST" action="/login" class="space-y-6">
            @csrf
            <div class="relative">
                <input type="email" name="email" required placeholder="Email Address" 
                    class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
            </div>

            <div class="relative">
                <input type="password" name="password" required placeholder="Password" 
                    class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
            </div>

            <button type="submit" 
                class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-3 rounded-xl transition-all transform hover:scale-105 active:scale-95 shadow-lg shadow-indigo-500/30">
                Sign In
            </button>
        </form>
    </div>
</div>

<script>
    const card = document.getElementById('login-card');
    card.style.opacity = '0';
    card.style.transform = 'translateY(50px)';
    setTimeout(() => {
        card.style.transition = 'all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
    }, 100);
</script>
@endsection