{% 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 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 content %}

    <header>
        <div class="capsulas-container capsulas-header-container">
            <div class="capsulas-logo">
                <i class="fas fa-universal-access"></i>
                Cápsulas de Acessibilidade
            </div>
            <nav>
                <ul>
                    <li><a href="/">Início</a></li>
                    <li><a href="/capsulas/">Cápsulas</a></li>
                    <li><a href="/recursos/">Recursos</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="capsulas-hero">
        {% if page.o_que_e_imagem %}
            {% for block in page.o_que_e_imagem %}
                {% if block.block_type == 'image' %}
                    {% image block.value fill-1200x800 as hero_img %}
                    <img src="{{ hero_img.url }}" alt="{{ block.value.title }}" class="capsulas-hero__image">
                {% endif %}
            {% endfor %}
        {% else %}
            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=1200&auto=format&fit=crop" alt="Acessibilidade" class="capsulas-hero__image">
        {% endif %}
        
        <div class="capsulas-hero__content">
            <span class="capsulas-hero__tag">
                {% if page.prioridade == 'obrigatorio' %}
                    Obrigatório
                {% else %}
                    Recomendado
                {% endif %}
            </span>
            <h1 class="capsulas-hero__title">{{ page.title }}</h1>
            <p class="capsulas-hero__description">{{ page.resumo_card }}</p>
            <a href="#content" class="capsulas-hero__cta">Explorar Conteúdo</a>
        </div>
    </section>

    <div class="capsulas-tab-navigation" id="tabNavigation">
        <div class="capsulas-tabs-container">
            <button class="capsulas-tab-arrow capsulas-tab-arrow--prev" id="prev-tab">
                <i class="fas fa-chevron-left"></i>
            </button>
            <div class="capsulas-tabs-scroll" id="tabs-scroll">
                <ul class="capsulas-tabs">
                    <li><button class="capsulas-tab-item capsulas-tab-item--active" data-target="section-what">O que é</button></li>
                    <li><button class="capsulas-tab-item" data-target="section-why">Por que é importante</button></li>
                    <li><button class="capsulas-tab-item" data-target="section-when">Quando utilizar</button></li>
                    <li><button class="capsulas-tab-item" data-target="section-how">Como aplicar</button></li>
                    <li><button class="capsulas-tab-item" data-target="section-check">Método de verificação</button></li>
                    <li><button class="capsulas-tab-item" data-target="section-examples">Exemplos</button></li>
                    <li><button class="capsulas-tab-item" data-target="section-dont">O que não fazer</button></li>
                    <li><button class="capsulas-tab-item" data-target="section-norms">Normas</button></li>
                </ul>
            </div>
            <button class="capsulas-tab-arrow capsulas-tab-arrow--next" id="next-tab">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>

    <div id="content" class="capsulas-main-content">
        <!-- O que é? -->
        <section id="section-what" class="capsulas-content-section">
            <div class="capsulas-container">
                <div class="capsulas-two-column">
                    <div>
                        <h2 class="capsulas-section-title-caps">O que é?</h2>
                        {{ page.o_que_e_resumo|safe }}
                        {% if page.o_que_e_detalhado %}
                        <div style="margin-top: 2rem;">
                            <button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-what')">
                                Ver detalhes <i class="fa-solid fa-circle-chevron-right"></i>
                            </button>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="capsulas-image-card">
                        {% if page.o_que_e_imagem %}
                            {% for block in page.o_que_e_imagem %}
                                {% if block.block_type == 'image' %}
                                    {% image block.value fill-800x600 as img %}
                                    <img src="{{ img.url }}" alt="{{ block.value.title }}">
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=800&auto=format&fit=crop" alt="Ilustração">
                        {% endif %}
                    </div>
                </div>

                {% if page.o_que_e_detalhado %}
                <div id="detail-what" class="capsulas-accordion">
                    <div class="capsulas-accordion__header" onclick="toggleAccordion('detail-what')">
                        <h3 class="capsulas-accordion__title">
                            <div class="capsulas-accordion__icon">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            Conteúdo Detalhado
                        </h3>
                        <div class="capsulas-accordion__toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="capsulas-accordion__body">
                        {{ page.o_que_e_detalhado|safe }}
                    </div>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- Por que é importante? -->
        <section id="section-why" class="capsulas-content-section">
            <div class="capsulas-container">

                <div class="capsulas-two-column">
                    <div class="capsulas-image-card">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop" alt="Importância da acessibilidade">
                    </div>
                    
                    <div>
                        <div class="capsulas-section-header">
                            <h2 class="capsulas-section-title-caps">Por que é importante?</h2>
                        </div>

                        {{ page.por_que_importante_resumo|safe }}

                        
                        
                        {% if page.por_que_importante_detalhado %}
                        <div style="margin-top: 2rem;">
                            <button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-why')">
                                Ver detalhes <i class="fa-solid fa-circle-chevron-right"></i>
                            </button>
                        </div>
                        {% endif %}
                    </div>
                </div>

                {% if page.por_que_importante_detalhado %}
                <div id="detail-why" class="capsulas-accordion">
                    <div class="capsulas-accordion__header" onclick="toggleAccordion('detail-why')">
                        <h3 class="capsulas-accordion__title">
                            <div class="capsulas-accordion__icon">
                                <i class="fas fa-star"></i>
                            </div>
                            Conteúdo Detalhado
                        </h3>
                        <div class="capsulas-accordion__toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="capsulas-accordion__body">
                        {{ page.por_que_importante_detalhado|safe }}
                    </div>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- Quando utilizar? -->
        <section id="section-when" class="capsulas-content-section">
            <div class="capsulas-container">
                <div class="capsulas-section-header">
                    <h2 class="capsulas-section-title-caps">Quando utilizar?</h2>
                </div>
                {{ page.quando_utilizar_resumo|safe }}

                {% if page.quando_utilizar_cards %}
                    {% for grid_block in page.quando_utilizar_cards %}
                        {% include_block grid_block %}
                    {% endfor %}
                {% endif %}
            </div>
        </section>

        <!-- Como aplicar? -->
        <section id="section-how" class="capsulas-content-section">
            <div class="capsulas-container">
                <div class="capsulas-two-column">
                    <div>
                        <div class="capsulas-section-header">
                            <h2 class="capsulas-section-title-caps">Como aplicar?</h2>
                        </div>
                        {{ page.como_aplicar_resumo|safe }}
                        
                        {% if page.como_aplicar_detalhado %}
                        <div style="margin-top: 2rem;">
                            <button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-how')">
                                Ver guia completo <i class="fa-solid fa-circle-chevron-right"></i>
                            </button>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="capsulas-image-card">
                        {% if page.como_aplicar_imagem %}
                            {% for block in page.como_aplicar_imagem %}
                                {% if block.block_type == 'image' %}
                                    {% image block.value fill-800x600 as img %}
                                    <img src="{{ img.url }}" alt="{{ block.value.title }}">
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=800&auto=format&fit=crop" alt="Como aplicar">
                        {% endif %}
                    </div>
                </div>

                {% if page.como_aplicar_detalhado %}
                <div id="detail-how" class="capsulas-accordion">
                    <div class="capsulas-accordion__header" onclick="toggleAccordion('detail-how')">
                        <h3 class="capsulas-accordion__title">
                            <div class="capsulas-accordion__icon">
                                <i class="fas fa-tools"></i>
                            </div>
                            Guia de Implementação
                        </h3>
                        <div class="capsulas-accordion__toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="capsulas-accordion__body">
                        {{ page.como_aplicar_detalhado|safe }}
                    </div>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- Método de verificação -->
        <section id="section-check" class="capsulas-content-section">
            <div class="capsulas-container">
                <div class="capsulas-section-header">
                    <h2 class="capsulas-section-title-caps">Método de verificação</h2>
                    <p class="capsulas-section-description">Saiba como verificar se o padrão foi corretamente implementado.</p>
                </div>

                {{ page.metodo_verificacao_resumo|safe }}

                {% if page.metodo_verificacao_cards %}
                    <div class="capsulas-cards-grid">
                        {% for block in page.metodo_verificacao_cards %}
                            {% if block.block_type == 'enap_cardgrid' %}
                                {% for card_block in block.value %}
                                    {% if card_block.block_type == 'card' %}
                                        <div class="capsulas-content-card">
                                            <div class="capsulas-card__body">
                                                <h3 class="capsulas-card__title">
                                                    <i class="fas fa-check-circle" style="color: var(--green); margin-right: 0.5rem;"></i>
                                                    {{ card_block.value.titulo }}
                                                </h3>
                                                <p class="capsulas-card__text">{{ card_block.value.texto }}</p>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </section>

        <!-- Exemplos -->
        <section id="section-examples" class="capsulas-content-section">
            <div class="capsulas-container">
                <div class="capsulas-section-header">
                    <h2 class="capsulas-section-title-caps">Exemplos</h2>
                    <p class="capsulas-section-description">Confira exemplos práticos de implementação do padrão.</p>
                </div>

                {{ page.exemplos_resumo|safe }}

                {% if page.exemplos_detalhado %}
                <div style="margin-top: 2rem;">
                    <button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-examples')">
                        Ver exemplos detalhados <i class="fa-solid fa-circle-chevron-right"></i>
                    </button>
                </div>
                
                <div id="detail-examples" class="capsulas-accordion">
                    <div class="capsulas-accordion__header" onclick="toggleAccordion('detail-examples')">
                        <h3 class="capsulas-accordion__title">
                            <div class="capsulas-accordion__icon">
                                <i class="fas fa-code"></i>
                            </div>
                            Exemplos Detalhados
                        </h3>
                        <div class="capsulas-accordion__toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="capsulas-accordion__body">
                        {{ page.exemplos_detalhado|safe }}
                    </div>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- O que não fazer? -->
        <section id="section-dont" class="capsulas-content-section">
            <div class="capsulas-container">
                <div class="capsulas-section-header capsulas-section-header--center">
                    <h2 class="capsulas-section-title-caps">O que não fazer?</h2>
                    <p class="capsulas-section-description">Conheça os erros mais comuns e práticas que devem ser evitadas.</p>
                </div>

                <div class="capsulas-two-column">
                    <div class="capsulas-image-card">
                        <img src="https://images.unsplash.com/photo-1594322436404-5a0526db4d13?q=80&w=800&auto=format&fit=crop" alt="Erros comuns">
                    </div>
                    
                    <div>
                        {{ page.o_que_nao_fazer_resumo|safe }}
                        
                        {% if page.o_que_nao_fazer_detalhado %}
                        <div style="margin-top: 2rem;">
                            <button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-dont')">
                                Ver análise completa <i class="fa-solid fa-circle-chevron-right"></i>
                            </button>
                        </div>
                        {% endif %}
                    </div>
                </div>

                {% if page.o_que_nao_fazer_detalhado %}
                <div id="detail-dont" class="capsulas-accordion">
                    <div class="capsulas-accordion__header" onclick="toggleAccordion('detail-dont')">
                        <h3 class="capsulas-accordion__title">
                            <div class="capsulas-accordion__icon">
                                <i class="fas fa-ban"></i>
                            </div>
                            Análise de Erros
                        </h3>
                        <div class="capsulas-accordion__toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="capsulas-accordion__body">
                        {{ page.o_que_nao_fazer_detalhado|safe }}
                    </div>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- Normas de referência -->
        <section id="section-norms" class="capsulas-content-section">
            <div class="capsulas-container">
                <div class="capsulas-section-header">
                    <h2 class="capsulas-section-title-caps">Normas de referência</h2>
                    <p class="capsulas-section-description">Conheça as principais normas e diretrizes relacionadas.</p>
                </div>

                {% if page.normas_referencia %}
                    {{ page.normas_referencia|safe }}
                {% endif %}
            </div>
        </section>

        <!-- Cápsulas Relacionadas -->
        {% if capsulas_relacionadas %}
        <section class="capsulas-content-section" style="background-color: var(--primary-light);">
            <div class="capsulas-container">
                <div class="capsulas-section-header">
                    <h2 class="capsulas-section-title-caps">Cápsulas Relacionadas</h2>
                    <p class="capsulas-section-description">Explore outras cápsulas que podem complementar seu aprendizado.</p>
                </div>

                <div class="capsulas-cards-grid">
                    {% for capsula in capsulas_relacionadas %}
                        <div class="capsulas-content-card">
                            <div class="capsulas-card__body">
                                <h3 class="capsulas-card__title">
                                    <a href="{% pageurl capsula %}" style="color: var(--primary); text-decoration: none;">
                                        {{ capsula.title }}
                                    </a>
                                </h3>
                                <p class="capsulas-card__text">{{ capsula.resumo_card }}</p>
                                <a href="{% pageurl capsula %}" class="capsulas-btn capsulas-btn--primary">
                                    Explorar <i class="fa-solid fa-circle-chevron-right"></i>
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        {% endif %}
    </div>

