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

{% block title %}
    <title>{{ page.title }}</title>
{% 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 %}
<div class="edital-page">

<!-- =========================================================================
     1. CABEÇALHO / IDENTIFICAÇÃO
     ========================================================================= -->
<section class="edital-hero">
    <h1 class="edital-hero-titulo">{{ page.title }}</h1>
    {% if page.descricao_curta %}
        <p class="edital-hero-descricao">{{ page.descricao_curta }}</p>
    {% endif %}
</section>

<!-- Menu de âncoras -->
<nav class="edital-anchor-nav">
    {% if page.publico_alvo %}<a href="#publico-alvo">Para quem é destinado</a>{% endif %}
    {% if page.documentos_edital or page.texto_intro_edital %}<a href="#edital">Edital de Seleção</a>{% endif %}
    <a href="#inscricao">Como se inscrever</a>
    {% if page.resultados %}<a href="#resultados">Resultados</a>{% endif %}
    {% if page.matricula_ativa %}<a href="#matricula">Matrícula</a>{% endif %}
    {% if page.faq %}<a href="#faq">FAQ</a>{% endif %}
    {% if page.email_contato %}<a href="#contato">Contato</a>{% endif %}
</nav>

<!-- =========================================================================
     2. PARA QUEM É DESTINADO
     ========================================================================= -->
{% if page.publico_alvo or page.requisitos_adicionais %}
    <section id="publico-alvo" class="edital-section bg-white">
        <h2 class="edital-section-titulo">Para quem é destinado?</h2>
        {% for block in page.publico_alvo %}
            {% include_block block %}
        {% endfor %}
        {% if page.requisitos_adicionais %}
            <div class="edital-requisitos-adicionais">
                <h3>Requisitos adicionais</h3>
                {{ page.requisitos_adicionais|richtext }}
            </div>
        {% endif %}
    </section>
{% endif %}

<!-- =========================================================================
     3. EDITAL DE SELEÇÃO
     ========================================================================= -->
<section id="edital" class="edital-section bg-light">
    <h2 class="edital-section-titulo">Edital de Seleção</h2>
    {% if page.texto_intro_edital %}
        <div class="edital-texto">{{ page.texto_intro_edital|richtext }}</div>
    {% endif %}
    {% for block in page.documentos_edital %}
        {% include_block block %}
    {% endfor %}
</section>

<!-- =========================================================================
     4. COMO SE INSCREVER
     ========================================================================= -->
<section id="inscricao" class="edital-section bg-white">
    <h2 class="edital-section-titulo">Como se inscrever?</h2>
    {% if page.texto_inscricao %}
        <div class="edital-texto">{{ page.texto_inscricao|richtext }}</div>
    {% endif %}

    {% if page.inscricao_inicio or page.inscricao_fim %}
        <p class="edital-periodo-inscricao">
            {% if page.inscricao_inicio %}Das {{ page.inscricao_inicio|date:"H\hi" }} do dia {{ page.inscricao_inicio|date:"d/m/Y" }}{% endif %}
            {% if page.inscricao_fim %} até as {{ page.inscricao_fim|date:"H\hi" }} do dia {{ page.inscricao_fim|date:"d/m/Y" }}{% endif %}
            , horário de Brasília-DF.
        </p>
    {% endif %}

    {% if page.turmas %}
        <h3 class="edital-turmas-titulo">Turmas disponíveis</h3>
        <div class="edital-turmas-grid">
            {% for block in page.turmas %}
                {% include_block block %}
            {% endfor %}
        </div>
    {% endif %}

    {% if page.aviso_cadastro_govbr %}
        <div class="edital-aviso-govbr">
            Para se inscrever, é necessário possuir cadastro no
            <a href="https://sso.acesso.gov.br/" target="_blank" rel="noopener noreferrer">Gov.br</a>.
        </div>
    {% endif %}

    <div class="edital-cta-inscricao">
        {% if page.inscricoes_encerradas %}
            <span class="edital-badge-encerrado">Inscrições encerradas</span>
        {% elif page.link_inscricao %}
            <a href="{{ page.link_inscricao }}" target="_blank" rel="noopener noreferrer" class="edital-btn-inscreva">
                Inscreva-se
            </a>
        {% endif %}
    </div>
</section>

<!-- =========================================================================
     5. RESULTADOS E RETIFICAÇÕES
     ========================================================================= -->
{% if page.resultados %}
    <section id="resultados" class="edital-section bg-light">
        <h2 class="edital-section-titulo">Resultados e Retificações</h2>
        <div class="edital-resultados-lista">
            {% for block in page.resultados %}
                {% include_block block %}
            {% endfor %}
        </div>
    </section>
{% endif %}

