@{
    ViewData["Title"] = "Login";
    var returnUrl = ViewBag.ReturnUrl ?? "/";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white text-center">
                    <h4 class="mb-0">
                        <i class="fas fa-sign-in-alt"></i> Entrar
                    </h4>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <p class="text-muted">Entre com sua conta e ganhe:</p>
                        <div class="row text-center">
                            <div class="col-12 mb-2">
                                <div class="badge bg-success p-2 w-100">
                                    <i class="fas fa-crown"></i> 30 dias sem anúncios
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="badge bg-primary p-2 w-100">
                                    <i class="fas fa-infinity"></i> 50 QR codes/dia
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="badge bg-info p-2 w-100">
                                    <i class="fas fa-history"></i> Histórico de QR codes
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-grid gap-3">
                        <a href="/Account/LoginGoogle?returnUrl=@returnUrl" class="btn btn-danger btn-lg">
                            <i class="fab fa-google"></i> Entrar com Google
                        </a>
                        
                        <a href="/Account/LoginMicrosoft?returnUrl=@returnUrl" class="btn btn-primary btn-lg">
                            <i class="fab fa-microsoft"></i> Entrar com Microsoft
                        </a>
                    </div>

                    <hr class="my-4">
                    
                    <div class="text-center">
                        <h6 class="text-success">
                            <i class="fas fa-gift"></i> Oferta Especial!
                        </h6>
                        <p class="small text-muted">
                            Ao fazer login, você ganha automaticamente <strong>30 dias sem anúncios</strong> 
                            e pode gerar até <strong>50 QR codes por dia</strong> gratuitamente.
                        </p>
                    </div>

                    <div class="text-center mt-3">
                        <small class="text-muted">
                            Não cadastramos você sem sua permissão. <br>
                            <a href="/Home/Privacy" class="text-primary">Política de Privacidade</a>
                        </small>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <a href="/" class="text-muted">
                    <i class="fas fa-arrow-left"></i> Voltar ao gerador
                </a>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        // Track login attempts
        document.querySelectorAll('[href*="Login"]').forEach(link => {
            link.addEventListener('click', () => {
                if (typeof gtag !== 'undefined') {
                    gtag('event', 'login_attempt', {
                        'event_category': 'Authentication',
                        'method': link.textContent.includes('Google') ? 'google' : 'microsoft'
                    });
                }
            });
        });
    </script>
}