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

@section Styles {
    <style type="text/css">
        .plans-header {
            background-color: var(--suma-beige);
            padding: 3rem 0;
            border-radius: 0 0 50% 50% / 20px;
            margin-bottom: 3rem;
        }

        .pricing-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            height: 100%;
            border: 2px solid transparent;
        }

            .pricing-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            }

            .pricing-card.popular {
                border-color: var(--suma-red);
                position: relative;
            }

        .popular-badge {
            position: absolute;
            top: 0;
            right: 0;
            background-color: var(--suma-red);
            color: white;
            padding: 5px 15px;
            font-size: 0.8rem;
            border-radius: 0 12px 0 12px;
        }

        .pricing-header {
            text-align: center;
            padding: 1.5rem;
            border-bottom: 1px solid var(--suma-gray);
        }

        .pricing-price {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 1rem 0;
            color: var(--suma-red);
        }

        .pricing-period {
            font-size: 0.9rem;
            color: var(--suma-dark-gray);
        }

        .pricing-features {
            padding: 1.5rem;
        }

        .pricing-feature {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

            .pricing-feature i {
                color: var(--suma-red);
                margin-right: 10px;
            }

            .pricing-feature.disabled {
                color: var(--suma-dark-gray);
                text-decoration: line-through;
            }

        .pricing-action {
            padding: 1.5rem;
            text-align: center;
        }

        .btn-outline-red {
            color: var(--suma-red);
            border-color: var(--suma-red);
        }

            .btn-outline-red:hover {
                background-color: var(--suma-red);
                color: white;
            }

        .faq-item {
            margin-bottom: 1.5rem;
        }

        .faq-question {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--suma-red);
        }
    </style>
}

<!-- Header da página -->
<div class="plans-header">
    <div class="container text-center">
        <h1 class="display-4 mb-3">Planos de Assinatura</h1>
        <p class="lead mb-4">Escolha o plano ideal para suas necessidades de resumo de vídeos</p>
        <div class="d-flex justify-content-center">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-light active" id="monthlyBtn">Mensal</button>
                <button type="button" class="btn btn-light" id="yearlyBtn">Anual (20% desconto)</button>
            </div>
        </div>
    </div>
</div>

<!-- Cards de planos -->
<div class="container mb-5">
    <div class="row">
        <!-- Plano Gratuito -->
        <div class="col-md-4 mb-4">
            <div class="pricing-card">
                <div class="pricing-header">
                    <h3>Gratuito</h3>
                    <div class="pricing-price">R$ 0</div>
                    <div class="pricing-period">para sempre</div>
                </div>
                <div class="pricing-features">
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>3 resumos por mês</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Resumos básicos</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Vídeos de até 10 minutos</span>
                    </div>
                    <div class="pricing-feature disabled">
                        <i class="bi bi-x-circle"></i>
                        <span>Download de resumos</span>
                    </div>
                    <div class="pricing-feature disabled">
                        <i class="bi bi-x-circle"></i>
                        <span>Transcrição completa</span>
                    </div>
                    <div class="pricing-feature disabled">
                        <i class="bi bi-x-circle"></i>
                        <span>Suporte prioritário</span>
                    </div>
                </div>
                <div class="pricing-action">
                    <a href="#" class="btn btn-outline-red btn-lg btn-block">Começar grátis</a>
                </div>
            </div>
        </div>

        <!-- Plano Premium -->
        <div class="col-md-4 mb-4">
            <div class="pricing-card popular">
                <div class="popular-badge">Mais popular</div>
                <div class="pricing-header">
                    <h3>Premium</h3>
                    <div class="pricing-price" id="premiumPrice">R$ 29,90</div>
                    <div class="pricing-period" id="premiumPeriod">por mês</div>
                </div>
                <div class="pricing-features">
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Resumos ilimitados</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Resumos detalhados</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Vídeos de até 3 horas</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Download de resumos (PDF)</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Transcrição completa</span>
                    </div>
                    <div class="pricing-feature disabled">
                        <i class="bi bi-x-circle"></i>
                        <span>Suporte prioritário</span>
                    </div>
                </div>
                <div class="pricing-action">
                    <a href="#" class="btn btn-primary btn-lg btn-block">Assinar agora</a>
                </div>
            </div>
        </div>

        <!-- Plano Pro -->
        <div class="col-md-4 mb-4">
            <div class="pricing-card">
                <div class="pricing-header">
                    <h3>Profissional</h3>
                    <div class="pricing-price" id="proPrice">R$ 59,90</div>
                    <div class="pricing-period" id="proPeriod">por mês</div>
                </div>
                <div class="pricing-features">
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Tudo do plano Premium</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Resumos para vídeos de qualquer duração</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Análise avançada de conteúdo</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Extração de pontos-chave personalizados</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>API para integração</span>
                    </div>
                    <div class="pricing-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        <span>Suporte prioritário 24/7</span>
                    </div>
                </div>
                <div class="pricing-action">
                    <a href="#" class="btn btn-outline-red btn-lg btn-block">Experimente 7 dias grátis</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabela comparativa -->
    <div class="mt-5 mb-5">
        <h3 class="text-center mb-4">Comparação detalhada dos planos</h3>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="thead-light">
                    <tr>
                        <th>Recurso</th>
                        <th class="text-center">Gratuito</th>
                        <th class="text-center">Premium</th>
                        <th class="text-center">Profissional</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Resumos mensais</td>
                        <td class="text-center">3</td>
                        <td class="text-center">Ilimitados</td>
                        <td class="text-center">Ilimitados</td>
                    </tr>
                    <tr>
                        <td>Duração máxima dos vídeos</td>
                        <td class="text-center">10 minutos</td>
                        <td class="text-center">3 horas</td>
                        <td class="text-center">Sem limite</td>
                    </tr>
                    <tr>
                        <td>Transcrição completa</td>
                        <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                        <td class="text-center"><i class="bi bi-check text-success"></i></td>
                        <td class="text-center"><i class="bi bi-check text-success"></i></td>
                    </tr>
                    <tr>
                        <td>Download de resumos</td>
                        <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                        <td class="text-center"><i class="bi bi-check text-success"></i></td>
                        <td class="text-center"><i class="bi bi-check text-success"></i></td>
                    </tr>
                    <tr>
                        <td>Palavras-chave e tópicos</td>
                        <td class="text-center">Básico</td>
                        <td class="text-center">Avançado</td>
                        <td class="text-center">Personalizado</td>
                    </tr>
                    <tr>
                        <td>Acesso a API</td>
                        <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                        <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                        <td class="text-center"><i class="bi bi-check text-success"></i></td>
                    </tr>
                    <tr>
                        <td>Suporte</td>
                        <td class="text-center">Email</td>
                        <td class="text-center">Email e chat</td>
                        <td class="text-center">Prioritário 24/7</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- FAQs -->
