{% extends 'partials/base.html.twig' %}

{% block body %}
{%- set h = page.header -%}
{%- set ed_colors = ['historia', 'geopolitica', 'defesa', 'seguranca', 'gestao-lideranca', 'interesse-nacional'] -%}
<div class="container">
  {% include 'partials/breadcrumbs.html.twig' %}

  <header class="about-hero">
    <span class="editoria-head__badge">Instituto GSEC</span>
    <h1 class="about-hero__title">{{ page.title }}</h1>
    {% if h.summary %}<p class="about-hero__summary">{{ h.summary }}</p>{% endif %}
    {% if h.hero_lead %}<p class="about-hero__lead">{{ h.hero_lead }}</p>{% endif %}
  </header>

  {% if h.quem_somos %}
  <section class="section-band about-split" aria-label="{{ h.quem_somos.title }}">
    <div class="about-split__main">
      <h2 class="main-head" style="margin-bottom:20px;">{{ h.quem_somos.title }}</h2>
      {% for p in h.quem_somos.body %}<p>{{ p }}</p>{% endfor %}
    </div>
    {% if h.facts %}
    <aside class="about-split__aside">
      <div class="about-facts-card">
        {% for f in h.facts %}
        <div class="about-facts-card__item">
          <span class="about-facts-card__label">{{ f.label }}</span>
          <span class="about-facts-card__value">{{ f.value }}</span>
        </div>
        {% endfor %}
      </div>
    </aside>
    {% endif %}
  </section>
  {% endif %}

  {% if h.mission or h.vision %}
  <section style="padding-right: 32px;padding-left: 32px;" class="section-band section-band--alt" aria-label="Missão e Visão">
    <div class="about-mv">
      {% if h.mission %}
      <article class="about-card" style="--card-accent: var(--c-accent);">
        <h2 class="about-card__title">{{ h.mission.title }}</h2>
        {% if h.mission.lead %}<p class="about-card__lead">{{ h.mission.lead }}</p>{% endif %}
        {% for p in h.mission.body %}<p>{{ p }}</p>{% endfor %}
      </article>
      {% endif %}
      {% if h.vision %}
      <article class="about-card" style="--card-accent: var(--c-blue);">
        <h2 class="about-card__title">{{ h.vision.title }}</h2>
        {% if h.vision.lead %}<p class="about-card__lead">{{ h.vision.lead }}</p>{% endif %}
        {% for p in h.vision.body %}<p>{{ p }}</p>{% endfor %}
      </article>
      {% endif %}
    </div>
  </section>
  {% endif %}

  {% if h.autonomy %}
  <section class="section-band" aria-label="{{ h.autonomy.title }}">
    <h2 class="main-head" style="margin-bottom:20px;">{{ h.autonomy.title }}</h2>
    <div class="about-autonomy">
      {% if h.autonomy.lead %}<p class="about-autonomy__lead">{{ h.autonomy.lead }}</p>{% endif %}
      {% for p in h.autonomy.body %}<p>{{ p }}</p>{% endfor %}
    </div>
  </section>
  {% endif %}

  {% if h.principles|length %}
  <section class="section-band" aria-label="{{ h.principles_title|default('Princípios Fundadores') }}">
    <h2 class="main-head" style="margin-bottom:20px;">{{ h.principles_title|default('Princípios Fundadores') }}</h2>
    <div class="principles-grid">
      {% for pr in h.principles %}
        {%- set edslug = ed_colors[loop.index0 % ed_colors|length] -%}
        <article class="principle-card" style="--pc: var(--ed-{{ edslug }});">
          <span class="principle-card__num">{{ loop.index }}</span>
          <h3 class="principle-card__title">{{ pr.title }}</h3>
          {% if pr.lead %}<p class="principle-card__lead">{{ pr.lead }}</p>{% endif %}
          {% for p in pr.body %}<p>{{ p }}</p>{% endfor %}
        </article>
      {% endfor %}
    </div>
  </section>
  {% endif %}
</div>
{% endblock %}