{% load wagtailimages_tags %}

{% if value.imagem_background %}
    {% image value.imagem_background original as bg_image %}
{% endif %}

<style>
    .secao-destaque-titulo{
        color: {{ value.cor_titulo }};
    }
    .patrocinadores-container {
        max-width: 960px;
        padding: 40px 32px;
        width: 100%;
    }
    .galeria-img.logo{
        object-fit: contain !important;
        width: 100%;
        height: 120px;
        transition: transform 0.3s ease;
    }
    .destaque-logos-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
</style>

<section class="secao-destaque"
        style="padding-top: {{ value.padding_top|default:"2rem" }}; padding-bottom: {{ value.padding_bottom|default:"2rem" }};
        {% if bg_image %}background-image: url('{{ bg_image.url }}');{% endif %}
        {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}">

    
    <div class="secao-destaque-container patrocinadores-container">
        <!-- Título -->
        {% if value.titulo %}
            <h2 class="secao-destaque-titulo" style="color: {{ value.cor_titulo }}; text-align: center; padding: 0 20px;">
                {{ value.titulo }}
            </h2>
        {% endif %}
        
        <!-- Imagem em Destaque -->
        {% if value.imagem_destaque %}
            <div class="secao-destaque-principal">
                {% image value.imagem_destaque original as destaque_img %}
                <div class="destaque-card-semana">
                    <img src="{{ destaque_img.url }}"
                        alt="{{ value.legenda_destaque|default:value.titulo }}"
                        class="destaque-img">
                    {% if value.legenda_destaque %}
                        <p class="destaque-legenda">{{ value.legenda_destaque }}</p>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        <!-- Múltiplas Imagens em Destaque (empilhadas) -->
        {% if value.imagem_destaque_multiplas %}
            <div class="secao-destaque-principal">
                <div class="destaque-logos-stack">
                    {% for logo_block in value.imagem_destaque_multiplas %}
                        {% if logo_block.block_type == 'logo' %}
                            {% image logo_block.value.imagem original as destaque_img_multipla %}
                            <div class="destaque-card-semana">
                                <img src="{{ destaque_img_multipla.url }}"
                                    alt="{{ logo_block.value.legenda|default:value.titulo }}"
                                    class="destaque-img">
                                {% if logo_block.value.legenda %}
                                    <p class="destaque-legenda">{{ logo_block.value.legenda }}</p>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        {% endif %}
        
        <!-- Galeria de Fotos -->
        {% if value.galeria_fotos %}
            <div class="secao-destaque-galeria">
                {% for foto_block in value.galeria_fotos %}
                    {% if foto_block.block_type == 'foto' %}
                        <div class="galeria-item">
                            {% image foto_block.value.imagem width-300 as galeria_img %}
                            <div class="galeria-card">
                                <img src="{{ galeria_img.url }}" 
                                    alt="{{ foto_block.value.legenda|default:'Foto da galeria' }}"
                                    class="galeria-img logo">
                                {% if foto_block.value.legenda %}
                                    <p class="galeria-legenda">{{ foto_block.value.legenda }}</p>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
    </div>
</section>