{% load css_tags %}{% block_css 'enap_designsystem/blocks/cta_imagem_block.css' %}
{% load wagtailimages_tags %}

{% block content %}
<section class="cta-imagem">
    <div class="container">
        <div class="future-library" style="background: linear-gradient(135deg, {{ self.gradient_start_color }}, {{ self.gradient_end_color }});">
            <div class="future-library-pattern"></div>
            
            <div class="future-library-content">
                <div class="future-badge">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="23 4 23 10 17 10"></polyline>
                        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                    </svg>
                    {{ self.badge_text }}
                </div>
                
                <h2 class="future-title">
                    {{ self.title }} {% if self.highlighted_title %}<span>{{ self.highlighted_title }}</span>{% endif %}
                </h2>
                
                <div class="future-description">
                    {{ self.description }}
                </div>
                
                <a href="{{ self.button_link }}" class="future-btn" style="background-color: {{ self.button_color }}; color: {{ self.button_text_color }};">
                    {{ self.button_text }}
                    <i class="fa-solid fa-circle-chevron-right"></i>
                </a>
            </div>
            
            <div class="side-images">
                <div class="top-image-container">
                    {% image self.top_image fill-375x263 format-webp as top_webp_sm %}
                    {% image self.top_image fill-500x350 format-webp as top_webp %}
                    {% image self.top_image fill-375x263 as top_sm %}
                    {% image self.top_image fill-500x350 as top_orig %}
                    <picture>
                        <source media="(max-width: 576px)" srcset="{{ top_webp_sm.url }}" type="image/webp">
                        <source srcset="{{ top_webp.url }}" type="image/webp">
                        <source media="(max-width: 576px)" srcset="{{ top_sm.url }}">
                        <img src="{{ top_orig.url }}" class="top-image" alt="{{ top_orig.alt }}">
                    </picture>
                </div>

                <div class="bottom-image-container">
                    {% image self.bottom_image fill-325x228 format-webp as bottom_webp_sm %}
                    {% image self.bottom_image fill-500x350 format-webp as bottom_webp %}
                    {% image self.bottom_image fill-325x228 as bottom_sm %}
                    {% image self.bottom_image fill-500x350 as bottom_orig %}
                    <picture>
                        <source media="(max-width: 576px)" srcset="{{ bottom_webp_sm.url }}" type="image/webp">
                        <source srcset="{{ bottom_webp.url }}" type="image/webp">
                        <source media="(max-width: 576px)" srcset="{{ bottom_sm.url }}">
                        <img src="{{ bottom_orig.url }}" class="bottom-image" alt="{{ bottom_orig.alt }}">
                    </picture>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}