{% extends 'base.html' %}
{% load static %}

{% block title %}Escolha seu Plano - Allure{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="text-center mb-5">
        <h1 class="display-4 fw-bold text-primary">Escolha seu Plano</h1>
        <p class="lead text-muted">Selecione o plano ideal para destacar seu perfil e aumentar suas oportunidades</p>
        
        {% if usuario_recem_cadastrado %}
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-star me-2"></i>
            <strong>Parabéns pelo seu cadastro!</strong> Agora escolha um plano para ativar seu perfil e começar a receber clientes.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endif %}
        
        <div class="row justify-content-center">
            <div class="col-md-8">
                <p class="text-muted">Todos os nossos planos incluem suporte completo e garantia de satisfação. Escolha o que melhor se adapta às suas necessidades.</p>
            </div>
        </div>
    </div>

    {% for tipo, planos in planos_por_tipo.items %}
    <div class="row mb-5">
        <div class="col-12">
            <h2 class="text-center mb-4 text-capitalize">
                <i class="fas fa-crown text-warning me-2"></i>
                {{ tipo|title }}
            </h2>
        </div>
        
        {% for plano in planos %}
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100 shadow-sm border-0 position-relative">
                {% if plano.tipo == 'exclusivo' %}
                <div class="position-absolute top-0 start-50 translate-middle-x">
                    <span class="badge bg-danger fs-6 px-3 py-2 rounded-pill">Mais Popular</span>
                </div>
                {% endif %}
                
                <div class="card-header text-center {% if plano.tipo == 'exclusivo' %}bg-danger text-white{% elif plano.tipo == 'vip' %}bg-warning text-dark{% elif plano.tipo == 'premium' %}bg-primary text-white{% else %}bg-secondary text-white{% endif %} py-4">
                    <h3 class="h4 mb-0 fw-bold">{{ plano.nome }}</h3>
                </div>
                
                <div class="card-body d-flex flex-column p-4">
                    <div class="text-center mb-4">
                        <span class="display-6 fw-bold text-primary">R$ {{ plano.preco }}</span>
                        <small class="text-muted d-block">{{ plano.duracao_dias }} dias</small>
                        <small class="text-muted">R$ {{ plano.get_preco_mensal|floatformat:2 }}/mês</small>
                    </div>
                    
                    <ul class="list-unstyled mb-4">
                        {% if plano.destaque_perfil %}
                        <li class="mb-3">
                            <i class="fas fa-star text-warning me-2"></i>
                            <strong>Perfil em Destaque</strong>
                            <small class="text-muted d-block ms-4">Seu perfil aparece primeiro nas buscas</small>
                        </li>
                        {% endif %}
                        
                        {% if plano.boost_visualizacoes %}
                        <li class="mb-3">
                            <i class="fas fa-rocket text-success me-2"></i>
                            <strong>Boost de Visualizações</strong>
                            <small class="text-muted d-block ms-4">Aumenta significativamente suas visualizações</small>
                        </li>
                        {% endif %}
                        
                        {% if plano.fotos_ilimitadas %}
                        <li class="mb-3">
                            <i class="fas fa-images text-info me-2"></i>
                            <strong>Fotos Ilimitadas</strong>
                            <small class="text-muted d-block ms-4">Upload de quantas fotos quiser</small>
                        </li>
                        {% else %}
                        <li class="mb-3">
                            <i class="fas fa-images text-muted me-2"></i>
                            <strong>Até {{ plano.max_fotos }} fotos</strong>
                            <small class="text-muted d-block ms-4">Quantidade limitada de fotos</small>
                        </li>
                        {% endif %}
                        
                        {% if plano.videos_ilimitados %}
                        <li class="mb-3">
                            <i class="fas fa-video text-info me-2"></i>
                            <strong>Vídeos Ilimitados</strong>
                            <small class="text-muted d-block ms-4">Upload de quantos vídeos quiser</small>
                        </li>
                        {% else %}
                        <li class="mb-3">
                            <i class="fas fa-video text-muted me-2"></i>
                            <strong>Até {{ plano.max_videos }} vídeos</strong>
                            <small class="text-muted d-block ms-4">Quantidade limitada de vídeos</small>
                        </li>
                        {% endif %}
                        
                        {% if plano.suporte_prioritario %}
                        <li class="mb-3">
                            <i class="fas fa-headset text-primary me-2"></i>
                            <strong>Suporte Prioritário</strong>
                            <small class="text-muted d-block ms-4">Atendimento exclusivo e rápido</small>
                        </li>
                        {% endif %}
                        
                        {% if plano.relatorio_estatisticas %}
                        <li class="mb-3">
                            <i class="fas fa-chart-bar text-success me-2"></i>
                            <strong>Relatórios Estatísticos</strong>
                            <small class="text-muted d-block ms-4">Análises detalhadas do seu perfil</small>
                        </li>
                        {% endif %}
                    </ul>
                    
                    <div class="mt-auto text-center">
                        <a href="{% url 'payments:checkout_plano' plano.id %}" class="btn {% if plano.tipo == 'exclusivo' %}btn-danger{% elif plano.tipo == 'vip' %}btn-warning{% elif plano.tipo == 'premium' %}btn-primary{% else %}btn-secondary{% endif %} btn-lg px-5 py-3 fw-bold">
                            <i class="fas fa-shopping-cart me-2"></i>
                            Escolher Plano
                        </a>
                        
                        <small class="text-muted d-block mt-2">
                            <i class="fas fa-ticket-alt me-1"></i>
                            Aplique vouchers de desconto no checkout
                        </small>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endfor %}
    
    <!-- Seção de Benefícios Gerais -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 bg-light">
                <div class="card-body text-center p-5">
                    <h3 class="mb-4">Por que escolher a Allure?</h3>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <i class="fas fa-users fa-3x text-primary mb-3"></i>
                            <h5>Milhares de Usuários</h5>
                            <p class="text-muted">Comunidade ativa e engajada</p>
                        </div>
                        <div class="col-md-4 mb-3">
                            <i class="fas fa-lock fa-3x text-success mb-3"></i>
                            <h5>100% Seguro</h5>
                            <p class="text-muted">Seus dados estão protegidos</p>
                        </div>
                        <div class="col-md-4 mb-3">
                            <i class="fas fa-clock fa-3x text-warning mb-3"></i>
                            <h5>Suporte 24/7</h5>
                            <p class="text-muted">Estamos sempre aqui para ajudar</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.badge {
    z-index: 10;
}

.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
</style>
{% endblock %}