<div class="container mb-5">
    <h3 class="text-center mb-4">Perguntas Frequentes</h3>
    <div class="row">
        <div class="col-md-6">
            <div class="faq-item">
                <h5 class="faq-question">Como funciona o SumaTube?</h5>
                <p>O SumaTube usa tecnologia avançada de IA para extrair e analisar as legendas dos vídeos do YouTube, criando resumos inteligentes que capturam os pontos principais do conteúdo.</p>
            </div>

            <div class="faq-item">
                <h5 class="faq-question">Posso cancelar minha assinatura a qualquer momento?</h5>
                <p>Sim, você pode cancelar sua assinatura a qualquer momento. Não há contratos de longo prazo ou taxas de cancelamento.</p>
            </div>

            <div class="faq-item">
                <h5 class="faq-question">Como são processados os pagamentos?</h5>
                <p>Processamos pagamentos via cartão de crédito, débito, PayPal e Pix. Todas as transações são seguras e criptografadas.</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="faq-item">
                <h5 class="faq-question">E se o vídeo não tiver legendas?</h5>
                <p>O SumaTube pode gerar legendas automaticamente para vídeos que não as possuem, embora a precisão possa variar dependendo da qualidade do áudio.</p>
            </div>

            <div class="faq-item">
                <h5 class="faq-question">Quais idiomas são suportados?</h5>
                <p>Atualmente suportamos resumos em português, inglês e espanhol. Estamos constantemente adicionando suporte para novos idiomas.</p>
            </div>

            <div class="faq-item">
                <h5 class="faq-question">Como posso entrar em contato com o suporte?</h5>
                <p>Você pode entrar em contato conosco através do email suporte@sumatube.com ou pelo chat disponível no site para usuários Premium e Profissional.</p>
            </div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="text-center mt-5">
        <h3 class="mb-3">Pronto para começar?</h3>
        <p class="mb-4">Escolha o plano ideal para suas necessidades e comece a usar o SumaTube hoje mesmo.</p>
        <a href="#" class="btn btn-primary btn-lg">Criar conta gratuita</a>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function() {
            // Toggle entre planos mensais e anuais
            $('#monthlyBtn').click(function() {
                $(this).addClass('active');
                $('#yearlyBtn').removeClass('active');

                // Atualizar preços para mensais
                $('#premiumPrice').text('R$ 29,90');
                $('#premiumPeriod').text('por mês');
                $('#proPrice').text('R$ 59,90');
                $('#proPeriod').text('por mês');
            });

            $('#yearlyBtn').click(function() {
                $(this).addClass('active');
                $('#monthlyBtn').removeClass('active');

                // Atualizar preços para anuais com desconto
                $('#premiumPrice').text('R$ 287,04');
                $('#premiumPeriod').text('por ano (R$ 23,92/mês)');
                $('#proPrice').text('R$ 575,04');
                $('#proPeriod').text('por ano (R$ 47,92/mês)');
            });

            // Animação aos cards
            $('.pricing-card').hover(
                function() {
                    $(this).addClass('shadow-lg');
                },
                function() {
                    $(this).removeClass('shadow-lg');
                }
            );
        });
    </script>
}