@extends('layouts.app')

@section('title', 'Masuk - Janoer Koening')

@section('content')
<div class="py-20 bg-[#FAF7F0]">
    <div class="max-w-md mx-auto px-4 sm:px-6">
        <div class="bg-white p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-xl">
            <div class="text-center mb-8">
                <img src="{{ asset('assets/brand/logo.png') }}" alt="Logo" class="h-12 mx-auto mb-3">
                <h1 class="font-heading text-3xl font-bold text-charcoal">Masuk ke Akunmu</h1>
                <p class="text-xs text-charcoal/60 mt-1">Masuk untuk mengelola undangan pernikahan atau panel admin.</p>
            </div>

            @if(session('status'))
                <div class="mb-4 p-3 bg-emerald-50 text-emerald-800 text-xs rounded-xl border border-emerald-200">
                    {{ session('status') }}
                </div>
            @endif

            @if(session('success'))
                <div class="mb-4 p-3 bg-emerald-50 text-emerald-800 text-xs rounded-xl border border-emerald-200">
                    {{ session('success') }}
                </div>
            @endif

            @if(isset($errors) && $errors->any())
                <div class="mb-4 p-3 bg-red-50 text-red-700 text-xs rounded-xl border border-red-200">
                    {{ $errors->first() }}
                </div>
            @endif

            <form action="{{ route('login') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-semibold text-charcoal/80 mb-1">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" required class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-charcoal/80 mb-1">Password</label>
                    <input type="password" name="password" required class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                </div>

                <div class="flex items-center justify-between text-xs">
                    <label class="flex items-center gap-1.5 text-charcoal/70 cursor-pointer">
                        <input type="checkbox" name="remember" class="accent-deepsage">
                        Ingat Saya
                    </label>
                    <a href="{{ route('password.request') }}" class="text-deepsage hover:underline font-semibold">
                        Lupa Password?
                    </a>
                </div>

                <button type="submit" class="w-full py-3 bg-deepsage text-ivory text-xs font-semibold uppercase tracking-wider rounded-full hover:bg-opacity-90 shadow-md transition">
                    Masuk Sekarang
                </button>
            </form>

            <div class="mt-6 pt-6 border-t border-gray-100 text-center text-xs text-charcoal/60">
                Belum punya akun? <a href="{{ route('checkout.index') }}" class="text-deepsage font-semibold hover:underline">Pilih Template & Pesan</a>
                <div class="mt-4 p-3 bg-[#FAF7F0] rounded-xl text-left text-[11px] text-charcoal/70">
                    <strong>Demo Login:</strong><br>
                    • Pengantin 1: <code>pengantin@gmail.com</code> / <code>password123</code><br>
                    • Pengantin 2: <code>pengantin2@gmail.com</code> / <code>password123</code><br>
                    • Pengantin 3: <code>pengantin3@gmail.com</code> / <code>password123</code>


                </div>
            </div>
        </div>
    </div>
</div>
@endsection