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

{% block main %}

{# Projeto individual (channel `projects`) — `entry` é o próprio projeto.
   Campos: title, location, text, image, image_2, gallery, state, features (Table) #}
{% set p_image = entry.image.one() ?? null %}
{% set p_image_2 = entry.image_2.one() ?? null %}
{% set p_gallery = entry.gallery.all() ?? [] %}
{% set contacts_page = craft.entries().section('contacts').one() ?? null %}
{% set contact_href = contacts_page ? contacts_page.url : '#' %}


{# === HERO — nome + estado === #}
<section class="pro-1-sec">
  <div class="w-layout-blockcontainer pro-1-cont cont w-container">
    <div class="pro-1-div">
      <h1 data-w-id="ec571c99-1a8f-70af-a478-8e75a69aa858" style="opacity:0" class="pro-1-h s1">
        {{ macros.limpar_paragrafos(entry.title) }}
      </h1>

      {% if entry.state.value %}
        {% set state_colors = { '0': 'cccccc', '1': '00d52e', '2': 'ffb820', '3': 'e90a0a' } %}
        {% set state_color = state_colors[entry.state.value] ?? '00d52e' %}
        <div data-w-id="4a181a4a-bd30-ed29-9af2-3a92580ade63" style="opacity:0" class="card-pro-div-stat">
          <div class="card-pro-ind" style="background-color:#{{ state_color }}"></div>
          <p class="card-pro-stat p">{{ entry.state.label|t }}</p>
        </div>
      {% endif %}
    </div>
  </div>
</section>


{# === IMAGEM PRINCIPAL (ou visualizador 360 se houver image_3d) === #}
{% set p_3d = entry.image_3d.one() ?? null %}
{% if p_3d or p_image %}
  <section class="pro-2-sec">
    <div class="w-layout-blockcontainer pop-2-cont cont w-container">
      <div class="pro-2-div">
        {% if p_3d %}
          <div class="pro-2-img pano-360" data-pano="{{ p_3d.url }}" data-w-id="953432f7-562c-e9ba-9a76-6bf7401720e4"></div>
        {% elseif p_image %}
          <img class="pro-2-img" src="{{ WebP(p_image) }}" alt="{{ p_image.title ?: entry.title }}" style="opacity:0" sizes="(max-width: 780px) 100vw, 780px" data-w-id="953432f7-562c-e9ba-9a76-6bf7401720e4" loading="lazy">
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# === COMODIDADES — imagem + descrição + vantagens (features) === #}
<section class="pro-3-sec">
  <div class="w-layout-blockcontainer pro-3-cont cont w-container">
    <div class="pro-3-div">
      <div class="pro-3-div-1">
        <h1 data-w-id="976a030a-57aa-2096-b4b9-1aef945d25c3" style="opacity:0" class="pro-3-h s2">
          {{ 'title.comodidades'|t|raw }}
        </h1>
      </div>

      <div class="pro-3-div-2">
        {% if p_image_2 %}
          <div class="pro--3-div-img">
            <img class="pro-3-img" src="{{ WebP(p_image_2) }}" alt="{{ p_image_2.title ?: entry.title }}" style="opacity:0" sizes="(max-width: 660px) 100vw, 660px" data-w-id="998e66d4-401e-9751-50dc-98edb6528ac9" loading="lazy">
          </div>
        {% endif %}

        <div class="pro-3-div-info pro-3-div-img">
          <div class="pro-3-div-info-1">
            {% if entry.text %}
              <p data-w-id="331a9391-1329-00ad-413b-127f46235e7c" style="opacity:0" class="pro-3-p p">
                {{ macros.limpar_paragrafos(entry.text) }}
              </p>
            {% endif %}

            <a data-w-id="6b4c8433-dd9c-87b6-7911-94cd188a46f1" style="opacity:0" href="{{ contact_href }}" class="a-main-black w-button">
              {{ 'btn.entrar_contacto'|t }}
            </a>
          </div>

          {% if entry.features is defined and entry.features|length %}
            <div data-w-id="09424e27-b5d3-8491-60f0-cb8ced4eb092" style="opacity:0" class="pro-3-div-info-2">
              {% for row in entry.features %}
                {% set f_label = row.label ?? row.col1 ?? '' %}
                {% set f_text = row.text ?? row.col2 ?? '' %}
                {% if f_label or f_text %}
                  <p class="pro-3-van p">{{ f_label ?: f_text }}</p>
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>


{# === GALERIA === #}
{% if p_gallery|length %}
  <section class="pro-4-sec">
    <div class="w-layout-blockcontainer pro-4-cont cont w-container">
      <div class="pro-4-div">
        <div class="pro-4-div-1">
          <h2 data-w-id="53798480-2569-77d4-88c2-1bc5fc735711" style="opacity:0" class="pro-4-h p">
            {{ 'title.galeria'|t }}
          </h2>
        </div>

        <div data-w-id="cb105d5d-e634-4d63-a68d-0c2fa1efb096" style="opacity:0" class="pro-4-div-2">
          {% for img in p_gallery %}
            <img src="{{ WebP(img) }}" loading="lazy" sizes="(max-width: 780px) 100vw, 780px" alt="{{ img.title }}" class="pro-4-img">
          {% endfor %}
        </div>
      </div>
    </div>
  </section>
{% endif %}


{# === CONTACTO (bloco de formulário fixo do template) ===
  Heading via tradução; imagens decorativas estáticas em /uploads/.
  Formulário Webflow mantido como está.
========================= #}
<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">
        <h2 data-w-id="0b7c3fda-ffe3-1a7a-a82e-594c106d3310" style="opacity:0" class="por-5-h s2">
          {{ 'title.mensagem_direta'|t|raw }}
        </h2>

        <div data-w-id="0b7c3fda-ffe3-1a7a-a82e-594c106d3314" style="opacity:0" class="form-block w-form">
          {{ freeform.form('contacto').render }}
        </div>
      </div>

      <div class="por-5-div-2">
        <img class="por-5-img-1" src="/uploads/por-5-img-1.png" alt="" style="opacity:0" sizes="100vw" data-w-id="0b7c3fda-ffe3-1a7a-a82e-594c106d3341" loading="lazy">
        <img src="/uploads/sob-3-img-2.png" loading="lazy" style="opacity:0" data-w-id="0b7c3fda-ffe3-1a7a-a82e-594c106d3342" alt="" class="sob-3-img-2">
      </div>
    </div>
  </div>
</section>

{% endblock %}