@model QRRapidoApp.Models.ViewModels.UpgradeViewModel
@{
    ViewData["Title"] = "QR Rapido Premium";
}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Hero Section -->
            <div class="text-center mb-5">
                <h1 class="display-4 text-gradient">
                    <i class="fas fa-rocket"></i> QR Rapido Premium
                </h1>
                <p class="lead text-muted">
                    Acelere sua produtividade com o gerador de QR mais rápido do mundo
                </p>
                <div class="badge bg-success fs-6 p-2">
                    <i class="fas fa-bolt"></i> 3x mais rápido que a concorrência
                </div>
            </div>

            <!-- Current Status -->
            @if (Model.IsAdFreeActive)
            {
                <div class="alert alert-info border-0 shadow-sm mb-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6><i class="fas fa-info-circle"></i> Status Atual</h6>
                            <p class="mb-0">
                                Você tem <strong>@Model.DaysUntilAdExpiry dias</strong> restantes sem anúncios.
                                Upgrade agora e tenha acesso premium para sempre!
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="badge bg-success p-2">
                                @Model.DaysUntilAdExpiry dias restantes
                            </div>
                        </div>
                    </div>
                </div>
            }

            <!-- Pricing Card -->
            <div class="row justify-content-center mb-5">
                <div class="col-md-6">
                    <div class="card shadow-lg border-warning">
                        <div class="card-header bg-warning text-dark text-center">
                            <h3 class="mb-0">
                                <i class="fas fa-crown"></i> QR Rapido Premium
                            </h3>
                            <small>O plano mais popular</small>
                        </div>
                        <div class="card-body text-center">
                            <div class="display-3 text-warning fw-bold mb-2">
                                R$ @Model.PremiumPrice.ToString("0.00")
                            </div>
                            <p class="text-muted">por mês</p>
                            
                            <div class="list-group list-group-flush mb-4">
                                <div class="list-group-item border-0">
                                    <i class="fas fa-infinity text-success me-2"></i>
                                    <strong>QR codes ilimitados</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-bolt text-success me-2"></i>
                                    <strong>Geração ultra-rápida (0.4s)</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-ban text-success me-2"></i>
                                    <strong>Sem anúncios para sempre</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-magic text-success me-2"></i>
                                    <strong>QR codes dinâmicos</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-chart-line text-success me-2"></i>
                                    <strong>Analytics em tempo real</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-headset text-success me-2"></i>
                                    <strong>Suporte prioritário</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-code text-success me-2"></i>
                                    <strong>API para desenvolvedores</strong>
                                </div>
                            </div>

                            <button id="upgrade-btn" class="btn btn-warning btn-lg w-100 mb-3">
                                <i class="fas fa-rocket"></i> Fazer Upgrade Agora
                                <div class="spinner-border spinner-border-sm ms-2 d-none" role="status"></div>
                            </button>
                            
                            <small class="text-muted">
                                <i class="fas fa-shield-alt"></i> Pagamento seguro via Stripe
                                <br>
                                <i class="fas fa-times-circle"></i> Cancele quando quiser
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Feature Comparison -->
            <div class="card shadow-sm mb-5">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-balance-scale"></i> Comparação de Planos
                    </h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Recurso</th>
                                    <th class="text-center">Free</th>
                                    <th class="text-center bg-warning text-dark">Premium</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>QR codes por dia</td>
                                    <td class="text-center">50</td>
                                    <td class="text-center"><i class="fas fa-infinity text-success"></i> Ilimitado</td>
                                </tr>
                                <tr>
                                    <td>Velocidade de geração</td>
                                    <td class="text-center">1.2s</td>
                                    <td class="text-center"><strong class="text-success">0.4s</strong></td>
                                </tr>
                                <tr>
                                    <td>Anúncios</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i> Sem anúncios</td>
                                </tr>
                                <tr>
                                    <td>QR codes dinâmicos</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i></td>
                                </tr>
                                <tr>
                                    <td>Analytics detalhados</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i></td>
                                </tr>
                                <tr>
                                    <td>Suporte prioritário</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i></td>
                                </tr>
                                <tr>
                                    <td>API access</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Speed Demonstration -->
            <div class="card shadow-sm mb-5">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-stopwatch"></i> Demonstração de Velocidade
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-4">
                            <div class="card border-danger">
                                <div class="card-body">
                                    <h5 class="text-danger">Concorrentes</h5>
                                    <div class="display-4 text-danger">4.5s</div>
                                    <p class="text-muted">Tempo médio</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-primary">
                                <div class="card-body">
                                    <h5 class="text-primary">QR Rapido Free</h5>
                                    <div class="display-4 text-primary">1.2s</div>
                                    <p class="text-muted">3x mais rápido</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-success">
                                <div class="card-body">
                                    <h5 class="text-success">QR Rapido Premium</h5>
                                    <div class="display-4 text-success">0.4s</div>
                                    <p class="text-muted">11x mais rápido!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- FAQ -->
            <div class="card shadow-sm">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-question-circle"></i> Perguntas Frequentes
                    </h4>
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    Posso cancelar a qualquer momento?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show">
                                <div class="accordion-body">
                                    Sim! Você pode cancelar sua assinatura a qualquer momento. Não há taxas de cancelamento 
                                    e você manterá o acesso premium até o final do período já pago.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    O que são QR codes dinâmicos?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse">
                                <div class="accordion-body">
                                    QR codes dinâmicos permitem que você altere o conteúdo do QR após ele ter sido criado, 
                                    sem precisar gerar um novo código. Perfeito para campanhas de marketing e uso empresarial.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    Como funciona o suporte prioritário?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse">
                                <div class="accordion-body">
                                    Usuários premium recebem resposta em até 2 horas úteis por email, 
                                    acesso ao chat direto e suporte técnico especializado.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        document.getElementById('upgrade-btn').addEventListener('click', async function() {
            const btn = this;
            const spinner = btn.querySelector('.spinner-border');
            
            btn.disabled = true;
            spinner.classList.remove('d-none');
            
            try {
                const response = await fetch('/Premium/CreateCheckout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // Track conversion attempt
                    if (typeof gtag !== 'undefined') {
                        gtag('event', 'begin_checkout', {
                            'event_category': 'Premium',
                            'value': @Model.PremiumPrice,
                            'currency': 'BRL'
                        });
                    }
                    
                    window.location.href = result.url;
                } else {
                    alert('Erro ao processar pagamento: ' + result.error);
                }
            } catch (error) {
                console.error('Erro:', error);
                alert('Erro ao processar pagamento. Tente novamente.');
            } finally {
                btn.disabled = false;
                spinner.classList.add('d-none');
            }
        });
        
        // Track page view
        if (typeof gtag !== 'undefined') {
            gtag('event', 'page_view', {
                'page_title': 'Premium Upgrade',
                'page_location': window.location.href
            });
        }
    </script>
}