{% load wagtailimages_tags %}
{% load static %}
{% if value.imagem_fundo %}
    {% image value.imagem_fundo original as bg_image %}
{% endif %}

<section class="secao-categorias"
        {% if bg_image %}
        style="background-image: url('{{ bg_image.url }}'); {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}"
        {% else %}
        style="background-color: #F5F5DC; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}"
        {% endif %}>
    
    <!-- Imagem no Topo -->
    {% if value.imagem_topo %}
        <div class="categorias-imagem-topo">
            {% image value.imagem_topo original as topo_img %}
            <img src="{{ topo_img.url }}" 
                alt="{{ value.alt_imagem }}"
                class="imagem-topo">
        </div>
    {% endif %}
    
    <!-- Container Principal -->
    <div class="categorias-container">
        <!-- Grid de Duas Colunas -->
        <div class="categorias-grid">
            <!-- Primeira Coluna -->
            <div class="categoria-coluna">
                {% if value.titulo_coluna_1 %}
                <div class="premio-item">
                    {% if value.imagem_icon %}
                        {% image value.imagem_icon original as imagem_icon %}
                        <img class="premio-item-icon" src="{{ imagem_icon.url }}"
                            alt="{{ value.alt_imagem }}"
                            class="imagem-topo">
                    {% endif %}
                    <h2 class="apresentacao-subtitulo" style="color: {{ value.cor_titulo_1 }};">
                        {{ value.titulo_coluna_1 }}
                    </h2>
                </div>
                {% endif %}
                
                {% if value.conteudo_coluna_1 %}
                    <div class="categoria-conteudo" style="color: {{ value.cor_texto_1 }};">
                        {{ value.conteudo_coluna_1 }}
                    </div>
                {% endif %}
            </div>
            
            <!-- Segunda Coluna -->
            <div class="categoria-coluna">
                {% if value.titulo_coluna_2 %}
                <div class="premio-item">
                    {% if value.imagem_icon %}
                        {% image value.imagem_icon original as imagem_icon %}
                        <img class="premio-item-icon" src="{{ imagem_icon.url }}"
                            alt="{{ value.alt_imagem }}"
                            class="imagem-topo">
                    {% endif %}
                    <h2 class="apresentacao-subtitulo" style="color: {{ value.cor_titulo_2 }};">
                        {{ value.titulo_coluna_2 }}
                    </h2>
                </div>
                {% endif %}
                
                {% if value.conteudo_coluna_2 %}
                    <div class="categoria-conteudo" style="color: {{ value.cor_texto_2 }};">
                        {{ value.conteudo_coluna_2 }}
                    </div>
                {% endif %}
            </div>
        </div>
        {% if value.conteudo_coluna_baixo %}
            <div class="categoria-conteudo" style="color: {{ value.cor_texto_1 }};">
                {{ value.conteudo_coluna_baixo }}
            </div>
        {% endif %}
    </div>

    <!-- Imagem no bottom -->
    {% if value.imagem_baixo %}
    <div class="categorias-imagem-topo">
        {% image value.imagem_baixo original as imagem_baixo %}
        <img src="{{ imagem_baixo.url }}" 
            alt="{{ value.alt_imagem }}"
            class="imagem-topo">
    </div>
    {% endif %}
</section>

<style>
    .categoria-conteudo a {
        color: #007bff;
        text-decoration: none;
        font-weight: 600;
    }
</style>