@{
    ViewData["Title"] = "Sites";
}


<div class="container">
    <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-md-6">
            <div class="card shadow-lg">
                <div class="card-body text-center p-5">
                    <h2 class="card-title mb-4">Bem-vindo</h2>
                    <p class="card-text text-muted mb-4">
                        Faça login com sua conta Microsoft para acessar o chat.
                    </p>

                    <form asp-action="FacebookLogin" method="get">
                        <button type="submit" class="btn btn-primary btn-block">
                            <i class="fab fa-facebook"></i> Login com Facebook
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .card {
            border: none;
            border-radius: 15px;
        }

        .btn-primary {
            background-color: #2f2f2f;
            border: none;
            padding: 12px;
            transition: all 0.3s;
        }

            .btn-primary:hover {
                background-color: #404040;
                transform: translateY(-2px);
            }
    </style>
}

@section Scripts {
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
}