@{
    ViewBag.Title = "Login / Registro";
}
@section Styles {
    <style>
        .login-container {
            max-width: 500px;
            margin: 60px auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 30px;
            text-align: center;
        }

        .login-icon {
            font-size: 2.5rem;
            color: var(--suma-red);
            margin-bottom: 25px;
        }

        .login-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--suma-red);
            margin-bottom: 15px;
        }

        .login-subtitle {
            font-size: 16px;
            color: var(--suma-dark-gray);
            margin-bottom: 30px;
        }

        .login-button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            color: #444;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: 500;
            width: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

            .login-button:hover {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            .login-button i {
                margin-right: 10px;
                color: #4285F4;
            }

        .login-footer {
            margin-top: 30px;
            font-size: 14px;
            color: var(--suma-dark-gray);
        }

            .login-footer a {
                color: var(--suma-red);
                text-decoration: none;
            }

                .login-footer a:hover {
                    text-decoration: underline;
                }

        .video-icon-container {
            font-size: 4rem;
            margin-bottom: 20px;
            color: var(--suma-red);
        }

            .video-icon-container i {
                filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
            }
    </style>
}

<div class="login-container">
    <div class="login-icon">
        <i class="bi bi-play-btn-fill"></i>
    </div>
    <h1 class="login-title">Bem-vindo ao SumaTube</h1>
    <p class="login-subtitle">Faça login para criar resumos inteligentes de vídeos do YouTube</p>
    <div class="video-icon-container">
        <i class="bi bi-file-earmark-text"></i>
        <i class="bi bi-arrow-left-right mx-2"></i>
        <i class="bi bi-youtube"></i>
    </div>
    @using (Html.BeginForm("ExternalLoginGoogle", "Login", new { provider = "Google" }, FormMethod.Post, true, new { id = "googleLoginForm" }))
    {
        @Html.AntiForgeryToken()
        <button type="submit" class="login-button">
            <i class="bi bi-google"></i>
            Continuar/Entrar com Google
        </button>
    }
    <div class="login-footer">
        Ao fazer login, você concorda com nossos <a href="/termos">Termos de Serviço</a> e <a href="/privacidade">Política de Privacidade</a>
    </div>
</div>