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

{# Card de projeto reutilizável (usado nos dois grids por-2-sec) #}
{% macro project_card(project) %}
  {% import 'macros.twig' as macros %}
  {% set p_slides = project.gallery.all() ?? [] %}
  {% set p_logo = project.main_logo.one() ?? null %}
  {% set state_colors = { '0': 'cccccc', '1': '00d52e', '2': 'ffb820', '3': 'e90a0a' } %}

  <div class="card-pro">
    <div class="card-pro-div-img">
      {% if p_slides|length %}
        <div class="card-pro-slider">
          {% for img in p_slides %}
            <img src="{{ WebP(img) }}" alt="{{ img.title ?: project.title }}" loading="lazy" class="card-pro-slide{{ loop.first ? ' is-active' : '' }}">
          {% endfor %}
        </div>
      {% endif %}

      {% if p_slides|length > 1 %}
        <div class="card-pro-div-arr">
          <a href="#" class="btn-arow l w-inline-block"><img loading="lazy" src="/uploads/arrow-left.svg" alt="" class="btn-arrow-icon"></a>
          <a href="#" class="btn-arow r w-inline-block"><img loading="lazy" src="/uploads/arrow-right.svg" alt="" class="btn-arrow-icon"></a>
        </div>
      {% endif %}
    </div>

    <div class="card-pro-div-info">
      {% if p_logo %}
        <img loading="lazy" src="{{ WebP(p_logo) }}" alt="{{ project.title }}" class="card-pro-logo">
      {% endif %}

      <div class="card-pro-div-main">
        <div class="card-pro-div-nome">
          <h2 class="card-pro-nome s3">{{ macros.limpar_paragrafos(project.title) }}</h2>

          {% if project.location %}
            <div class="card-pro-div-loc">
              <img loading="lazy" src="/uploads/icon-loc.svg" alt="" class="card-pro-icon">
              <p class="card-pro-loc s6">{{ macros.limpar_paragrafos(project.location) }}</p>
            </div>
          {% endif %}
        </div>

        {% if project.text %}
          {# texto corrido (sem <br>/tags) para o line-clamp de 3 linhas funcionar bem #}
          <p class="card-pro-desc s5">{{ project.text|replace('/<br\\s*\\/?>/', ' ')|striptags|trim }}</p>
        {% endif %}

        {% if project.state.value %}
          {% set state_color = state_colors[project.state.value] ?? '00d52e' %}
          <div class="card-pro-div-stat">
            <div class="card-pro-ind" style="background-color:#{{ state_color }}"></div>
            <p class="card-pro-stat p">{{ project.state.label|t }}</p>
          </div>
        {% endif %}
      </div>

      <a href="{{ project.url }}" class="a-main-black w-button">{{ 'btn.ver_projeto'|t }}</a>
    </div>
  </div>
{% endmacro %}


{% block main %}

{# Projetos divididos por `situation`: 0 -> 1º grid (e home) ; 1 -> 2º grid #}
{% set all_projects = craft.entries()
  .section('projects')
  .orderBy('postDate desc')
  .all()
%}
{% set projects_main = all_projects|filter(p => p.situation.value == '0') %}
{% set projects_second = all_projects|filter(p => p.situation.value == '1') %}


{# =========================
  SEC 1 — INTRO
  projects_section_1:
  - section_title  (RTE)
========================= #}
{% set sec1 = entry.projects_section_1.one() ?? null %}
{% if sec1 %}
  <section class="por-1-sec">
    <div class="w-layout-blockcontainer por-1-cont cont w-container">
      <div class="por-1-div">
        {% if sec1.section_title %}
          <h1 data-w-id="1aa06094-c18c-54fe-a058-2ebf8450909a" style="opacity:0" class="por-1-h s1">
            {{ macros.limpar_paragrafos(sec1.section_title) }}
          </h1>
        {% endif %}
        <img src="/uploads/por-1-icon.svg" loading="lazy" style="opacity:0" data-w-id="66b62799-bdb0-2d2f-a938-849d25f40145" alt="" class="por-1-icon">
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  1º GRID — projetos com situation = 0
========================= #}
{% if projects_main|length %}
  <section class="por-2-sec">
    <div class="w-layout-blockcontainer por-2-cont cont w-container">
      <div data-w-id="1a10eac4-4546-15ec-ad9a-d6c0bde941da" style="opacity:0" class="pro-2-div">
        {% for project in projects_main %}
          {{ _self.project_card(project) }}
        {% endfor %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 2 — BANNER
  projects_section_2.section_title
  Só aparece se houver projetos com situation = 1 (acompanha o 2º grid).
========================= #}
{% set sec2 = entry.projects_section_2.one() ?? null %}
{% if sec2 and sec2.section_title and projects_second|length %}
  <section class="por-3-sec">
    <div class="w-layout-blockcontainer por-3-cont cont w-container">
      <div class="por-3-div">
        <h2 data-w-id="d5ff56b8-9dae-cdca-3985-7b2430f63d86" style="opacity:0" class="por-3-h s1">
          {{ macros.limpar_paragrafos(sec2.section_title) }}
        </h2>
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  2º GRID — projetos com situation = 1 (só se existirem)
========================= #}
{% if projects_second|length %}
  <section class="por-2-sec">
    <div class="w-layout-blockcontainer por-2-cont cont w-container">
      <div data-w-id="6dbd6979-b29c-addf-d143-711133808db2" style="opacity:0" class="pro-2-div">
        {% for project in projects_second %}
          {{ _self.project_card(project) }}
        {% endfor %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 3 — CONTACTO
  projects_section_3:
  - section_title  (RTE)
  - image          (asset)
  - image_2        (asset)
  (Formulário Freeform 'contacto'.)
========================= #}
{% set sec3 = entry.projects_section_3.one() ?? null %}
{% if sec3 %}
  {% set sec3_img = sec3.image.one() ?? null %}
  {% set sec3_img_2 = sec3.image_2.one() ?? null %}

  <section class="por-5-sec">
    <div class="w-layout-blockcontainer por-5-cont cont w-container">
      <div class="por-5-div-main">
        <div class="por-5-div">
          {% if sec3.section_title %}
            <h2 data-w-id="bcd4c5a0-aefc-d296-e127-e91cdaf23107" style="opacity:0" class="por-5-h s2">
              {{ macros.limpar_paragrafos(sec3.section_title) }}
            </h2>
          {% endif %}

          <div data-w-id="bcd4c5a0-aefc-d296-e127-e91cdaf2310b" style="opacity:0" class="form-block w-form">
            {{ freeform.form('contacto').render }}
          </div>
        </div>

        <div class="por-5-div-2">
          {% if sec3_img %}
            <img class="por-5-img-1" src="{{ WebP(sec3_img) }}" alt="{{ sec3_img.title }}" style="opacity:0" sizes="100vw" data-w-id="7f4193a9-942d-7faa-c653-6a2da1bdf8f6" loading="lazy">
          {% endif %}
          {% if sec3_img_2 %}
            <img src="{{ WebP(sec3_img_2) }}" loading="lazy" style="opacity:0" data-w-id="7f4193a9-942d-7faa-c653-6a2da1bdf8f7" alt="{{ sec3_img_2.title }}" class="sob-3-img-2">
          {% endif %}
        </div>
      </div>
    </div>
  </section>
{% endif %}

{% endblock %}