@{
    ViewData["Title"] = "Planos e Preços - BCards";
    //var isPreview = ViewBag.IsPreview as bool? ?? false;
    //Layout = isPreview ? "_Layout" : "_UserPageLayout";
    Layout = "_Layout";
}

<div class="container py-5">
    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold mb-3">Escolha o plano ideal para você</h1>
        <p class="lead text-muted">Comece grátis e faça upgrade quando precisar de mais recursos</p>
    </div>

    <div class="row g-4 justify-content-center">
        <!-- Plano Trial -->
        <div class="col-lg-3 col-md-6">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-success bg-opacity-10 text-center py-4">
                    <h4 class="mb-0">Trial Gratuito</h4>
                    <div class="mt-3">
                        <span class="display-4 fw-bold text-success">R$ 0</span>
                        <span class="text-muted">/7 dias</span>
                    </div>
                </div>
                <div class="card-body p-4">
                    <ul class="list-unstyled">
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Até <strong>3 links</strong>
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            1 tema básico
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            7 dias grátis
                        </li>
                        <li class="mb-3">
                            <i class="text-muted me-2">✗</i>
                            <span class="text-muted">Analytics</span>
                        </li>
                        <li class="mb-3">
                            <i class="text-muted me-2">✗</i>
                            <span class="text-muted">Página rápida</span>
                        </li>
                    </ul>
                </div>
                <div class="card-footer bg-transparent p-4">
                    @if (User.Identity?.IsAuthenticated == true)
                    {
                        <a asp-controller="Admin" asp-action="CreatePage" class="btn btn-success w-100">Começar Grátis</a>
                    }
                    else
                    {
                        <a asp-controller="Auth" asp-action="Login" class="btn btn-success w-100">Começar Grátis</a>
                    }
                </div>
            </div>
        </div>

        <!-- Plano Básico -->
        <div class="col-lg-3 col-md-6">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light text-center py-4">
                    <h4 class="mb-0">Básico</h4>
                    <div class="mt-3">
                        <span class="display-4 fw-bold text-primary">R$ 9,90</span>
                        <span class="text-muted">/mês</span>
                    </div>
                </div>
                <div class="card-body p-4">
                    <ul class="list-unstyled">
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            <strong>3 páginas</strong>, 8 links cada
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Temas básicos
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Analytics simples
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            URL personalizada
                        </li>
                        <li class="mb-3">
                            <i class="text-muted me-2">✗</i>
                            <span class="text-muted">Página rápida</span>
                        </li>
                        <li class="mb-3">
                            <i class="text-muted me-2">✗</i>
                            <span class="text-muted">Temas premium</span>
                        </li>
                    </ul>
                </div>
                <div class="card-footer bg-transparent p-4">
                    @if (User.Identity?.IsAuthenticated == true)
                    {
                        <form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
                            <input type="hidden" name="planType" value="Basic" />
                            <button type="submit" class="btn btn-outline-primary w-100">Escolher Básico</button>
                        </form>
                    }
                    else
                    {
                        <a asp-controller="Auth" asp-action="Login" class="btn btn-outline-primary w-100">Escolher Básico</a>
                    }
                </div>
            </div>
        </div>

        <!-- Plano Profissional (Decoy) -->
        <div class="col-lg-3 col-md-6">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-warning bg-opacity-10 text-center py-4">
                    <h4 class="mb-0">Profissional</h4>
                    <div class="mt-3">
                        <span class="display-4 fw-bold text-warning">R$ 24,90</span>
                        <span class="text-muted">/mês</span>
                    </div>
                </div>
                <div class="card-body p-4">
                    <ul class="list-unstyled">
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            <strong>5 páginas</strong>, 20 links cada
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Todos os temas
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Analytics avançado
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Domínio personalizado
                        </li>
                        <li class="mb-3">
                            <i class="text-muted me-2">✗</i>
                            <span class="text-muted">Links ilimitados</span>
                        </li>
                        <li class="mb-3">
                            <i class="text-muted me-2">✗</i>
                            <span class="text-muted">Suporte prioritário</span>
                        </li>
                    </ul>
                </div>
                <div class="card-footer bg-transparent p-4">
                    @if (User.Identity?.IsAuthenticated == true)
                    {
                        <form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
                            <input type="hidden" name="planType" value="Professional" />
                            <button type="submit" class="btn btn-warning w-100">Escolher Profissional</button>
                        </form>
                    }
                    else
                    {
                        <a asp-controller="Auth" asp-action="Login" class="btn btn-warning w-100">Escolher Profissional</a>
                    }
                </div>
            </div>
        </div>

        <!-- Plano Premium (Mais Popular) -->
        <div class="col-lg-3 col-md-6">
            <div class="card h-100 border-primary shadow position-relative">
                <div class="position-absolute top-0 start-50 translate-middle">
                    <span class="badge bg-primary px-3 py-2">Mais Popular</span>
                </div>
                <div class="card-header bg-primary text-white text-center py-4">
                    <h4 class="mb-0">Premium</h4>
                    <div class="mt-3">
                        <span class="display-4 fw-bold">R$ 29,90</span>
                        <span class="opacity-75">/mês</span>
                    </div>
                    <small class="opacity-75">Melhor custo-benefício!</small>
                </div>
                <div class="card-body p-4">
                    <ul class="list-unstyled">
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            <strong>15 páginas</strong>, links ilimitados
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Temas premium
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Analytics completo
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Múltiplos domínios
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Suporte prioritário
                        </li>
                        <li class="mb-3">
                            <i class="text-success me-2">✓</i>
                            Recursos exclusivos
                        </li>
                    </ul>
                </div>
                <div class="card-footer bg-transparent p-4">
                    @if (User.Identity?.IsAuthenticated == true)
                    {
                        <form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
                            <input type="hidden" name="planType" value="Premium" />
                            <button type="submit" class="btn btn-primary w-100 fw-bold">Escolher Premium</button>
                        </form>
                    }
                    else
                    {
                        <a asp-controller="Auth" asp-action="Login" class="btn btn-primary w-100 fw-bold">Escolher Premium</a>
                    }
                </div>
            </div>
        </div>
    </div>

    <!-- Comparação de recursos -->
    <div class="mt-5 pt-5">
        <h2 class="text-center mb-4">Compare todos os recursos</h2>
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>Recursos</th>
                        <th class="text-center">Trial</th>
                        <th class="text-center">Básico</th>
                        <th class="text-center">Profissional</th>
                        <th class="text-center">Premium</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Páginas</td>
                        <td class="text-center">1</td>
                        <td class="text-center">3</td>
                        <td class="text-center">5</td>
                        <td class="text-center"><strong>15</strong></td>
                    </tr>
                    <tr>
                        <td>Links por página</td>
                        <td class="text-center">3</td>
                        <td class="text-center">8</td>
                        <td class="text-center">20</td>
                        <td class="text-center"><strong>Ilimitado</strong></td>
                    </tr>
                    <tr>
                        <td>Temas disponíveis</td>
                        <td class="text-center">1 básico</td>
                        <td class="text-center">Básicos</td>
                        <td class="text-center">Todos</td>
                        <td class="text-center"><strong>Customizáveis</strong></td>
                    </tr>
                    <tr>
                        <td>Analytics</td>
                        <td class="text-center">❌</td>
                        <td class="text-center">Simples</td>
                        <td class="text-center">Avançado</td>
                        <td class="text-center"><strong>Completo</strong></td>
                    </tr>
                    <tr>
                        <td>Domínio personalizado</td>
                        <td class="text-center">❌</td>
                        <td class="text-center">❌</td>
                        <td class="text-center">✅</td>
                        <td class="text-center">✅</td>
                    </tr>
                    <tr>
                        <td>Múltiplos domínios</td>
                        <td class="text-center">❌</td>
                        <td class="text-center">❌</td>
                        <td class="text-center">❌</td>
                        <td class="text-center"><strong>✅</strong></td>
                    </tr>
                    <tr>
                        <td>Suporte prioritário</td>
                        <td class="text-center">❌</td>
                        <td class="text-center">❌</td>
                        <td class="text-center">❌</td>
                        <td class="text-center"><strong>✅</strong></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- FAQ -->
    <div class="mt-5 pt-5">
        <h2 class="text-center mb-4">Perguntas Frequentes</h2>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion" id="faqAccordion">
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="faq1">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                                Posso cancelar minha assinatura a qualquer momento?
                            </button>
                        </h3>
                        <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Sim! Você pode cancelar sua assinatura a qualquer momento. O cancelamento será aplicado no final do período de cobrança atual.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="faq2">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                                Como funciona o domínio personalizado?
                            </button>
                        </h3>
                        <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Com os planos Profissional e Premium, você pode conectar seu próprio domínio (ex: meusite.com) à sua página BCards.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="faq3">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                                O que acontece se eu exceder o limite de links?
                            </button>
                        </h3>
                        <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Se você atingir o limite de links do seu plano, será sugerido fazer upgrade. Seus links existentes continuarão funcionando normalmente.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if (TempData["Success"] != null)
{
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div class="toast show" role="alert">
            <div class="toast-header">
                <i class="fas fa-check-circle text-success me-2"></i>
                <strong class="me-auto">Sucesso</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                @TempData["Success"]
            </div>
        </div>
    </div>
}

@if (TempData["Error"] != null)
{
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div class="toast show" role="alert">
            <div class="toast-header">
                <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                <strong class="me-auto">Atenção</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                @TempData["Error"]
            </div>
        </div>
    </div>
}

@if (TempData["Info"] != null)
{
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div class="toast show" role="alert">
            <div class="toast-header">
                <i class="fas fa-exclamation-triangle text-primary me-2"></i>
                <strong class="me-auto">Atenção</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                @TempData["Info"]
            </div>
        </div>
    </div>
}