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


{% block metadata %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ page.descricao_curta }}">
    <link rel="stylesheet" href="{% static 'enap_designsystem/css/acess-capsulas-custom.css' %}">
    <style>
        .route-sidebar {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .route-sidebar.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
    </style>
{% 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="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 page.navbar %}
        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
    {% else %}
        <p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
    {% endif %}
{% endblock %}


{% block body_class %}{{ page.tipo_rota }}{% endblock %}

{% block content %}


{% for block in page.menu %}
    {% include_block block %}
{% endfor %}
<!-- Skip link para acessibilidade -->
<a href="#main-content" class="skip-to-content">Pular para o conteúdo principal</a>

<div class="route-container">
    
    <!-- Cabeçalho da rota -->
    <header class="route-header">
        <div class="route-header__icon">
            {% if page.icone %}
                {% image page.icone width-80 as icon %}
                <img src="{{ icon.url }}" alt="Ícone da página" aria-hidden="true">
            {% else %}
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
            {% endif %}
        </div>

        {% if page.descricao_curta %}
            <p>{{ page.descricao_curta }}</p>
        {% endif %}
        
        <h2>{{ page.title }}</h2>
        
        {% if page.descricao_curta %}
            <p>{{ page.descricao_curta }}</p>
        {% endif %}
        
        <div class="route-header__meta">
            <div class="route-header__stat">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="9" y1="9" x2="15" y2="9"></line>
                    <line x1="9" y1="15" x2="15" y2="15"></line>
                </svg>
                <span>{{ page.capsulas_vinculadas.count }} cápsulas</span>
            </div>
        </div>
    </header>

    <!-- Layout com sidebar de navegação -->
    <div class="route-layout">
        <!-- Sidebar com navegação fixa -->
        <div class="route-sidebar" role="navigation" aria-label="Índice de navegação">
            <div class="route-sidebar__content">
                <h3 class="route-sidebar__title">Índice</h3>
                <nav class="route-sidebar__nav" aria-label="Seções da rota">
                    <ul>
                        <li>
                            <a href="#apresentacao" class="route-sidebar__link active">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="16" x2="12" y2="12"></line>
                                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
                                </svg>
                                <span>Apresentação</span>
                            </a>
                        </li>
                        <li>
                            <a href="#por-onde-comecar" class="route-sidebar__link">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <polyline points="12 6 12 12 16 14"></polyline>
                                </svg>
                                <span>Por onde começar</span>
                            </a>
                        </li>
                        <li>
                            <a href="#capsulas-essenciais" class="route-sidebar__link">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="9" y1="9" x2="15" y2="9"></line>
                                    <line x1="9" y1="15" x2="15" y2="15"></line>
                                </svg>
                                <span>Cápsulas essenciais</span>
                            </a>
                        </li>
                        <li>
                            <a href="#boas-praticas" class="route-sidebar__link">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                                </svg>
                                <span>Boas práticas</span>
                            </a>
                        </li>
                        <li>
                            <a href="#materiais-extras" class="route-sidebar__link">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                                </svg>
                                <span>Materiais extras</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- Conteúdo principal com seções em formato de "steps" -->
        <section id="main-content" class="route-main-content">
            <div class="route-steps-container">
                <div class="route-path"></div>
            
            <!-- 1. Apresentação da Rota -->
            <section id="apresentacao" class="route-step" role="tabpanel" aria-labelledby="apresentacao-titulo" tabindex="-1">
                <div class="step-header">
                    <div class="step-counter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="16" x2="12" y2="12"></line>
                        <line x1="12" y1="8" x2="12.01" y2="8"></line>
                    </svg></div>
                    <h2 id="apresentacao-titulo" class="step-title">Apresentação da Rota</h2>
                </div>
                <p class="step-subtitle">Conheça o objetivo desta rota de aprendizagem</p>
                
                <div class="route-step__content">
                    {{ page.apresentacao|richtext }}
                    
                    <div class="route-quote">
                        <blockquote class="route-quote__text">
                            Esta rota foi desenvolvida para guiar você em uma jornada de aprendizado estruturada e eficiente. Siga os passos recomendados e aproveite ao máximo cada conteúdo.
                        </blockquote>
                    </div>
                </div>
            </section>
            
            <!-- 2. Por onde começar? -->
            <section id="por-onde-comecar" class="route-step" role="tabpanel" aria-labelledby="por-onde-comecar-titulo" tabindex="-1">
                <div class="step-header">
                    <div class="step-counter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="16" x2="12" y2="12"></line>
                        <line x1="12" y1="8" x2="12.01" y2="8"></line>
                    </svg></div>
                    <h2 id="por-onde-comecar-titulo" class="step-title">Por onde começar?</h2>
                </div>
                <p class="step-subtitle">Primeiros passos para iniciar sua jornada</p>
                
                <div class="route-step__content">
                    {{ page.por_onde_comecar|richtext }}
                </div>
            </section>
            
            <!-- 3. Cápsulas essenciais para esta Rota -->
            <section id="capsulas-essenciais" class="route-step" role="tabpanel" aria-labelledby="capsulas-essenciais-titulo" tabindex="-1">
                <div class="step-header">
                    <div class="step-counter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="9" y1="9" x2="15" y2="9"></line>
                        <line x1="9" y1="15" x2="15" y2="15"></line>
                    </svg></div>
                    <h2 id="capsulas-essenciais-titulo" class="step-title">Cápsulas essenciais para esta Rota</h2>
                </div>
                
                <div class="route-step__content">
                    {% if page.texto_capsulas %}
                        <div class="route-section-intro">
                            {{ page.texto_capsulas|richtext }}
                        </div>
                    {% endif %}
                    
                    <!-- Grade de cápsulas -->
                    <div class="route-capsules">
                        {% for capsula_item in page.capsulas_vinculadas.all %}
                            {% with capsula=capsula_item.capsula %}
                                <div style="padding: 0;" class="acess-capsula-link">
                                    <a href="{{ capsula.url }}">
                                        <div class="acess-capsula-card {% if capsula_item.destaque %}route-capsule--featured{% endif %}">
                                            <div class="acess-capsula-content">
                                                <div class="acess-capsula-icon">
                                                    <i class="icon-class {{ capsula.specific.icone }}"></i>
                                                </div>
                                                <h2 class="acess-capsula-titulo">{{ capsula.title }}</h2>
                                                <p class="acess-capsula-descricao">
                                                    {% if capsula_item.texto_contextualizacao %}
                                                        {{ capsula_item.texto_contextualizacao }}
                                                    {% elif capsula.specific.resumo_card %}
                                                        {{ capsula.specific.resumo_card }}
                                                    {% elif capsula.specific.o_que_e_resumo %}
                                                        {{ capsula.specific.o_que_e_resumo }}
                                                    {% elif capsula.specific.descricao_curta %}
                                                        {{ capsula.specific.descricao_curta }}
                                                    {% endif %}
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            {% endwith %}
                        {% empty %}
                            <div class="route-empty">
                                <div class="route-empty__icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="12" y1="8" x2="12" y2="12"></line>
                                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                                    </svg>
                                </div>
                                <h3 class="route-empty__title">Nenhuma cápsula vinculada</h3>
                                <p class="route-empty__text">Em breve adicionaremos conteúdo para esta rota. Fique atento às atualizações!</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </section>

            <!-- 4 Boas Práticas -->
            <section id="boas-praticas" class="route-step" role="tabpanel" aria-labelledby="boas-praticas-titulo" tabindex="-1">
                <div class="step-header">
                    <div class="step-counter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg></div>
                    <h2 id="boas-praticas-titulo" class="step-title">{{ page.titulo_boas_praticas }}</h2>
                </div>
                
                <div class="route-step__content">
                    {{ page.descricao_boas_praticas|richtext }}
                </div>
            </section>
            
            <!-- 5. Materiais extras -->
            <section id="materiais-extras" class="route-step" role="tabpanel" aria-labelledby="materiais-extras-titulo" tabindex="-1">
                <div class="step-header">
                    <div class="step-counter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                    </svg></div>
                    <h2 id="materiais-extras-titulo" class="step-title">Onde posso aprender mais?</h2>
                </div>
                <p class="step-subtitle">Recursos complementares para aprofundar seus conhecimentos</p>
                
                <div class="route-step__content">
                    {% if page.texto_materiais_extras %}
                        <div class="route-section-intro">
                            {{ page.texto_materiais_extras|richtext }}
                        </div>
                    {% endif %}
                    
                    <div class="route-capsules">
                        {% for block in page.materiais_externos %}
                            {% include_block block with extra_classes="route-capsule" %}
                        {% empty %}
                            <div class="route-empty">
                                <div class="route-empty__icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <line x1="12" y1="8" x2="12" y2="12"></line>
                                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                                    </svg>
                                </div>
                                <h3 class="route-empty__title">Materiais em desenvolvimento</h3>
                                <p class="route-empty__text">Em breve adicionaremos materiais complementares para esta rota. Fique atento às atualizações!</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </section>
            </div>
        </section>
    </div>
</div>

<!-- Botão flutuante para voltar ao topo -->
<button type="button" id="back-to-top" class="back-to-top" aria-label="Voltar ao topo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="18 15 12 9 6 15"></polyline>
    </svg>
</button>

<!-- Elemento para anúncios de acessibilidade -->
<div id="a11y-status" class="visually-hidden" aria-live="polite" role="status"></div>

{% for block in page.cards %}
    {% include_block block %}
{% endfor %}

{% endblock %}


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

{% block extra_js %}
{{ block.super }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Links de navegação da sidebar
        const navLinks = document.querySelectorAll('.route-sidebar__link');
        const backToTopBtn = document.getElementById('back-to-top');
        const sections = document.querySelectorAll('.route-step');
        const STICKY_OFFSET = 130; // alinhado com o top: 120px do CSS sticky

        // Verificar qual seção está visível na viewport
        let ticking = false;
        function checkVisibleSections() {
            let currentSectionIndex = 0;

            sections.forEach((section, index) => {
                const rect = section.getBoundingClientRect();
                if (rect.top <= STICKY_OFFSET && rect.bottom >= STICKY_OFFSET) {
                    currentSectionIndex = index;
                }
            });

            // Atualizar link ativo na sidebar
            navLinks.forEach((link, index) => {
                if (index === currentSectionIndex) {
                    link.classList.add('active');

                    // Anunciar mudança de seção para tecnologias assistivas
                    const sectionTitle = sections[currentSectionIndex].querySelector('.step-title').textContent;
                    const a11yStatus = document.getElementById('a11y-status');
                    a11yStatus.textContent = `Seção atual: ${sectionTitle}`;
                } else {
                    link.classList.remove('active');
                }
            });
        }

        // Rolagem suave para as seções
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                // Remove classe active de todos os links
                navLinks.forEach(l => l.classList.remove('active'));

                // Adiciona classe active ao link clicado
                this.classList.add('active');

                // Rolagem suave até a seção
                const targetId = this.getAttribute('href');
                const targetSection = document.querySelector(targetId);

                if (targetSection) {
                    targetSection.classList.add('highlight-section');

                    window.scrollTo({
                        top: targetSection.offsetTop - STICKY_OFFSET,
                        behavior: 'smooth'
                    });

                    history.pushState(null, null, targetId);

                    setTimeout(() => {
                        targetSection.classList.remove('highlight-section');
                    }, 1500);
                }
            });
        });

        // Inicializar com base na URL
        function initFromUrl() {
            const hash = window.location.hash || '#apresentacao';
            const targetLink = document.querySelector(`.route-sidebar__link[href="${hash}"]`);
            const targetSection = document.querySelector(hash);

            if (targetLink && targetSection) {
                navLinks.forEach(link => link.classList.remove('active'));
                targetLink.classList.add('active');

                setTimeout(() => {
                    window.scrollTo({
                        top: targetSection.offsetTop - STICKY_OFFSET,
                        behavior: 'auto'
                    });
                }, 200);
            }
        }

        // Eventos com requestAnimationFrame para performance
        window.addEventListener('scroll', function() {
            if (!ticking) {
                window.requestAnimationFrame(function() {
                    checkVisibleSections();

                    if (window.scrollY > 500) {
                        backToTopBtn.classList.add('visible');
                    } else {
                        backToTopBtn.classList.remove('visible');
                    }
                    ticking = false;
                });
                ticking = true;
            }
        });

        // Botão voltar ao topo
        backToTopBtn.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Esconde a sidebar quando o fim do layout estiver visível
        window.addEventListener('load', function() {
            const routeSidebar = document.querySelector('.route-sidebar');
            const routeLayout = document.querySelector('.route-layout');

            if (!routeSidebar || !routeLayout) return;

            window.addEventListener('scroll', () => {
                const layoutRect = routeLayout.getBoundingClientRect();
                if (layoutRect.bottom <= window.innerHeight + 100) {
                    routeSidebar.classList.add('hidden');
                } else {
                    routeSidebar.classList.remove('hidden');
                }
            }, { passive: true });
        });

        // Inicializar tudo
        initFromUrl();

        // Efeito hover nas cápsulas para destacar o botão
        const capsules = document.querySelectorAll('.route-capsule');
        capsules.forEach(capsule => {
            capsule.addEventListener('mouseenter', function() {
                const button = this.querySelector('.btn');
                if (button) {
                    button.classList.add('pulse');
                }
            });
            
            capsule.addEventListener('mouseleave', function() {
                const button = this.querySelector('.btn');
                if (button) {
                    button.classList.remove('pulse');
                }
            });
            
            // Fazer o card inteiro clicável
            capsule.addEventListener('click', function(e) {
                if (e.target.tagName !== 'A') {
                    const link = this.querySelector('.route-capsule__footer a');
                    if (link) {
                        link.click();
                    }
                }
            });
        });
    });
</script>
{% endblock %}