<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Anmelden – Veranstaltungs-App</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700" rel="stylesheet"/>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Instrument Sans', sans-serif;
            background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
            padding: 24px;
        }
        .card {
            background: white; border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.10);
            padding: 40px 36px; width: 100%; max-width: 420px;
        }
        .logo-link {
            display: block; text-align: center;
            font-size: 1.3em; font-weight: 800; color: #1a1a2e;
            text-decoration: none; margin-bottom: 8px; letter-spacing: -0.02em;
        }
        .logo-link span { color: #667eea; }
        h1 { font-size: 1.5em; font-weight: 700; color: #1a1a2e; text-align: center; margin-bottom: 4px; }
        .subtitle { text-align: center; color: #9ca3af; font-size: 0.875em; margin-bottom: 28px; }
        .field { margin-bottom: 18px; }
        label { display: block; font-size: 0.85em; font-weight: 600; color: #374151; margin-bottom: 6px; }
        input[type="email"], input[type="password"] {
            width: 100%; padding: 10px 14px;
            border: 1.5px solid #e5e7eb; border-radius: 8px;
            font-size: 0.9em; color: #1a1a2e;
            transition: border-color 0.2s, box-shadow 0.2s; outline: none;
        }
        input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }
        .row-between {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 22px; gap: 10px;
        }
        .remember-label { display: flex; align-items: center; gap: 6px; font-size: 0.82em; color: #6b7280; cursor: pointer; }
        .forgot-link { font-size: 0.82em; color: #667eea; text-decoration: none; font-weight: 600; }
        .forgot-link:hover { text-decoration: underline; }
        .btn-submit {
            width: 100%; padding: 11px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white; font-size: 0.95em; font-weight: 700;
            border: none; border-radius: 8px; cursor: pointer;
            transition: opacity 0.2s; margin-bottom: 16px;
        }
        .btn-submit:hover { opacity: 0.9; }
        .divider { border: none; border-top: 1px solid #f3f4f6; margin: 20px 0; }
        .register-hint { text-align: center; font-size: 0.85em; color: #6b7280; }
        .register-hint a { color: #667eea; font-weight: 600; text-decoration: none; }
        .register-hint a:hover { text-decoration: underline; }
        .demo-box {
            margin-top: 20px; background: #f0f4ff;
            border: 1px solid #c7d2fe; border-radius: 8px; padding: 12px 14px;
        }
        .demo-box p { font-size: 0.78em; color: #4338ca; font-weight: 600; margin-bottom: 6px; }
        .demo-box span { display: block; font-size: 0.78em; color: #4f46e5; margin-bottom: 2px; }
        .alert-error {
            background: #fef2f2; border: 1px solid #fecaca;
            border-radius: 8px; padding: 12px 14px; margin-bottom: 18px;
        }
        .alert-error p { font-size: 0.83em; color: #dc2626; }
    </style>
</head>
<body>
    <div class="card">
        <a href="{{ url('/') }}" class="logo-link">Veranstaltungs<span>-App</span></a>
        <h1>Willkommen zurück</h1>
        <p class="subtitle">Melden Sie sich an, um fortzufahren</p>

        @if ($errors->any())
            <div class="alert-error">
                @foreach ($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('login.post') }}">
            @csrf
            <div class="field">
                <label for="email">E-Mail Adresse</label>
                <input type="email" id="email" name="email"
                    value="{{ old('email') }}"
                    placeholder="name@example.com"
                    required autocomplete="email">
            </div>
            <div class="field">
                <label for="password">Passwort</label>
                <input type="password" id="password" name="password"
                    placeholder="Ihr Passwort"
                    required autocomplete="current-password">
            </div>
            <div class="row-between">
                <label class="remember-label">
                    <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                    Angemeldet bleiben
                </label>
                <a href="{{ route('forgot-password') }}" class="forgot-link">Passwort vergessen?</a>
            </div>
            <button type="submit" class="btn-submit">Anmelden</button>
        </form>

        <hr class="divider">
        <p class="register-hint">
            Noch kein Konto? <a href="{{ route('register') }}">Jetzt registrieren</a>
        </p>
        <div class="demo-box">
            <p>Demo-Konten:</p>
            <span>👤 user@example.com / password123</span>
            <span>🎭 organizer@example.com / password123</span>
            <span>👨‍💼 admin@example.com / password123</span>
        </div>
    </div>
</body>
</html>