<!-- =========================================================================
     6. MATRÍCULA (condicional)
     ========================================================================= -->
{% if page.matricula_ativa %}
    <section id="matricula" class="edital-section bg-white">
        <h2 class="edital-section-titulo">Matrícula</h2>
        {% if page.texto_matricula %}
            <div class="edital-texto">{{ page.texto_matricula|richtext }}</div>
        {% endif %}
        {% if page.link_matricula %}
            <a href="{{ page.link_matricula }}" target="_blank" rel="noopener noreferrer" class="edital-btn-inscreva">
                Acessar sistema de matrícula
            </a>
        {% endif %}
        {% for block in page.documentos_matricula %}
            {% include_block block %}
        {% endfor %}
    </section>
{% endif %}

<!-- =========================================================================
     7. PERGUNTAS FREQUENTES (FAQ)
     ========================================================================= -->
{% if page.faq %}
    <section id="faq" class="edital-section bg-light">
        <h2 class="edital-section-titulo">Perguntas Frequentes</h2>
        <div class="edital-faq-lista">
            {% for block in page.faq %}
                {% include_block block %}
            {% endfor %}
        </div>
    </section>
{% endif %}

<!-- =========================================================================
     8. CONTATO
     ========================================================================= -->
{% if page.email_contato %}
    <section id="contato" class="edital-section bg-white">
        <h2 class="edital-section-titulo">Contato</h2>
        <p><a href="mailto:{{ page.email_contato }}">{{ page.email_contato }}</a></p>
    </section>
{% endif %}

<!-- =========================================================================
     FOOTER
     ========================================================================= -->
{% if page.footer %}
    {% include_block page.footer %}
{% endif %}

</div>

<style>
.edital-page {
    max-width: 100%;
    background-color: #fff;
}
.edital-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #024248 0%, #036b6f 55%, #007D7A 100%);
    color: #fff;
    padding: 80px 24px;
    text-align: center;
    isolation: isolate;
}
.edital-hero::before,
.edital-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    z-index: -1;
}
.edital-hero::before {
    width: 420px;
    height: 420px;
    top: -220px;
    right: -120px;
}
.edital-hero::after {
    width: 300px;
    height: 300px;
    bottom: -180px;
    left: -80px;
    background: rgba(0, 0, 0, 0.12);
}
.edital-hero-titulo {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 18px 0;
}
.edital-hero-descricao {
    font-size: 18px;
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
}
.edital-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.edital-anchor-nav a {
    color: #024248;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.edital-anchor-nav a:hover {
    background-color: #eaf5f4;
    color: #007D7A;
}
.edital-section {
    padding: 64px 24px;
    max-width: 960px;
    margin: 0 auto;
}
.edital-section.bg-light {
    background-color: #f6f8f9;
    max-width: 100%;
}
.edital-section.bg-light > * {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.edital-section-titulo {
    color: #024248;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
    position: relative;
    padding-left: 18px;
}
.edital-section-titulo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    border-radius: 4px;
    background: linear-gradient(180deg, #007D7A, #024248);
}
.edital-texto {
    color: #3a3a3a;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 24px;
}
.edital-requisitos-adicionais {
    margin-top: 24px;
    background-color: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 2px 10px rgba(2, 66, 72, 0.06);
}
.edital-requisitos-adicionais h3 {
    color: #024248;
    font-size: 18px;
    margin-bottom: 8px;
}
.edital-periodo-inscricao {
    font-weight: 600;
    color: #024248;
    margin-bottom: 16px;
}
.edital-aviso-govbr {
    background-color: #fff8e6;
    border-left: 4px solid #ffc107;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 24px;
}
.edital-turmas-titulo {
    color: #024248;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 28px 0 14px 0;
}
.edital-turmas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.edital-cta-inscricao {
    margin-top: 8px;
}
.edital-btn-inscreva {
    display: inline-block;
    background: linear-gradient(135deg, #1351b4, #024248);
    color: #fff;
    font-weight: 600;
    padding: 15px 36px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(19, 81, 180, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.edital-btn-inscreva:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(2, 66, 72, 0.3);
}
.edital-badge-encerrado {
    display: inline-block;
    background-color: #64748b;
    color: #fff;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 50px;
}
.edital-resultados-lista {
    background-color: #fff;
    border-radius: 16px;
    padding: 8px 24px;
    box-shadow: 0 2px 12px rgba(2, 66, 72, 0.06);
}
.edital-faq-lista {
    max-width: 800px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .edital-hero {
        padding: 48px 16px;
    }
    .edital-hero-titulo {
        font-size: 26px;
    }
    .edital-section {
        padding: 40px 16px;
    }
    .edital-section-titulo {
        font-size: 22px;
    }
}
</style>
{% endblock %}