{% endblock %}

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


{% block scriptinline %}
<script>
    // Tab Navigation
    const tabs = document.querySelectorAll('.tab-item');
    const sections = document.querySelectorAll('.content-section');
    const tabNavigation = document.getElementById('tabNavigation');
    const tabsScroll = document.getElementById('tabs-scroll');
    const prevBtn = document.getElementById('prev-tab');
    const nextBtn = document.getElementById('next-tab');

    // Scroll Navigation
    prevBtn.addEventListener('click', () => {
        tabsScroll.scrollBy({ left: -200, behavior: 'smooth' });
    });

    nextBtn.addEventListener('click', () => {
        tabsScroll.scrollBy({ left: 200, behavior: 'smooth' });
    });

    // Tab Click
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const targetId = tab.getAttribute('data-target');
            const targetSection = document.getElementById(targetId);
            
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            
            targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    });

    // Sticky Tab Navigation
    let lastScroll = 0;
    window.addEventListener('scroll', () => {
        const heroHeight = document.querySelector('.hero').offsetHeight;
        const currentScroll = window.pageYOffset;
        
        if (currentScroll > heroHeight - 100) {
            tabNavigation.classList.add('fixed');
        } else {
            tabNavigation.classList.remove('fixed');
        }

        // Update active tab based on scroll position
        sections.forEach((section, index) => {
            const sectionTop = section.offsetTop - 200;
            const sectionBottom = sectionTop + section.offsetHeight;
            
            if (currentScroll >= sectionTop && currentScroll < sectionBottom) {
                tabs.forEach(t => t.classList.remove('active'));
                tabs[index].classList.add('active');
            }
        });

        lastScroll = currentScroll;
    });

    // Accordion Toggle
    function toggleAccordion(id) {
        const accordion = document.getElementById(id);
        accordion.classList.toggle('active');
    }

    // Smooth scroll for hero CTA
    document.querySelector('.hero-cta').addEventListener('click', (e) => {
        e.preventDefault();
        document.getElementById('content').scrollIntoView({ behavior: 'smooth' });
    });
</script>
{% endblock %}