{% load css_tags %}{% block_css 'enap_designsystem/blocks/hero_animada_block.css' %}
{% load static %}
{% load wagtailimages_tags %}
{% block content %}
<style>
    :root {
        --hero-primary: {{ cor_principal }};
        --hero-secondary: {{ cor_secundaria }};
        --hero-primary-light: color-mix(in srgb, {{ cor_principal }} 70%, white);
        --hero-primary-dark: color-mix(in srgb, {{ cor_principal }} 130%, black);
        --hero-secondary-light: color-mix(in srgb, {{ cor_secundaria }} 70%, white);
    }

    .hero-animada__badge {
        color: var(--hero-primary);
    }

   

    .hero-animada__btn-primary {
        background-color: var(--hero-primary);
    }

    .hero-animada__btn-secondary {
        color: var(--hero-primary);
    }
</style>
<div class="bg-animated">
    <div class="bg-shape shape-1"></div>
    <div class="bg-shape shape-2"></div>
    <div class="bg-shape shape-3"></div>
</div>
<section class="hero-animada">
    <div class="hero-animada__container">
        <div class="hero-animada__grid">
            <div class="hero-animada__content">
                {% if value.badge_texto %}
                <div class="hero-animada__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">
                        <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                        <path d="M2 17l10 5 10-5"></path>
                        <path d="M2 12l10 5 10-5"></path>
                    </svg>
                    {{ value.badge_texto }}
                </div>
                {% endif %}
                
                <h1 class="hero-animada__title">
                    {{ value.titulo|safe|striptags }}
                    {% if value.texto_destaque %}
                    <span class="hero-animada__highlight">{{ value.texto_destaque }}</span>
                    {% endif %}
                </h1>
                
                <p class="hero-animada__description">
                    {{ value.descricao }}
                </p>
                
                <div class="hero-animada__buttons">
                    {% if value.botao_principal_texto %}
                    <a href="{{ value.botao_principal_link }}" class="hero-animada__btn hero-animada__btn-primary">
                        {{ value.botao_principal_texto }}
                        <span class="hero-animada__btn-icon">
                            <i class="fa-solid fa-circle-chevron-right"></i>
                        </span>
                    </a>
                    {% endif %}
                    
                    {% if value.botao_secundario_texto %}
                    <a href="{{ value.botao_secundario_link }}" class="hero-animada__btn hero-animada__btn-secondary">
                        {{ value.botao_secundario_texto }}
                        <i class="fa-solid fa-circle-chevron-right"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
            
            <div class="hero-animada__image">
                <div class="hero-animada__image-container" id="hero-3d-container">
                    {% image value.imagem fill-500x600 format-webp as img_webp %}
                    {% image value.imagem fill-500x600 as img %}
                    <picture>
                        <source srcset="{{ img_webp.url }}" type="image/webp">
                        <img src="{{ img.url }}" alt="{{ value.titulo }}" class="hero-animada__img">
                    </picture>
                    <div class="hero-animada__image-overlay"></div>
                </div>
            </div>
        </div>
    </div>

</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Efeito 3D para a imagem com movimento do mouse
        const container = document.getElementById('hero-3d-container');
        if (container) {
            // Verificar se está em dispositivo móvel
            const isMobile = window.matchMedia('(max-width: 576px)').matches;
            
            if (!isMobile) {
                container.addEventListener('mousemove', function(e) {
                    const rect = container.getBoundingClientRect();
                    const x = e.clientX - rect.left; // posição X do mouse dentro do container
                    const y = e.clientY - rect.top; // posição Y do mouse dentro do container
                    
                    // Calcular a rotação baseada na posição do mouse
                    const centerX = rect.width / 2;
                    const centerY = rect.height / 2;
                    
                    // Quanto mais longe do centro, maior a rotação (máximo 10 graus)
                    const rotateY = ((x - centerX) / centerX) * 5; // -5 a 5 graus
                    const rotateX = ((centerY - y) / centerY) * 3; // -3 a 3 graus
                    
                    // Aplicar a transformação
                    container.style.transform = `perspective(1000px) rotateY(${rotateY}deg) rotateX(${rotateX}deg)`;
                });
                
                // Resetar a rotação quando o mouse sair
                container.addEventListener('mouseleave', function() {
                    container.style.transform = 'perspective(1000px) rotateY(-5deg) rotateX(3deg)';
                });
                
                // Aplica um efeito suave ao entrar
                container.addEventListener('mouseenter', function() {
                    container.style.transition = 'transform 0.3s ease';
                    setTimeout(() => {
                        container.style.transition = 'transform 0s';
                    }, 300);
                });
            }
        }
        
        // Ajuste de altura para mobile
        function adjustHeight() {
            const vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
            
            // Ajustar a altura do hero em dispositivos móveis
            if (window.matchMedia('(max-width: 576px)').matches) {
                const heroSection = document.querySelector('.hero-animada');
                if (heroSection) {
                    heroSection.style.minHeight = `calc(${vh * 100}px - 120px)`;
                }
            }
        }
        
        // Executar no carregamento e no redimensionamento
        window.addEventListener('resize', adjustHeight);
        adjustHeight();
    });
</script>

{% endblock %}