<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Combo Shark</title>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            color: #fff;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            background: radial-gradient(circle at 20% 20%, rgba(0, 157, 255, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(0, 157, 255, 0.1) 0%, transparent 60%),
                #000000;
        }

        .main-container {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .navbar {
            position: fixed;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 20px 40px;
            border-radius: 20px;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 1200px;
            box-shadow: 0 0 20px rgba(0, 157, 255, 0.3);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.4em;
            font-weight: 600;
        }

        .logo img {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

        .logo span {
            color: #00bfff;
            text-shadow: 0 0 10px rgba(0, 191, 255, 0.5),
                0 0 20px rgba(0, 191, 255, 0.3),
                0 0 30px rgba(0, 191, 255, 0.2);
        }

        .nav-links {
            display: flex;
            gap: 30px;
        }

        .nav-links a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #00bfff;
        }

        .login-icon {
            cursor: pointer;
            transition: transform 0.3s;
        }

        .login-icon:hover {
            transform: scale(1.1);
            color: #00bfff;
        }

        .login-icon .material-icons {
            color: #fff;
        }

        .login-icon:hover .material-icons {
            color: #00bfff;
        }

        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 0 20px rgba(0, 157, 255, 0.3);
        }

        .login-title {
            font-size: 2em;
            margin-bottom: 30px;
            color: #00bfff;
            text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
        }

        .discord-button {
            background: #5865F2;
            color: white;
            padding: 15px 30px;
            border-radius: 10px;
            border: none;
            font-size: 1.1em;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            margin: 0 auto;
            justify-content: center;
        }

        .discord-button:hover {
            background: #4752c4;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(88, 101, 242, 0.4);
        }

        .discord-icon {
            width: 24px;
            height: 24px;
        }

        .user-profile {
            position: relative;
            cursor: pointer;
        }

        .profile-trigger {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            padding: 8px 15px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .profile-trigger:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .profile-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .profile-info {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .profile-display-name {
            font-weight: 600;
            color: #fff;
        }

        .profile-username {
            font-size: 0.8em;
            color: rgba(255, 255, 255, 0.7);
        }

        .profile-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 10px;
            margin-top: 10px;
            display: none;
            min-width: 150px;
        }

        .user-profile.active .profile-dropdown {
            display: block;
        }

        .logout-button {
            display: flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            color: #ff4444;
            padding: 8px 15px;
            width: 100%;
            cursor: pointer;
            border-radius: 5px;
            transition: background 0.3s ease;
        }

        .logout-button:hover {
            background: rgba(255, 68, 68, 0.1);
        }

        .logout-button .material-icons {
            font-size: 20px;
        }

        /* Media Queries para dispositivos móveis */
        @media (max-width: 768px) {
            .navbar {
                width: 90%;
                padding: 15px 20px;
                top: 20px;
            }

            .nav-links {
                display: none;
            }

            .logo {
                font-size: 1.2em;
            }

            .login-container {
                width: 85%;
                padding: 30px 20px;
            }

            .login-title {
                font-size: 1.6em;
            }

            .discord-button {
                padding: 12px 20px;
                font-size: 1em;
                width: 100%;
            }
        }

        /* Ajustes específicos para iOS */
        @supports (-webkit-touch-callout: none) {
            .navbar,
            .login-container {
                backdrop-filter: none;
                background: rgba(0, 0, 0, 0.8);
            }
        }

        /* Esconder o botão de menu em telas maiores */
        .menu-toggle {
            display: none;  /* Esconde por padrão em desktop */
        }

        @media screen and (max-width: 768px) {
            .menu-toggle {
                display: block;  /* Mostra apenas em mobile */
                background: none;
                border: none;
                color: white;
                cursor: pointer;
                padding: 5px;
            }

            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                padding: 20px;
                border-radius: 0 0 20px 20px;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                margin-top: 10px;
            }

            .nav-links.active {
                display: flex;
            }
        }
    </style>
</head>

<body>
    <div class="main-container">
        <nav class="navbar">
            <div class="logo">
                Combo <span>Shark</span>
            </div>
            <button class="menu-toggle">
                <span class="material-icons">menu</span>
            </button>
            <div class="nav-links">
                <a href="/">Início</a>
                <a href="/#planos">Planos</a>
                <a href="/termos">Termos</a>
                <a href="https://discord.gg/WJMF6YSRyv">Discord</a>
            </div>
            <a href="/login" class="login-icon">
                <span class="material-icons">person</span>
            </a>
        </nav>

        <div class="login-container">
            <h1 class="login-title">Comece com o seu login</h1>
            <button class="discord-button" onclick="Auth.loginWithDiscord()">
                <svg class="discord-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.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.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.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.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                </svg>
                Entrar com Discord
            </button>
        </div>
    </div>
    <script src="/js/auth.js"></script>
    <script>
        document.querySelector('.menu-toggle').addEventListener('click', function() {
            document.querySelector('.nav-links').classList.toggle('active');
        });
    </script>
</body>

</html>