@extends('layouts.app')

@section('title', 'Masuk')

@section('content')
<div class="min-h-[70vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="w-full max-w-md">
        <div class="text-center mb-8">
            <div class="w-14 h-14 rounded-2xl mx-auto mb-4 flex items-center justify-center bg-red-600">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-slate-800">Masuk ke Akun Anda</h1>
            <p class="text-sm text-slate-500 mt-2">Belum punya akun? <a href="{{ url('/register') }}" class="text-red-600 hover:underline font-semibold">Daftar sekarang</a></p>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
            @if($errors->any())
                <div class="mb-6 rounded-xl p-4 border border-red-200 bg-red-50">
                    <p class="text-sm text-red-600 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>
                        {{ $errors->first() }}
                    </p>
                </div>
            @endif

            <form method="POST" action="{{ url('/login') }}" class="space-y-5">
                @csrf
                <div>
                    <label for="email" class="block text-sm font-semibold text-slate-700 mb-2">Email</label>
                    <input type="email" name="email" id="email" required autofocus
                           value="{{ old('email') }}"
                           placeholder="nama@email.com"
                           class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all">
                </div>
                <div>
                    <label for="password" class="block text-sm font-semibold text-slate-700 mb-2">Password</label>
                    <input type="password" name="password" id="password" required
                           placeholder="••••••••"
                           class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all">
                </div>
                <div class="flex items-center">
                    <input type="checkbox" name="remember" id="remember" class="h-4 w-4 text-red-600 focus:ring-red-500 border-slate-300 rounded">
                    <label for="remember" class="ml-2 text-sm text-slate-600">Ingat saya</label>
                </div>
                <button type="submit" class="w-full py-3 rounded-xl text-sm font-semibold text-white shadow-lg shadow-red-500/20 bg-red-600 hover:bg-red-700 transition-all">
                    Masuk
                </button>
            </form>
        </div>
    </div>
</div>
@endsection