@extends('layouts.public')

@section('title', 'Login — Undangan Digital')
@section('hide_footer', true)

@push('styles')
<style>
    .login-page {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 6rem 1.25rem 2rem;
    }

    .login-card {
        width: min(420px, 100%);
        animation: rise .7s ease both;
    }

    .login-card h1 {
        font-family: var(--font-display);
        font-size: 2.2rem;
        font-weight: 560;
        letter-spacing: -0.03em;
        margin: 0 0 .4rem;
    }

    .remember {
        display: flex;
        align-items: center;
        gap: .55rem;
        font-size: .92rem;
        color: var(--muted);
    }

    .remember input { width: auto; }

    .demo-box {
        margin-top: 1rem;
        padding: .9rem 1rem;
        border-radius: .9rem;
        background: var(--foam);
        color: var(--muted);
        font-size: .85rem;
        line-height: 1.55;
    }

    .demo-box code {
        color: var(--ink);
        font-size: .82rem;
    }
</style>
@endpush

@section('content')
    <main class="login-page">
        <div class="panel login-card">
            <span class="eyebrow">Selamat datang</span>
            <h1>Login</h1>
            <p class="muted" style="margin:0 0 1.25rem">Masuk sebagai admin atau klien undangan.</p>

            @if ($errors->any())
                <div class="error-box">{{ $errors->first() }}</div>
            @endif

            <form method="POST" action="/login" class="form-grid">
                @csrf
                <label>
                    Email
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username">
                </label>
                <label>
                    Password
                    <input type="password" name="password" required autocomplete="current-password">
                </label>
                <label class="remember">
                    <input type="checkbox" name="remember" value="1" @checked(old('remember'))>
                    Ingat saya
                </label>
                <button class="btn btn-primary" type="submit">Masuk</button>
            </form>

            <div class="demo-box">
                Demo admin: <code>admin@undangan.test</code> / <code>password</code><br>
                Demo klien: <code>klien@undangan.test</code> / <code>password</code>
            </div>
        </div>
    </main>
@endsection