{% load wagtailimages_tags %}

<section class="hero-banner-section" style="position: relative; overflow: hidden; min-height: 500px; display: flex; align-items: center;">
    <!-- Imagem de fundo com overlay escuro e embaçado -->
    <div class="hero-background" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #012124;">
        {% if value.background_image %}
            {% image value.background_image fill-1920x1080 as bg_img %}
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('{{ bg_img.url }}'); background-size: cover; background-position: center; filter: brightness(0.5) blur(1px);"></div>
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);"></div>
        {% endif %}
    </div>
    
    <div class="container" style="position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 15px; display: flex; justify-content: space-between; align-items: center;">
        <!-- Coluna de texto (esquerda) -->
        <div class="hero-content-left" style="width: 50%; color: white; padding-right: 20px;  display: flex
;
    align-items: flex-start;
    flex-direction: column;">
            {% if value.tag %}
                <div class="hero-tag" style="display: inline-block; color: #AFF0ED; margin-bottom: 20px; font-weight: 500; font-size: 24px;">
                    {{ value.tag }}
                </div>
            {% endif %}
            
            <h1 class="hero-title" style="font-size: 2.5rem; margin-bottom: 20px; line-height: 1.2;">
                {{ value.title }}
            </h1>
            
            <div class="hero-description" style="font-size: 1.1rem; margin-bottom: 30px; line-height: 1.6; opacity: 0.9;">
                {{ value.description }}
            </div>
            
            <!-- Ações condicionais -->
            {% if value.action_type == 'video' and value.video_url %}
                <a href="{{ value.video_url }}" class="video-button" style="display: inline-flex; align-items: center; color: white; text-decoration: none; font-weight: 500;" target="_blank">
                    <span class="video-icon" style="display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); margin-right: 15px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white" style="margin-left: 4px;">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                    </span>
                    {{ value.video_text|default:"VEJA O VÍDEO" }}
                </a>
            {% elif value.action_type == 'button' and value.button_url %}
                <a href="{{ value.button_url }}" class="btn primary" target="_blank">
                    {{ value.button_text|default:"SAIBA MAIS" }}
                </a>
            {% endif %}
        </div>
        
        <!-- Imagem principal (direita) -->
        <div class="hero-image_banner" style="width: 45%;">
            {% image value.hero_image original format-webp class="img-fluid" style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);" %}
        </div>
    </div>
</section>

<style>
    .hero-image {
        position: relative;
        z-index: 2;
    }

    @media (max-width: 768px) {
        .container {
            flex-direction: column;
        }
        
        .hero-content-left, .hero-image {
            width: 100% !important;
        }
        
        .hero-content-left {
            margin-bottom: 30px;
            padding-right: 0 !important;
        }
        
        .hero-title {
            font-size: 2rem !important;
        }
    }
</style>