{% load css_tags %}{% block_css 'enap_designsystem/blocks/navbar3.css' %}
{% load wagtailimages_tags %}
{% block content %}
<style>
    .logo {
        color: {{ value.primary_color }};
    }

    .nav-linksv3 a:hover {
        color: {{ value.accent_color }};
    }
    
    .nav-linksv3 a.active {
        color: {{ value.accent_color }};
    }

    .btn_hero-outline {
        border: 2px solid {{ value.button_color }};
        color: {{ value.button_color }};
    }

    .btn_hero-primary {
        background-color: {{ value.button_color }};
        color: {{ value.button_text_color }};
    }
</style>

<section class="wrapper-fix">
    <div class="navbarv3">
        <nav class="nav-container">
            <div class="logo">
                {% image value.logo_image width-200 as logo %}
                <img src="{{ logo.url }}" alt="{{ logo.alt }}">
            </div>
            
            <!-- Desktop menu -->
            <ul class="nav-linksv3">
                {% for item in value.nav_items %}
                    <li>
                        <a href="{{ item.link_url }}" {% if item.is_active %}class="active"{% endif %}>
                            {{ item.link_text }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
            
            <div class="auth-buttons">
                <a href="{{ value.login_button_url }}" class="btn_hero btn_hero-outline">{{ value.login_button_text }}</a>
                <a href="{{ value.cta_button_url }}" class="btn_hero btn_hero-primary">{{ value.cta_button_text }}</a>
            </div>
            
            <!-- Hamburger button -->
            <div class="hamburger" id="hamburger-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
        
        <!-- Mobile menu -->
        <div class="mobile-menu" id="mobile-menu">
            <ul class="nav-linksv3">
                {% for item in value.nav_items %}
                    <li>
                        <a href="{{ item.link_url }}" {% if item.is_active %}class="active"{% endif %}>
                            {{ item.link_text }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
            
            <div class="auth-buttons">
                <a href="{{ value.login_button_url }}" class="btn_hero btn_hero-outline">{{ value.login_button_text }}</a>
                <a href="{{ value.cta_button_url }}" class="btn_hero btn_hero-primary">{{ value.cta_button_text }}</a>
            </div>
        </div>
    </div>
</section>

<script>
    // Código para ativar o menu mobile ao clicar no hamburger
    document.addEventListener('DOMContentLoaded', function() {
        const hamburger = document.getElementById('hamburger-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        if (hamburger && mobileMenu) {
            hamburger.addEventListener('click', function() {
                hamburger.classList.toggle('active');
                mobileMenu.classList.toggle('active');
            });
        }
        
        // Fechar o menu ao clicar em um link
        const mobileLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];
        mobileLinks.forEach(link => {
            link.addEventListener('click', function() {
                hamburger.classList.remove('active');
                mobileMenu.classList.remove('active');
            });
        });
    });

    // Código para adicionar ao final do seu script
    function ensureNavbarOnTop() {
        // Criar uma div completamente nova para conter o navbar
        const navbarLayer = document.createElement('div');
        navbarLayer.style.position = 'fixed';
        navbarLayer.style.top = '30px';
        navbarLayer.style.left = '0';
        navbarLayer.style.width = '100%';
        navbarLayer.style.height = '0';
        navbarLayer.style.zIndex = '999999';
        navbarLayer.style.overflow = 'visible';
        navbarLayer.style.transition = 'opacity 0.3s ease'; // Adicionar transição suave
        
        // Pegar o navbar original
        const navbar = document.querySelector('.wrapper-fix');
        if (navbar) {
            // Guardar uma referência ao pai original para restaurar se necessário
            const originalParent = navbar.parentNode;
            
            // Mover o navbar para a nova camada
            navbarLayer.appendChild(navbar);
            
            // Adicionar a nova camada ao final do body
            document.body.appendChild(navbarLayer);
            
            console.log("Navbar movido para camada de topo absoluto");
            
            // Adicionar evento de scroll para mostrar/esconder o navbar
            window.addEventListener('scroll', function() {
                if (window.scrollY > 150) {
                    // Quando rolado além de 150px, esconde o navbar
                    navbarLayer.style.opacity = '0';
                    navbarLayer.style.pointerEvents = 'none'; // Desativa interações com o elemento
                } else {
                    // Quando volta para menos de 150px, mostra o navbar
                    navbarLayer.style.opacity = '1';
                    navbarLayer.style.pointerEvents = 'auto'; // Reativa interações
                }
            });
        }
    }

    // Chamar a função após um pequeno atraso para garantir que a página está carregada
    setTimeout(ensureNavbarOnTop, 100);
</script>
{% endblock %}