<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin Login | Survive</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-main: #060913;
            --bg-panel: #0c1022;
            --line: #2c3568;
            --text: #f4f7ff;
            --muted: #98a4cd;
            --lava: #ff5a1f;
            --gold: #ffcc33;
            --violet: #6d28d9;
            --green: #22c55e;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: 'Rajdhani', sans-serif;
            color: var(--text);
            background:
                radial-gradient(900px 500px at 10% -10%, #6d28d955 0%, transparent 60%),
                radial-gradient(800px 500px at 100% 120%, #ff5a1f3d 0%, transparent 65%),
                linear-gradient(120deg, #05070f 0%, #0b1030 45%, #12061c 100%);
            display: grid;
            place-items: center;
            padding: 24px;
        }

        .noise {
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: 0.08;
            background-image: radial-gradient(#fff 0.5px, transparent 0.5px);
            background-size: 3px 3px;
        }

        .layout {
            width: min(980px, 100%);
            display: grid;
            grid-template-columns: 1.05fr 1fr;
            border: 1px solid #2a2f4f;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 24px 90px #000a;
            animation: glowIn 500ms ease-out;
            backdrop-filter: blur(4px);
        }

        .showcase {
            padding: 34px 30px;
            background:
                linear-gradient(160deg, #130d38 0%, #0a132d 45%, #1f0b1c 100%);
            border-right: 1px solid #2b3264;
            position: relative;
            overflow: hidden;
        }

        .showcase::after {
            content: '';
            position: absolute;
            width: 240px;
            height: 240px;
            border-radius: 999px;
            top: -40px;
            right: -40px;
            background: radial-gradient(circle, #ffcc3350 0%, transparent 70%);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #f9731690;
            background: #f9731622;
            border-radius: 999px;
            padding: 6px 12px;
            font-weight: 700;
            letter-spacing: 0.6px;
        }

        h1 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2rem, 6vw, 3.5rem);
            line-height: 0.95;
            letter-spacing: 1px;
            margin: 18px 0 8px;
            text-transform: uppercase;
        }

        .subtitle {
            color: var(--muted);
            margin: 0 0 26px;
            font-size: 1.15rem;
        }

        .cards {
            display: grid;
            gap: 12px;
        }

        .card {
            border: 1px solid #33407a;
            border-radius: 14px;
            background: #090f2290;
            padding: 12px 14px;
        }

        .card strong {
            color: var(--gold);
            font-size: 1.35rem;
            margin-right: 8px;
        }

        .login {
            background: linear-gradient(180deg, #0d1227, #0a0e1f);
            padding: 34px 28px;
        }

        .login h2 {
            margin: 0 0 4px;
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
            font-size: 2.1rem;
        }

        .login p {
            margin: 0 0 20px;
            color: var(--muted);
            font-size: 1.05rem;
        }

        .alert {
            margin: 0 0 14px;
            border-radius: 12px;
            border: 1px solid #ef4444;
            background: #7f1d1d66;
            color: #fee2e2;
            padding: 10px 12px;
            font-weight: 600;
        }

        .group { margin-bottom: 12px; }

        label {
            display: block;
            font-size: 0.96rem;
            margin-bottom: 6px;
            color: #c4cff6;
            letter-spacing: 0.4px;
        }

        input {
            width: 100%;
            border: 1px solid #394484;
            background: #090d1e;
            color: #f5f7ff;
            border-radius: 12px;
            padding: 12px 14px;
            font: inherit;
            font-weight: 700;
            outline: none;
        }

        input:focus {
            border-color: #8b5cf6;
            box-shadow: 0 0 0 3px #8b5cf633;
        }

        .btn {
            margin-top: 10px;
            width: 100%;
            border: 0;
            border-radius: 12px;
            padding: 13px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            cursor: pointer;
            color: #111827;
            background: linear-gradient(90deg, var(--gold), #ff9f1a);
            transition: transform 140ms ease, filter 140ms ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.03);
        }

        .hint {
            margin-top: 14px;
            font-size: 0.95rem;
            color: #97a3d0;
            border-top: 1px dashed #344071;
            padding-top: 12px;
        }

        .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--green);
            border-radius: 999px;
            box-shadow: 0 0 10px var(--green);
            margin-right: 6px;
        }

        @keyframes glowIn {
            from { opacity: 0; transform: translateY(10px) scale(0.99); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        @media (max-width: 860px) {
            .layout { grid-template-columns: 1fr; }
            .showcase { border-right: 0; border-bottom: 1px solid #2b3264; }
        }

        @media (max-width: 560px) {
            body {
                padding: 10px;
            }

            .layout {
                border-radius: 16px;
            }

            .showcase,
            .login {
                padding: 18px 14px;
            }

            .subtitle {
                font-size: 1rem;
            }

            .login h2 {
                font-size: 1.9rem;
            }
        }

        @media (max-height: 760px) {
            body {
                display: block;
                min-height: auto;
                padding: 12px;
            }

            .layout {
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
    <div class="noise" aria-hidden="true"></div>

    <main class="layout">
        <section class="showcase">
            <span class="badge">ADMIN ACCESS</span>
            <h1>Survive Control Center</h1>
            <p class="subtitle">Gerencie rodadas, jogadores e prêmios do jogo em tempo real.</p>

            <div class="cards">
                <article class="card">
                    <strong>+8.524</strong> jogadores ativos na última rodada
                </article>
                <article class="card">
                    <strong>R$ 42.000</strong> prêmio médio das finais
                </article>
                <article class="card">
                    <strong>152</strong> rodadas processadas com sucesso
                </article>
            </div>
        </section>

        <section class="login">
            <h2>Login do Admin</h2>
            <p><span class="dot"></span>Painel interno protegido</p>

            @if ($errors->has('login'))
                <div class="alert">{{ $errors->first('login') }}</div>
            @endif

            <form method="post" action="{{ route('admin.login.submit') }}">
                @csrf
                <div class="group">
                    <label for="email">E-mail administrativo</label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" placeholder="admin@survive.local" required>
                </div>
                <div class="group">
                    <label for="password">Senha</label>
                    <input id="password" type="password" name="password" placeholder="********" required>
                </div>
                <button class="btn" type="submit">Entrar no painel</button>
            </form>

            <div class="hint">
                Credenciais padrão para teste: admin@survive.local / admin123456<br>
                Você pode alterar no arquivo .env com ADMIN_EMAIL e ADMIN_PASSWORD.
            </div>
        </section>
    </main>
</body>
</html>
