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

{% block body %}
{%- set loc = page.header.location ?? null -%}
{%- set social = theme.social ?? {} -%}
<div class="container">
  {% include 'partials/breadcrumbs.html.twig' %}

  <header class="editoria-head" style="--ed: var(--c-accent);">
    {% if page.header.badge %}<span class="editoria-head__badge">{{ page.header.badge }}</span>{% endif %}
    <h1 class="editoria-head__title">{{ page.title }}</h1>
    {% if page.header.summary %}<div class="editoria-head__desc">{{ page.header.summary }}</div>{% endif %}
  </header>

  <div class="contact-layout">
    <section class="contact-block" id="formulario" aria-label="Formulário de Contato">
      <h2 class="main-head" style="margin-bottom:20px;">Formulário de Contato</h2>
      <div class="contact-form">
        {% include 'forms/form.html.twig' %}
      </div>
    </section>

    <div class="contact-side">
      <section class="contact-block" id="redes-sociais" aria-label="Redes Sociais">
        <h2 class="main-head" style="margin-bottom:20px;">Redes Sociais</h2>
        <div class="contact-social">
          {% for net, link in social if link %}
            <a class="contact-social__link" href="{{ link }}" target="_blank" rel="noopener">
              <span class="contact-social__icon"><svg class="icon" aria-hidden="true"><use xlink:href="#brand-{{ net == 'x' ? 'x' : net }}"></use></svg></span>
              <span>{{ net|capitalize }}</span>
            </a>
          {% endfor %}
        </div>
      </section>

      {% if loc %}
      <section class="contact-block" id="localizacao" aria-label="Localização">
        <h2 class="main-head" style="margin-bottom:20px;">Localização</h2>
        <div class="contact-location">
          <p class="contact-location__name">{{ loc.name }}</p>
          {% for line in loc.address_lines %}<p class="contact-location__line">{{ line }}</p>{% endfor %}
          {% if loc.phone %}<p class="contact-location__phone"><a href="tel:{{ loc.phone_href ?: loc.phone }}">{{ loc.phone }}</a></p>{% endif %}
          {% if loc.map_query %}
          <div class="contact-location__map">
            <iframe src="https://maps.google.com/maps?q={{ loc.map_query|url_encode }}&z=16&output=embed" width="100%" height="260" style="border:0;" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Mapa — {{ loc.name }}"></iframe>
          </div>
          {% endif %}
        </div>
      </section>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}