<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login — PES League</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.35.0/dist/tabler-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@700;800;900&display=swap" rel="stylesheet">
    <style>
        body { margin:0; font-family:'Inter',sans-serif; background:#f1f5f9; min-height:100vh; display:flex; align-items:center; justify-content:center; }
        .login-wrap { width:100%; max-width:440px; padding:16px; }
        .login-card { background:#fff; border-radius:20px; padding:32px 28px; box-shadow:0 8px 40px rgba(15,23,42,.12); border:1px solid #e8edf5; }
        .brand-icon { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#1d4ed8,#3b82f6); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:17px; font-family:'Plus Jakarta Sans',sans-serif; margin:0 auto 14px; }
        .btn-discord { width:100%; background:#5865F2; color:#fff; border:none; border-radius:12px; padding:14px 20px; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:all .2s; text-decoration:none; margin-bottom:10px; }
        .btn-discord:hover { background:#4752c4; box-shadow:0 4px 16px rgba(88,101,242,.4); color:#fff; }
        .divider { display:flex; align-items:center; gap:12px; margin:18px 0; }
        .divider::before, .divider::after { content:''; flex:1; height:1px; background:#e2e8f0; }
        .divider span { font-size:12px; color:#94a3b8; font-weight:600; }
        .feature-item { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f8fafc; font-size:13px; color:#64748b; }
        .feature-item:last-child { border:none; }
        .feature-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
        .alert-box { padding:12px 16px; border-radius:10px; font-size:13px; margin-bottom:14px; }
        .alert-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
        @media(max-width:480px) {
            .login-wrap { padding:12px; }
            .login-card { padding:24px 20px; border-radius:16px; }
        }
    </style>
</head>
<body>
    <div class="login-wrap">
        <!-- Card -->
        <div class="login-card">
            <div class="text-center mb-4">
                <div class="brand-icon">PL</div>
                <h1 style="font-size:22px;font-weight:900;color:#0f172a;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:4px">PES League</h1>
                <p style="font-size:13px;color:#64748b;margin:0">Platform kompetitif PES 6 PS2</p>
            </div>

            @if(session('error'))
            <div class="alert-box alert-error">
                <i class="ti ti-alert-circle"></i> {{ session('error') }}
            </div>
            @endif

            <a href="{{ route('auth.discord') }}" class="btn-discord">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
                </svg>
                Masuk dengan Discord
            </a>

            {{-- Steam login — hidden for now, uncomment when STEAM_API_KEY is configured
            <a href="{{ route('auth.steam') }}" class="btn-steam">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-4.6 0-8.45-3.08-9.64-7.27l3.83 1.58a2.84 2.84 0 0 0 2.78 2.27c1.56 0 2.83-1.27 2.83-2.83v-.13l3.4-2.43h.08c2.08 0 3.77-1.69 3.77-3.77S17.36 5.65 15.28 5.65s-3.77 1.69-3.77 3.77v.05l-2.37 3.46-.16-.01c-.59 0-1.14.18-1.59.49L2 11.2C2.43 6.05 6.73 2 12 2M8.28 17.17c.8.33 1.72-.04 2.05-.84.33-.8-.05-1.71-.83-2.04l-1.28-.53c.49-.18 1.04-.19 1.56.03.53.21.94.62 1.15 1.15.22.52.22 1.1 0 1.62-.43 1.08-1.7 1.6-2.78 1.15-1.08-.43-1.6-1.7-1.15-2.78l1.28.53c-.33.8.04 1.71.84 2.04M15.28 7.2c1.38 0 2.5 1.12 2.5 2.5 0 1.38-1.12 2.5-2.5 2.5-1.38 0-2.5-1.12-2.5-2.5 0-1.38 1.12-2.5 2.5-2.5m0 .5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"/>
                </svg>
                Masuk dengan Steam
            </a>
            --}}

            <div class="divider"><span>Pilih yang kamu punya</span></div>

            <div>
                @foreach([
                    ['🔗','Link Akun','Punya Discord dan Steam? Hubungkan keduanya ke satu akun','#eff6ff','#1d4ed8'],
                    ['⚡','Cepat','Login satu klik, langsung bisa main','#f0fdf4','#16a34a'],
                    ['🎮','Terintegrasi','Room Discord dibuat otomatis saat match ditemukan','#fef9c3','#ca8a04'],
                ] as [$ico,$title,$desc,$bg,$c])
                <div class="feature-item">
                    <div class="feature-icon" style="background:{{ $bg }};color:{{ $c }}">{{ $ico }}</div>
                    <div>
                        <div style="font-weight:600;color:#0f172a;font-size:13px">{{ $title }}</div>
                        <div style="font-size:12px;color:#94a3b8">{{ $desc }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <p style="text-align:center;font-size:11px;color:#94a3b8;margin-top:16px">
            Platform ini tidak mendistribusikan game, BIOS PS2, atau emulator.
        </p>
    </div>
</body>
</html>
