{% extends "enap_designsystem/base.html" %}
{% load static %}
{% load wagtailcore_tags wagtailimages_tags %}


{% block metadata %}
    {% comment %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endcomment %}
{% endblock %}


{% block title %}
	<title>{{ page.title }}</title>
{% endblock %}

{%block govnavbar %}
    <div style="background-color: #071E41;">
        <div class="menu">
            <div class="logo">
                <img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
            </div>
            <a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
            <div class="separator"></div>
            <a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
        </div>
    </div>
{% endblock %}


{% block navbar %}
    {% if enap_dynav %}
        {% include "enap_designsystem/blocks/dynamic_nav/dynamic_nav_include.html" %}
    {% elif page.navbar %}
        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
    {% endif %}
{% endblock %}



{% block content %}
    <!-- Enap Banner Video Block -->
    <section class="wrapperhero">
        <div style="background-color: black; opacity: 0.3; height: 100%; width: 100%; position: absolute; z-index: 9;"></div>

        {% if page.video_background %}
            <video autoplay loop muted style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                <source src="{{ page.video_background.url }}" type="video/mp4">
                Seu navegador não suporta o vídeo.
            </video>
        {% endif %}

        <!-- Busca centralizada no hero -->
        <div class="hero-search-wrapper">
            <p class="hero-search-tagline">O que você quer aprender hoje?</p>
            <form action="/busca/" method="get" class="hero-search-form" role="search">
                <input
                    type="text"
                    name="q"
                    id="heroSearchInput"
                    class="hero-search-input"
                    placeholder="Busque cursos, eventos, publicações..."
                    autocomplete="off"
                    aria-label="Campo de busca"
                >
                <div class="hero-search-actions">
                    <button type="button" class="hero-search-mic" aria-label="Buscar por voz" id="heroMicBtn">
                        <i class="fa-solid fa-microphone"></i>
                    </button>
                    <button type="submit" class="hero-search-btn" aria-label="Buscar">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>
                </div>
            </form>
        </div>

        <div style="max-width: 1146px; margin: auto; width: 100%; position: relative; z-index: 999;">
            {% if processed_hero_menu %}
            <div class="wrapper-menu-hero" style="color: white;">
                <!-- Menu lateral do hero -->
                <div class="hero-menu-box">
                    {% if processed_hero_menu %}
                        {% for menu in processed_hero_menu %}
                            <div class="hero-menu-row">
                                {% if menu.items %}
                                    <!-- TEM ITENS: Botão com dropdown -->
                                    <button class="hero-menu-button has-children" onclick="toggleHeroDropdown(this)" aria-haspopup="true" aria-expanded="false">
                                        <span>{{ menu.title }}</span>
                                        <i class="fa-solid fa-chevron-down hero-arrow" aria-hidden="true"></i>
                                    </button>

                                    <!-- Painel lateral (2º nível) -->
                                    <div class="hero-children-panel">
                                        <ul style="margin: unset; padding: unset; color: unset; list-style-type: none;">
                                            {% for item in menu.items %}
                                                {% if item.show_children %}
                                                    <!-- 2º nível COM filhos: botão que expande o 3º nível -->
                                                    <li class="child-link-list">
                                                        <button class="child-link child-toggle"
                                                                aria-haspopup="true"
                                                                aria-expanded="false"
                                                                aria-controls="third-level-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">
                                                            <span>{{ item.title }}</span>
                                                            <i class="fa-solid fa-chevron-right child-arrow" aria-hidden="true"></i>
                                                        </button>
                                                        <ul class="hero-third-level-list"
                                                            id="third-level-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                                            role="menu"
                                                            aria-label="{{ item.title }}">
                                                            {% for grandchild in item.children %}
                                                                <li role="none"><a href="{{ grandchild.url }}" class="grandchild-link" role="menuitem">{{ grandchild.title }}</a></li>
                                                            {% endfor %}
                                                        </ul>
                                                    </li>
                                                {% else %}
                                                    <!-- 2º nível SEM filhos: link direto -->
                                                    <li class="child-link-list">
                                                        <a href="{{ item.url }}" class="child-link">{{ item.title }}</a>
                                                    </li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% else %}
                                    <!-- SEM ITENS: Link direto, sem seta -->
                                    <a href="{{ menu.parent_url }}" class="hero-menu-button no-children">
                                        <span>{{ menu.title }}</span>
                                    </a>
                                {% endif %}
                            </div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </section>
    
    
    <!-- Conhecimento e prática — Dark section -->
    <section class="secao-conhecimento">
        <div class="secao-conhecimento__inner{% if not page.secao_ctas %} secao-conhecimento__inner--sem-cta{% endif %}">

            <!-- Coluna esquerda: título + números -->
            <div class="secao-conhecimento__left">
                <div class="secao-conhecimento__titulo-wrap">
                    <div class="secao-conhecimento__accent"></div>
                    <h2 class="secao-conhecimento__titulo">
                        Conhecimento e prática <strong>para a transformação do Estado</strong>
                    </h2>
                </div>
                <div class="secao-conhecimento__numeros">
                    <div class="secao-conhecimento__numero">
                        <span class="sn-valor">+14 mi</span>
                        <span class="sn-label">inscrições</span>
                        <span class="sn-detalhe">em cursos, oficinas ou eventos</span>
                    </div>
                    <div class="secao-conhecimento__numero">
                        <span class="sn-valor">+1,5 mi</span>
                        <span class="sn-label">certificados</span>
                        <span class="sn-detalhe">emitidos somente em 2024</span>
                    </div>
                    <div class="secao-conhecimento__numero">
                        <span class="sn-valor">+900</span>
                        <span class="sn-label">cursos</span>
                        <span class="sn-detalhe">para enriquecer o seu conhecimento</span>
                    </div>
                </div>
            </div>

            {% if page.secao_ctas %}
            <div class="secao-conhecimento__divisor"></div>

            <!-- Coluna direita: dois CTAs -->
            <div class="secao-conhecimento__right">
                {% for cta in page.secao_ctas %}
                    <a href="{{ cta.value.link }}" class="cta-enap">
                        <div class="cta-enap__icone">
                            <i class="{{ cta.value.icone }}"></i>
                        </div>
                        <div class="cta-enap__texto">
                            <span class="cta-enap__titulo">{{ cta.value.titulo }}</span>
                            <span class="cta-enap__sub">{{ cta.value.sub }}</span>
                        </div>
                        <i class="fa-solid fa-arrow-right cta-enap__seta"></i>
                    </a>
                {% endfor %}
            </div>
            {% endif %}

        </div>
    </section>
    

    <div class="main">
        {% include_block page.body_stream %}
    </div>

    <!-- Card dinamico -->
    {% if page.page_destaque %}
    <section class="card-dinamico">
        <div class="card-dinamico__content">
            <div class="card-dinamico__text">
                <h2 class="title-dinamico"> {{ page.page_destaque|richtext }} </h2>
                <button class="btn-cta" onclick="window.location.href='{{ page.button_link }}';">Saiba mais <i class="fa-solid fa-circle-chevron-right"></i></button>

                {% for block in page.body %}
                    {% if block.block_type != 'button' %}
                        {{ block }}
                    {% endif %}
                {% endfor %}
            </div>
            <div class="card-dinamico__content-image">
                <div class="img-cta">
                {% for block in page.background_image %}
                {{ block }}
                {% endfor %}
                </div>
                    <p>{{ page.paragrafo|safe }}</p>
                </div>
            </div>
        </div>
    </section>
    {% endif %}
    
    
    <!-- Card holofotes -->
    {% if page.teste_preview %}
    <section class="page-preview">
        <div class="wrapper-cards-holofotes">
            {% for block in page.teste_preview %}
                {{ block }}
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <!-- Card cursos SUAP -->
    {% if page.suap_courses %}
    <div>
        {% for block in page.suap_courses %}
            {{ block }}
        {% endfor %}
    </div>
    {% endif %}

    <!-- Card eventos SUAP -->
    {% if page.suap_events %}
    <section style="background-color: #F5F7FA;">
        {% for block in page.suap_events %}
            {{ block }}
        {% endfor %}
    </section>
    {% endif %}
    
    
    <!-- Cards noticias -->
    {% if page.teste_noticia %}
    <section class="section-noticias">
        {% for block in page.teste_noticia %}
            {% if block.block_type == "noticias_carousel" %}
                {{ block }}
            {% endif %}
        {% endfor %}
    </section>
    {% endif %}

    {% for block in page.parceiros %}
    {{ block }}
    {% endfor %}
    

    <section class="ouvidoria">
        <div class="container">
            <div class="canais-atendimento" style="padding: 0 15px;">
                <div class="title">
                    Ouvidoria e Acesso à Informação
                </div>
                <div class="title-header">
                    <p>
                        Você pode realizar manifestações nos seguintes canais
                    </p>
                </div>
                <div class="row cards">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex justify-content-center mb-3">
                        <a href="https://falabr.cgu.gov.br/Login/Identificacao/Identificacao.aspx?idFormulario=4&tipo=1&ReturnUrl=%2fpublico%2fManifestacao%2fRegistrarManifestacao.aspx%3fidFormulario%3d4%26tipo%3d1%26origem%3didp%26modo%3d" class="card-item">
                            <span class="fas fa-bullhorn"></span>
                            <div class="title">Denúncia</div>
                        </a>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex justify-content-center mb-3">
                        <a href="https://falabr.cgu.gov.br/Login/Identificacao/Identificacao.aspx?idFormulario=1&tipo=5&ReturnUrl=%2fpublico%2fManifestacao%2fRegistrarManifestacao.aspx%3fidFormulario%3d1%26tipo%3d5%26origem%3didp%26modo%3d" class="card-item">
                            <span class="fa fa-comments"></span>
                            <div class="title">Solicitação</div>
                        </a>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex justify-content-center mb-3">
                        <a href="https://falabr.cgu.gov.br/Login/Identificacao/Identificacao.aspx?idFormulario=1&tipo=4&ReturnUrl=%2fpublico%2fManifestacao%2fRegistrarManifestacao.aspx%3fidFormulario%3d1%26tipo%3d4%26origem%3didp%26modo%3d" class="card-item">
                            <span class="fa fa-comment"></span>
                            <div class="title">Sugestão</div>
                        </a>
                    </div>
                </div>
    
                <div class="row cards" style="margin-top: 30px;">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex justify-content-center mb-3">
                        <a href="https://falabr.cgu.gov.br/Login/Identificacao/Identificacao.aspx?idFormulario=1&tipo=3&ReturnUrl=%2fpublico%2fManifestacao%2fRegistrarManifestacao.aspx%3fidFormulario%3d1%26tipo%3d3%26origem%3didp%26modo%3d" class="card-item">
                            <span class="fa fa-thumbs-up"></span>
                            <div class="title">Elogio</div>
                        </a>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex justify-content-center mb-3">
                        <a href="https://falabr.cgu.gov.br/web/login?tipo=2&redirect=/manifestacao/criar?tipo=2" class="card-item">
                            <span class="fa fa-thumbs-down"></span>
                            <div class="title">Reclamação</div>
                        </a>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex justify-content-center mb-3">
                        <a href="https://falabr.cgu.gov.br/web/home" class="card-item">
                            <span class="fa fa-info-circle"></span>
                            <div class="title">Acesso à informação CGU</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
    

