{% extends "_layouts/main.html" %}
{% import 'macros.twig' as macros %}

{% block main %}

{# =========================
  SEC 1 — INTRO
  services_section_1:
  - section_title  (RTE)
========================= #}
{% set sec1 = entry.services_section_1.one() ?? null %}
{% if sec1 %}
  <section class="ser-1-sec">
    <div class="w-layout-blockcontainer ser-1-cont cont w-container">
      <div class="ser-1-div">
        <h1 data-w-id="0800a331-5f08-4921-0a27-438d76c43b7d" class="ser-1-h s1">
          {{ sec1.section_title ? macros.limpar_paragrafos(sec1.section_title) : macros.limpar_paragrafos(entry.title) }}
        </h1>
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 2 — O QUE FAZEMOS
  services_section_2:
  - section_title  (RTE)
  - text           (RTE)
  - image          (asset)
  - image_2        (asset)
  - text_2         (RTE)
  - gallery        (assets — logos)
========================= #}
{% set sec2 = entry.services_section_2.one() ?? null %}
{% if sec2 %}
  {% set sec2_img = sec2.image.one() ?? null %}
  {% set sec2_img_2 = sec2.image_2.one() ?? null %}
  {% set sec2_gallery = sec2.gallery.all() ?? [] %}

  <section class="ser-2-sec">
    <div class="w-layout-blockcontainer ser-2-cont cont w-container">
      <div class="ser-2-div">
        <div class="ini-4-div-1">
          {% if sec2.section_title %}
            <h2 data-w-id="94969726-52e2-091c-1914-4ba6723d0fb8" style="opacity:0" class="ini-4-h s2">
              {{ macros.limpar_paragrafos(sec2.section_title) }}
            </h2>
          {% endif %}

          {% if sec2.text %}
            <p data-w-id="94969726-52e2-091c-1914-4ba6723d0fbc" style="opacity:0" class="ini-4-p p">
              {{ macros.limpar_paragrafos(sec2.text) }}
            </p>
          {% endif %}
        </div>

        <div class="ini-4-div-2">
          {% if sec2_img %}
            <img
              class="ini-4-img-1"
              src="{{ WebP(sec2_img) }}"
              alt="{{ sec2_img.title }}"
              style="opacity:0"
              sizes="(max-width: 504px) 100vw, 504px"
              data-w-id="94969726-52e2-091c-1914-4ba6723d0fbf"
              loading="lazy"
            >
          {% endif %}

          {% if sec2_img_2 %}
            <img
              src="{{ WebP(sec2_img_2) }}"
              loading="lazy"
              style="opacity:0"
              data-w-id="94969726-52e2-091c-1914-4ba6723d0fc0"
              alt="{{ sec2_img_2.title }}"
              class="ini-4-img-2"
            >
          {% endif %}
        </div>

        <div class="ini-4-div-3">
          {% if sec2.text_2 %}
            <data data-w-id="94969726-52e2-091c-1914-4ba6723d0fc2" style="opacity:0" class="ini-4-p p">
              {{ sec2.text_2 }}
            </data>
          {% endif %}

          {% if sec2_gallery|length %}
            <div data-w-id="94969726-52e2-091c-1914-4ba6723d0fc6" style="opacity:0" class="ini-4-div-logos">
              {% for logo in sec2_gallery %}
                <img src="{{ WebP(logo) }}" loading="lazy" alt="{{ logo.title }}" class="{{ loop.first ? 'image-2' : '' }}">
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 3 — GALERIA
  services_section_3:
  - image    (asset)
  - image_2  (asset)
  - image_3  (asset)
========================= #}
{% set sec3 = entry.services_section_3.one() ?? null %}
{% if sec3 %}
  {% set sec3_img = sec3.image.one() ?? null %}
  {% set sec3_img_2 = sec3.image_2.one() ?? null %}
  {% set sec3_img_3 = sec3.image_3.one() ?? null %}

  <section class="ser-3-sec">
    <div class="w-layout-blockcontainer ser-3-cont cont w-container">
      <div class="ser-3-div">
        {% if sec3_img %}
          <img class="ser-4-img l" src="{{ WebP(sec3_img) }}" alt="{{ sec3_img.title }}" style="opacity:0" sizes="(max-width: 780px) 100vw, 780px" data-w-id="541584fb-8701-1463-d8c8-93ecd982becf" loading="lazy">
        {% endif %}
        {% if sec3_img_2 %}
          <img class="ser-4-img r" src="{{ WebP(sec3_img_2) }}" alt="{{ sec3_img_2.title }}" style="opacity:0" sizes="(max-width: 780px) 100vw, 780px" data-w-id="de6c8e05-a10c-0e1b-2e79-256e2b9d597c" loading="lazy">
        {% endif %}
        {% if sec3_img_3 %}
          <img src="{{ WebP(sec3_img_3) }}" loading="lazy" style="opacity:0" data-w-id="163dc14a-0e30-faba-ae04-760bdf037171" alt="{{ sec3_img_3.title }}" class="ser-4-img-3">
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 4 — SOLUÇÕES ALL-IN-ONE (acordeão)
  services_section_4:
  - section_title  (RTE)
  Acordeão: channel `solutions` (postDate asc) — nº auto via loop.index.
  Por solução: title -> acc-h, image -> acc-serv-img-1, text_2/text -> descrição,
  image_2/image_3 -> imagens, cards (matriz title+text) -> blocos acc-serv-div-info.
  Botão "Entrar em contacto" -> página de contactos.
========================= #}
{% set sec4 = entry.services_section_4.one() ?? null %}
{% if sec4 %}
  {% set solutions = craft.entries().section('solutions').orderBy('postDate asc').all() %}
  {% set contacts_page = craft.entries().section('contacts').one() ?? null %}
  {% set contact_href = contacts_page ? contacts_page.url : '#' %}
  {% set acc_wids = [
    'cd2745f1-3661-0448-2b9b-f45291e866db',
    '58d37c4a-d28d-229c-192a-3440dba7349a',
    'fdb1dac1-b2a7-b01d-5f0e-654832c4e087'
  ] %}

  <section class="ser-4-sec">
    <div class="w-layout-blockcontainer ser-4-cont cont w-container">
      <div class="ser-4-div">
        <div class="ser-4-div-top">
          {% if sec4.section_title %}
            <h2 data-w-id="df784f80-96ee-67bb-9c05-82f8f9837ecd" style="opacity:0" class="ser-4-h s2">
              {{ macros.limpar_paragrafos(sec4.section_title) }}
            </h2>
          {% endif %}
        </div>

        {% if solutions|length %}
          <div class="ser-4-div-bot">
            {% for solution in solutions %}
              {% set sol_img_1 = solution.image.one() ?? null %}
              {% set sol_img_2 = solution.image_2.one() ?? null %}
              {% set sol_img_3 = solution.image_3.one() ?? null %}
              {% set sol_text = solution.text_2 ?: solution.text %}

              <div id="{{ solution.slug }}" data-w-id="{{ acc_wids[loop.index0] ?? acc_wids[0] }}" style="opacity:0" class="acc">
                <div class="acc-link">
                  <div class="acc-link-div s4">
                    <div class="acc-num p">({{ '%02d'|format(loop.index) }})</div>
                    <div class="acc-h">{{ macros.limpar_paragrafos(solution.title) }}</div>
                  </div>
                  <div class="acc-icon-div"><img src="/uploads/arrow-up.svg" loading="lazy" alt="" class="acc-icon"></div>
                </div>

                <nav class="acc-cont">
                  <div class="acc-serv">
                    {% if sol_img_1 %}
                      <img src="{{ WebP(sol_img_1) }}" loading="lazy" sizes="(max-width: 660px) 100vw, 660px" alt="{{ sol_img_1.title ?: solution.title }}" class="acc-serv-img-1">
                    {% endif %}

                    <div class="acc-serv-div">
                      <div class="acc-ser-div-1">
                        <div class="card-serv-div-2">
                          {% if sol_text %}
                            <p class="card-serv-p p">{{ macros.limpar_paragrafos(sol_text) }}</p>
                          {% endif %}
                          <a href="{{ contact_href }}" class="a-main-black w-button">Entrar em contacto</a>
                        </div>

                        <div class="card-serv-div-3">
                          {% if sol_img_2 %}
                            <img src="{{ WebP(sol_img_2) }}" loading="lazy" alt="{{ sol_img_2.title }}" class="card-serv-img-2">
                          {% endif %}
                          {% if sol_img_3 %}
                            <img src="{{ WebP(sol_img_3) }}" loading="lazy" sizes="(max-width: 780px) 100vw, 780px" alt="{{ sol_img_3.title }}" class="card-serv-img-3">
                          {% endif %}
                        </div>
                      </div>

                      {% if solution.cards|length %}
                        <div class="acc-serv-div-2">
                          {% for info in solution.cards.all() %}
                            <div class="acc-serv-div-info">
                              <p class="acc-serv-info-h p">{{ macros.limpar_paragrafos(info.title) }}</p>
                              {% if info.text %}
                                <p class="acc-serv-info-p s6">{{ macros.limpar_paragrafos(info.text) }}</p>
                              {% endif %}
                            </div>
                          {% endfor %}
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </nav>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 5 — COMO INVESTIR (passos numerados)
  services_section_5:
  - section_title  (RTE)
  - btn_text       (plain text)
  - btn_link       (entry link)
  - cards          (matriz: title, text) — numeração automática via loop.index
========================= #}
{% set sec5 = entry.services_section_5.one() ?? null %}
{% if sec5 %}
  {% set sec5_btn_href = sec5.btn_link.url ?? (sec5.btn_link ?? '#') %}
  {% set sec5_wids = [
    'ee6c271b-0359-0cc3-8a45-4a03a0b7922c',
    '0a2bbb7d-1dc3-6705-2177-313fe21be992',
    '0421037e-2902-d076-85c5-20e249306dff',
    '5d147fd2-5efa-c9d1-fef5-075a5dfa011a',
    'ba80b640-5708-4f89-ce11-272c6dc9ba70'
  ] %}

  <section class="ser-5-sec">
    <div class="w-layout-blockcontainer ser-5-cont cont w-container">
      <div class="ser-5-div">
        <div class="ser-5-div-1">
          {% if sec5.section_title %}
            <h2 data-w-id="6cd4007c-dce5-a9c9-6403-554603025062" style="opacity:0" class="ser-5-h s2">
              {{ macros.limpar_paragrafos(sec5.section_title) }}
            </h2>
          {% endif %}

          {% if sec5.btn_text %}
            <a
              data-w-id="c4c14ec2-525d-d6f8-bb51-1aa281cb5b41"
              style="opacity:0"
              href="{{ sec5_btn_href }}"
              target="{{ sec5.btn_link.target ?? '_self' }}"
              class="a-main-black w-button"
            >
              {{ macros.limpar_paragrafos(sec5.btn_text) }}
            </a>
          {% endif %}
        </div>

        {% if sec5.cards|length %}
          <div class="ser-5-div-2">
            {% for card in sec5.cards.all() %}
              <div data-w-id="{{ sec5_wids[loop.index0] ?? sec5_wids[0] }}" style="opacity:0" class="card-proc">
                <p class="card-proc-numb s3">{{ loop.index }}</p>
                <p class="card-proc-h s5">{{ macros.limpar_paragrafos(card.title ?: card.text) }}</p>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 6 — REAL ESTATE INVESTMENTS (cards numerados)
  services_section_6:
  - section_title  (RTE)
  - text           (RTE)
  - cards          (matriz: title, text)
  NOTA: o HTML mostra numeração visual (card-inv-n: 1,2,3,4) — gerada via loop.index
  (não é campo do Craft), conforme instrução. title -> card-inv-h, text -> card-inv-p.
========================= #}
{% set sec6 = entry.services_section_6.one() ?? null %}
{% if sec6 %}
  {% set sec6_wids = [
    '828e7d05-1832-470e-58b0-1aef6e2a1a15',
    '31419cb8-d071-d89f-d47c-ca431cd111c1',
    'b17686a7-cc89-6b5b-b715-c8e2b7678526',
    '27806263-d741-d373-c8d9-b2a10bda9e17'
  ] %}

  <section class="sec-6-sec">
    <div class="w-layout-blockcontainer sec-6-cont cont w-container">
      <div class="sec-6-div">
        <div class="sec-6-div-1">
          {% if sec6.section_title %}
            <h2 data-w-id="1c5322a0-68c7-3da8-63ba-19b01ff58af1" style="opacity:0" class="sec-6-h s2">
              {{ macros.limpar_paragrafos(sec6.section_title) }}
            </h2>
          {% endif %}

          {% if sec6.text %}
            <p data-w-id="1bbef162-4675-c9c3-5ad0-f8dee4d32a37" style="opacity:0" class="sec-6-p p">
              {{ macros.limpar_paragrafos(sec6.text) }}
            </p>
          {% endif %}
        </div>

        {% if sec6.cards|length %}
          <div class="sec-6-div-2">
            {% for card in sec6.cards.all() %}
              <div data-w-id="{{ sec6_wids[loop.index0] ?? sec6_wids[0] }}" style="opacity:0" class="card-inv">
                <div class="card-inv-1">
                  <p class="card-inv-n s2">{{ loop.index }}</p>
                </div>
                <div class="card-inv-2">
                  <p class="card-inv-h s5">{{ macros.limpar_paragrafos(card.title) }}</p>
                  {% if card.text %}
                    <p class="card-inv-p p">{{ macros.limpar_paragrafos(card.text) }}</p>
                  {% endif %}
                </div>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 7 — CTA DE CONTACTO
  services_section_7 (image, section_title, btn_text, btn_link)
  Markup no footer (_layouts/footer.html); conteúdo passado em
  _layouts/main.html via { cta_section: ... }. Nada a renderizar aqui.
========================= #}

{% endblock %}