{% load wagtailcore_tags %}
{% load wagtailimages_tags %}
<section class="secao-display py-16" 
         style="background-color: {{ value.cor_fundo }};">
    
    <div class="container mx-auto px-4">
        <div class="max-w-6xl mx-auto">
            
            <!-- Título -->
            <h2 class="secao-cabecalho text-center font-bold mb-8"
                style="color: {{ value.cor_titulo }};">
                {{ value.titulo }}
            </h2>

            <!-- Quadrado de conteúdo -->
            <div class="secao-conteudo-cartoes rounded-lg p-8 mb-12 shadow-lg"
                 style="background-color: {{ value.cor_quadrado }};">
                <div class="secao-texto text-lg leading-relaxed"
                     style="color: {{ value.cor_texto }};">
                    {{ value.conteudo|richtext }}
                </div>

            <!-- Grid de Cards -->
            {% if value.cards %}
                <div class="secao-cartoes {{ value.grid_tipo }}">
                    {% for card_block in value.cards %}
                        {% if card_block.block_type == 'card_apresentacao' %}
                            <div class="secao-cartao">
                                <!-- Ícone -->
                                {% if card_block.value.logo %}
                                    <div class="cartao-simbolo" style="background: {{ value.cor_texto }};">
                                        {% image card_block.value.logo original %}
                                    </div>
                                {% elif card_block.value.icone %}
                                    <div class="cartao-simbolo" style="background: {{ card_block.value.cor_icone }};">
                                        <i class="{{ card_block.value.icone }}"></i>
                                    </div>
                                {% endif %}
                                
                                <!-- Título do Card -->
                                <h3 class="cartao-cabecalho" style="color: {{ value.cor_texto }};">
                                    {{ card_block.value.titulo }}
                                </h3>
                                
                                <!-- Descrição -->
                                <p class="cartao-texto" style="color: {{ value.cor_texto }};">
                                    {{ card_block.value.descricao }}
                                </p>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            </div>
        </div>
    </div>
</section>

<style>
    /* Estilos gerais */
    .secao-display {
        padding: 90px 0;
    }
    
    .secao-cabecalho {
        font-size: 48px !important;
        font-weight: 500;
        margin-bottom: 2rem;
    }

    .secao-conteudo-cartoes {
        max-width: 1142px;
        margin: 0 auto;
        padding: 45px;
    }
    
    .secao-texto p {
        font-size: 21px;
        line-height: 1.6;
        font-weight: 400;
    }
    
    /* Forçar cores do richtext */
    .secao-display .secao-texto * {
        color: inherit !important;
    }

    /* Grid de Cards */
    .secao-cartoes {
        display: grid;
        gap: 2rem;
        margin-top: 3rem;
    }
    
    /* Grid responsivo baseado na escolha */
    .cards-grid-1 {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .cards-grid-2 {
        grid-template-columns: 1fr;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    
    @media (min-width: 768px) {
        .cards-grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    .cards-grid-3 {
        grid-template-columns: 1fr;
    }
    
    @media (min-width: 768px) {
        .cards-grid-3 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (min-width: 1024px) {
        .cards-grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    .cards-grid-4 {
        grid-template-columns: 1fr;
    }
    
    @media (min-width: 768px) {
        .cards-grid-4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (min-width: 1024px) {
        .cards-grid-4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    
    .cards-grid-5 {
        grid-template-columns: 1fr;
    }
    
    @media (min-width: 640px) {
        .cards-grid-5 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (min-width: 768px) {
        .cards-grid-5 {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    @media (min-width: 1024px) {
        .cards-grid-5 {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    
    @media (min-width: 1280px) {
        .cards-grid-5 {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    /* Estilos do Card */
    .secao-cartao {
        text-align: center;
        padding: 0px;
    }
    
    .cartao-simbolo {
        margin-bottom: 1.5rem;
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    
    .cartao-simbolo i {
        font-size: 2rem;
        color: #FFFFFF;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    
    .cartao-cabecalho {
        font-size: 1.25rem;
        font-weight: 600;
        color: #FFFFFF;
        margin-bottom: 1rem;
        line-height: 1.4;
        text-align: left;
    }
    
    .cartao-texto {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
        margin: 0;
        text-align: left;
    }
    
    /* Responsividade mobile */
    @media (max-width: 767px) {
        .secao-conteudo-cartoes {
            padding: 2rem;
        }
        
        .secao-cartoes {
            gap: 2.5rem;
            margin-top: 2rem;
        }
        
        .cartao-simbolo i {
            font-size: 2.5rem;
            width: 70px;
            height: 70px;
        }
    }
</style>