{% block footer %}
    {% include "enap_designsystem/includes/footer.html" %}
{% endblock %}



{% block scriptinline %}
<script>
    // Microfone — Speech Recognition API
    (function() {
        const micBtn = document.getElementById('heroMicBtn');
        const searchInput = document.getElementById('heroSearchInput');
        if (!micBtn || !searchInput) return;

        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        if (!SpeechRecognition) {
            micBtn.style.display = 'none';
            return;
        }

        const recognition = new SpeechRecognition();
        recognition.lang = 'pt-BR';
        recognition.continuous = false;
        recognition.interimResults = false;

        micBtn.addEventListener('click', function() {
            if (micBtn.classList.contains('listening')) {
                recognition.stop();
            } else {
                recognition.start();
            }
        });

        recognition.addEventListener('start', function() {
            micBtn.classList.add('listening');
            micBtn.setAttribute('aria-label', 'Ouvindo...');
        });

        recognition.addEventListener('result', function(e) {
            const transcript = e.results[0][0].transcript;
            searchInput.value = transcript;
            searchInput.focus();
        });

        recognition.addEventListener('end', function() {
            micBtn.classList.remove('listening');
            micBtn.setAttribute('aria-label', 'Buscar por voz');
        });

        recognition.addEventListener('error', function() {
            micBtn.classList.remove('listening');
            micBtn.setAttribute('aria-label', 'Buscar por voz');
        });
    })();

    function clearInput() {
        document.getElementById('searchInput').value = '';
        document.getElementById('searchInput').focus();
        toggleClearButton();
    }

    function toggleClearButton() {
        const input = document.getElementById('searchInput');
        const clearButton = document.getElementById('clearButton');
        clearButton.style.display = input.value ? 'block' : 'none';
    }

    // Função para verificar se é dispositivo móvel
    function isMobile() {
        return window.innerWidth <= 768; // Defina o breakpoint apropriado para seu site
    }

    // Quando o documento carrega, torna o search container visível apenas no desktop
    document.addEventListener('DOMContentLoaded', function() {
        const searchContainer = document.querySelector('.search-container');
        
        if (!isMobile()) {
            // Versão desktop - sempre visível
            searchContainer.classList.add('visible');
            searchContainer.classList.add('show');
        }
    });

    // Durante o scroll, comportamento responsivo
    window.addEventListener('scroll', function() {
        const searchContainer = document.querySelector('.search-container');
        const scrollPosition = window.scrollY;
        
        if (isMobile()) {
            // Versão mobile - só visível após scroll
            if (scrollPosition > 200) {
                searchContainer.classList.add('show');
            } else {
                searchContainer.classList.remove('show');
            }
        } else {
            // Versão desktop - sempre visível
            searchContainer.classList.add('visible');
            searchContainer.classList.add('show');
        }
    });

    // Recalcular quando a janela for redimensionada
    window.addEventListener('resize', function() {
        const searchContainer = document.querySelector('.search-container');
        
        if (!isMobile()) {
            // Versão desktop - sempre visível
            searchContainer.classList.add('visible');
            searchContainer.classList.add('show');
        } else {
            // Versão mobile - verificar posição de scroll
            const scrollPosition = window.scrollY;
            if (scrollPosition <= 200) {
                searchContainer.classList.remove('show');
            }
        }
    });


    function toggleHeroItem(element) {
        const dropdown = element.nextElementSibling;
        const isActive = element.classList.contains('active');
        
        // Fecha todos os outros dropdowns
        document.querySelectorAll('.hero-menu-trigger.active').forEach(trigger => {
            trigger.classList.remove('active');
            trigger.nextElementSibling.classList.remove('active');
        });
        
        // Toggle do dropdown atual
        if (!isActive) {
            element.classList.add('active');
            if (dropdown) {
                dropdown.classList.add('active');
            }
        }
    }
    
    // Fecha dropdown ao clicar fora
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.hero-sidebar-container')) {
            document.querySelectorAll('.hero-menu-trigger.active').forEach(trigger => {
                trigger.classList.remove('active');
                if (trigger.nextElementSibling) {
                    trigger.nextElementSibling.classList.remove('active');
                }
            });
        }
    });


    function toggleHeroDropdown(button) {
        const panel = button.nextElementSibling;
        const isActive = button.classList.contains('active');
        
        // Fecha todos os outros painéis
        document.querySelectorAll('.hero-menu-button.active').forEach(btn => {
            btn.classList.remove('active');
            btn.setAttribute('aria-expanded', 'false');
            if (btn.nextElementSibling?.classList.contains('hero-children-panel')) {
                btn.nextElementSibling.classList.remove('active');
            }
        });
        
        // Toggle do painel atual
        if (!isActive && panel) {
            button.classList.add('active');
            button.setAttribute('aria-expanded', 'true');
            panel.classList.add('active');
        }
    }
    
    // Fecha painel ao clicar fora
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.hero-menu-box')) {
            document.querySelectorAll('.hero-menu-button.active').forEach(btn => {
                btn.classList.remove('active');
                if (btn.nextElementSibling && btn.nextElementSibling.classList.contains('hero-children-panel')) {
                    btn.nextElementSibling.classList.remove('active');
                }
            });
        }
    });

    // ===== 3º nível: acessibilidade WCAG 1.4.13 =====

    // Mantém aria-expanded sincronizado com hover (mouse)
    document.querySelectorAll('.child-link-list').forEach(function(li) {
        var btn = li.querySelector('.child-toggle');
        if (!btn) return;

        li.addEventListener('mouseenter', function() {
            btn.setAttribute('aria-expanded', 'true');
        });
        li.addEventListener('mouseleave', function() {
            // Só colapsa o aria-expanded se o foco também saiu da li
            if (!li.contains(document.activeElement)) {
                btn.setAttribute('aria-expanded', 'false');
            }
        });
    });

    // Teclado: Enter / Espaço / ArrowRight no botão → move foco para 1º link do 3º nível
    document.addEventListener('keydown', function(e) {
        var target = e.target;

        // Ativação do 3º nível via teclado
        if (target.classList.contains('child-toggle')) {
            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowRight') {
                e.preventDefault();
                var li = target.closest('.child-link-list');
                var firstLink = li && li.querySelector('.grandchild-link');
                if (firstLink) {
                    target.setAttribute('aria-expanded', 'true');
                    // No mobile, adiciona .active para animar max-height
                    if (window.innerWidth <= 768) {
                        var list = li.querySelector('.hero-third-level-list');
                        if (list) list.classList.add('active');
                    }
                    firstLink.focus();
                }
            }
        }

        // Navegação dentro do 3º nível
        if (target.classList.contains('grandchild-link')) {
            var list = target.closest('.hero-third-level-list');
            if (!list) return;
            var links = Array.from(list.querySelectorAll('.grandchild-link'));
            var idx = links.indexOf(target);

            if (e.key === 'ArrowDown') {
                e.preventDefault();
                links[(idx + 1) % links.length].focus();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                links[(idx - 1 + links.length) % links.length].focus();
            } else if (e.key === 'ArrowLeft') {
                // Volta ao botão do 2º nível
                e.preventDefault();
                var toggleBtn = list.previousElementSibling;
                if (toggleBtn) {
                    toggleBtn.setAttribute('aria-expanded', 'false');
                    if (window.innerWidth <= 768) list.classList.remove('active');
                    toggleBtn.focus();
                }
            }
        }

        // ESC: fecha hierarquicamente (3º → 2º → fecha tudo)
        if (e.key === 'Escape') {
            // 1. Tenta fechar 3º nível focado
            var focusedGrandchild = document.activeElement &&
                document.activeElement.classList.contains('grandchild-link');
            if (focusedGrandchild) {
                e.preventDefault();
                var thirdList = document.activeElement.closest('.hero-third-level-list');
                var toggleBtn = thirdList && thirdList.previousElementSibling;
                if (toggleBtn) {
                    toggleBtn.setAttribute('aria-expanded', 'false');
                    if (window.innerWidth <= 768) thirdList.classList.remove('active');
                    toggleBtn.focus();
                }
                return;
            }

            // 2. Fecha 3º nível via aria-expanded abertos (hover sem foco)
            document.querySelectorAll('.child-toggle[aria-expanded="true"]').forEach(function(btn) {
                btn.setAttribute('aria-expanded', 'false');
                var li = btn.closest('.child-link-list');
                if (li) {
                    var thirdList = li.querySelector('.hero-third-level-list');
                    if (thirdList) thirdList.classList.remove('active');
                }
            });

            // 3. Fecha 2º nível (painel lateral)
            document.querySelectorAll('.hero-menu-button.active').forEach(function(btn) {
                btn.classList.remove('active');
                btn.setAttribute('aria-expanded', 'false');
                var panel = btn.nextElementSibling;
                if (panel && panel.classList.contains('hero-children-panel')) {
                    panel.classList.remove('active');
                }
                btn.focus();
            });
        }
    });
</script>
{% endblock %}