{% load wagtailimages_tags %}
{% block stylecss %} 
{% endblock %}
{% load wagtailcore_tags %}

<style>
    /* Cores com valores hex diretos */
    .secao-apresentacao-{{ block.id }} .apresentacao-titulo {
        {% if value.cor_titulo|slice:":1" == "#" %}
            color: {{ value.cor_titulo }} !important;
        {% else %}
            /* Classes CSS do Design System */
        {% endif %}
    }
    
    /* CORRIGIDO: Subtítulo com richtext */
    .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo,
    .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo p,
    .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo strong,
    .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo em {
        {% if value.cor_subtitulo|slice:":1" == "#" %}
            color: {{ value.cor_subtitulo }};
        {% else %}
            /* Classes CSS do Design System */
        {% endif %}
    }

    .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo a {
        color: #7C43E9 !important;
    }
    
    .secao-apresentacao-{{ block.id }} .apresentacao-conteudo,
    .secao-apresentacao-{{ block.id }} .apresentacao-conteudo p,
    .secao-apresentacao-{{ block.id }} .apresentacao-conteudo strong,
    .secao-apresentacao-{{ block.id }} .apresentacao-conteudo em,
    .secao-apresentacao-{{ block.id }} .apresentacao-conteudo a {
        {% if value.cor_texto|slice:":1" == "#" %}
            color: {{ value.cor_texto }} !important;
        {% else %}
            /* Classes CSS do Design System */
        {% endif %}
    }
    
    /* Classes CSS para cores do Design System */
    {% if value.cor_titulo|slice:":1" != "#" %}
        .secao-apresentacao-{{ block.id }} .apresentacao-titulo.{{ value.cor_titulo }} {
            /* A classe {{ value.cor_titulo }} será aplicada pelo Design System */
        }
    {% endif %}
    
    {% if value.cor_subtitulo|slice:":1" != "#" %}
        .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo.{{ value.cor_subtitulo }},
        .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo.{{ value.cor_subtitulo }} p,
        .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo.{{ value.cor_subtitulo }} strong,
        .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo.{{ value.cor_subtitulo }} em,
        .secao-apresentacao-{{ block.id }} .apresentacao-subtitulo.{{ value.cor_subtitulo }} a {
            /* A classe {{ value.cor_subtitulo }} será aplicada pelo Design System */
        }
    {% endif %}
    
    {% if value.cor_texto|slice:":1" != "#" %}
        .secao-apresentacao-{{ block.id }} .apresentacao-conteudo.{{ value.cor_texto }},
        .secao-apresentacao-{{ block.id }} .apresentacao-conteudo.{{ value.cor_texto }} p,
        .secao-apresentacao-{{ block.id }} .apresentacao-conteudo.{{ value.cor_texto }} strong,
        .secao-apresentacao-{{ block.id }} .apresentacao-conteudo.{{ value.cor_texto }} em,
        .secao-apresentacao-{{ block.id }} .apresentacao-conteudo.{{ value.cor_texto }} a {
            /* Herda a cor da classe pai */
        }
    {% endif %}
</style>

<section class="secao-apresentacao secao-apresentacao-{{ block.id }}" style="background-color: {{ value.cor_fundo }}; {% if value.mostrar_linha %}border-bottom: 16px solid {{ value.cor_linha }};{% endif %}">
    <div class="secao-apresentacao-container">
        <div class="secao-apresentacao-grid {% if value.posicao_imagem == 'esquerda' %}grid-imagem-esquerda{% endif %}">
            <!-- Conteúdo de Texto -->
            <div class="secao-apresentacao-content">
                {% if value.titulo %}
                    <h1 class="apresentacao-titulo{% if value.cor_titulo|slice:":1" != "#" %} {{ value.cor_titulo }}{% endif %}">
                        {{ value.titulo }}
                    </h1>
                {% endif %}
                
                {% if value.subtitulo %}
                    <h2 class="apresentacao-subtitulo{% if value.cor_subtitulo|slice:":1" != "#" %} {{ value.cor_subtitulo }}{% endif %}">
                        {{ value.subtitulo|richtext }}
                    </h2>
                {% endif %}

                {% if value.botao_texto and value.botao_url %}
                    <a class="btn-si" href="{{ value.botao_url }}"
                        style="background-color: {{ value.botao_cor }};"
                        class="btn-secao-apresentacao">
                        {{ value.botao_texto }}
                    </a>
                {% endif %}
            </div>
            
            <!-- Imagem Circular -->
            <div class="secao-apresentacao-imagem">
                {% if value.imagem_circular %}
                    {% image value.imagem_circular original as circular_img %}
                    {% if value.imagem_url %}
                    <a class="imagem-circular-container" href="{{ value.imagem_url }}">
                        <img src="{{ circular_img.url }}" 
                             alt="{{ value.alt_imagem }}"
                             class="imagem-circular">
                    </a>
                    {% else %}
                    <div class="imagem-circular-container">
                        <img src="{{ circular_img.url }}" 
                             alt="{{ value.alt_imagem }}"
                             class="imagem-circular">
                    </div>
                    {% endif %}
                {% endif %}
            </div>
        </div>

        {% if value.conteudo %}
            <div class="apresentacao-conteudo{% if value.cor_texto|slice:":1" != "#" %} {{ value.cor_texto }}{% endif %}">
                {{ value.conteudo }}
            </div>
        {% endif %}
    </div>
</section>