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

{% block main %}

{% set contacts_page = craft.entries().section('contacts').one() ?? null %}
{% set products = craft.entries()
  .section('products')
  .orderBy('postDate asc')
  .all()
%}

{# =========================
  SEC 1 — INTRO
  products_section_1:
  - section_title
  - image
========================= #}
{% set sec1 = entry.products_section_1.one() ?? null %}
{% if sec1 %}
  {% set sec1_img = sec1.image.one() ?? null %}

  <section
    class="intro-sec pro"
    {% if sec1_img %}
      style="background-image: linear-gradient(180deg, #0000, var(--preto)), linear-gradient(90deg, #00000080, #0000), linear-gradient(to bottom, transparent, transparent), url('{{ WebP(sec1_img) }}');"
    {% endif %}
  >
    <img src="/uploads/shape-h-1.svg" loading="lazy" alt="" class="intro-shape">

    <div class="w-layout-blockcontainer intro-cont cont w-container">
      <h1 data-w-id="54661575-b234-8511-0ee4-1b2fe3ccbe9a" style="opacity:0" class="intro-h s1 white">
        {{ sec1.section_title ? macros.limpar_paragrafos(sec1.section_title) : macros.limpar_paragrafos(entry.title) }}
      </h1>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 2 — INTRO TEXTO
  products_section_2:
  - section_subtitle
  - section_title
  - text
========================= #}
{% set sec2 = entry.products_section_2.one() ?? null %}
{% if sec2 %}
  <section class="pro-1-sec">
    <div class="w-layout-blockcontainer pro-1-cont cont w-container">
      <div class="pro-1-div">
        {% if sec2.section_subtitle %}
          <div data-w-id="0658bb8e-03e1-14d9-1086-ca783164fa5e" style="opacity:0" class="tag-div">
            <img src="/uploads/shape-dot.svg" loading="lazy" alt="" class="tag-img">
            <p class="tag">{{ macros.limpar_paragrafos(sec2.section_subtitle) }}</p>
          </div>
        {% endif %}

        {% if sec2.section_title %}
          <h2 data-w-id="0658bb8e-03e1-14d9-1086-ca783164fa60" style="opacity:0" class="pro-1-h s2">
            {{ macros.limpar_paragrafos(sec2.section_title) }}
          </h2>
        {% endif %}

        {% if sec2.text %}
          <p data-w-id="0658bb8e-03e1-14d9-1086-ca783164fa62" style="opacity:0" class="pro-1-p p">
            {{ macros.limpar_paragrafos(sec2.text) }}
          </p>
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  PRODUTOS INDIVIDUAIS
  products:
  - title
  - text_2
  - features
  - image
========================= #}
{% if products|length %}
  {% for product in products %}
    {% set product_img = product.image.one() ?? null %}
    {% set contact_href = contacts_page ? contacts_page.url : '#' %}

    {# ID para anchors vindos da homepage #}
    {% set product_id = (product.title ?? '')|ascii|lower %}
    {% set product_id = product_id|replace({'º':'','ª':'',' ':'-','/':'-','—':'-','–':'-','&':'-',',':'','.':'',':':'',';':'','(':'',')':'','--':'-'})
    %}

    <section id="{{ product_id }}" class="pro-2-sec">
      <div class="w-layout-blockcontainer pro-2-cont cont w-container">
        <div class="pro-2-div-left">

          {% if product.text_2 %}
            <div              
              data-w-id="cfb17212-4488-62d7-ba39-abd3733df73f"              
              style="opacity:0"
              class="pro-2-div-tit"
            >
              <h2                
                data-w-id="2a006968-f498-766e-f536-3a18e33b1ce1"                
                style="opacity:0"
                class="pro-2-h s2 white"
              >
                {{ macros.limpar_paragrafos(product.title) }}
              </h2>

              <p class="pro-2-p p white">
                {{ macros.limpar_paragrafos(product.text_2) }}
              </p>
            </div>
          {% else %}
            <h2              
              data-w-id="2a006968-f498-766e-f536-3a18e33b1ce1"
              style="opacity:0"
              class="pro-2-h s2 white"
            >
              {{ macros.limpar_paragrafos(product.title) }}
            </h2>
          {% endif %}

          {% if product.features is defined and product.features %}
            <div              
              data-w-id="ff6163f9-c530-f047-2291-5ef94b3c211b"              
              style="opacity:0"
              class="pro-2-div"
            >
              {% for feature in product.features %}
                {% set feature_label = feature.label ?? feature.col1 ?? '' %}
                {% set feature_text = feature.text ?? feature.col2 ?? '' %}

                <div class="pro-2-col-info">
                  {% if feature_label %}
                    <p class="pro-2-h p tit">{{ feature_label }}</p>
                  {% endif %}

                  {% if feature_text %}
                    <p class="pro-2-h p texto">{{ feature_text }}</p>
                  {% endif %}
                </div>
              {% endfor %}
            </div>
          {% endif %}

          <a            
            data-w-id="2a006968-f498-766e-f536-3a18e33b1ce5"            
            style="opacity:0"
            href="{{ contact_href }}"
            class="btn-sec w-button"
          >
            {{ 'btn.entrar_contacto'|t }}
          </a>
        </div>

        <div          
          data-w-id="2a006968-f498-766e-f536-3a18e33b1ce7"
          style="opacity:0"
          class="pro-2-div-right"
        >
          {% if product_img %}
            <img src="{{ WebP(product_img) }}" loading="lazy" alt="{{ product_img.title }}" class="pro-2-sec-img-copy">
          {% endif %}
          <img src="/uploads/ini-3-shape.svg" loading="lazy" alt="" class="pro-2-shape">
        </div>
      </div>
    </section>
  {% endfor %}
{% endif %}


{# =========================
  SEC 3 — CAPACIDADE TÉCNICA
  products_section_3:
  - section_subtitle
  - section_title
  - text
  - image
========================= #}
{% set sec3 = entry.products_section_3.one() ?? null %}
{% if sec3 %}
  {% set sec3_img = sec3.image.one() ?? null %}

  <section class="pro-4-sec">
    <div class="w-layout-blockcontainer pro-4-cont cont w-container">
      <div data-w-id="c7386705-d60e-2261-c8e3-d5cd8a3fb6a2" style="opacity:0" class="pro-4-div-left">
        <img src="/uploads/con-2-shape.svg" loading="lazy" alt="" class="pro-4-shape">

        {% if sec3_img %}
          <img src="{{ WebP(sec3_img) }}" loading="lazy" alt="{{ sec3_img.title }}" class="pro-4-sec-img">
        {% endif %}
      </div>

      <div class="pro-4-div-right">
        {% if sec3.section_subtitle %}
          <div data-w-id="57843e2f-c102-06ea-8948-97306f5652a5" style="opacity:0" class="tag-div">
            <img src="/uploads/shape-dot.svg" loading="lazy" alt="" class="tag-img">
            <p class="tag">{{ macros.limpar_paragrafos(sec3.section_subtitle) }}</p>
          </div>
        {% endif %}

        {% if sec3.section_title %}
          <h2 data-w-id="c7386705-d60e-2261-c8e3-d5cd8a3fb6a5" style="opacity:0" class="pro-4-h s2">
            {{ macros.limpar_paragrafos(sec3.section_title) }}
          </h2>
        {% endif %}

        {% if sec3.text %}
          <p data-w-id="c7386705-d60e-2261-c8e3-d5cd8a3fb6a7" style="opacity:0" class="pro-4-p p">
            {{ macros.limpar_paragrafos(sec3.text) }}
          </p>
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 4 — CTA
  products_section_4:
  - section_title
  - text
  - btn_text
  - btn_link
  - btn_text_2
  - btn_link_2
  - image
========================= #}
{% set sec4 = entry.products_section_4.one() ?? null %}
{% if sec4 %}
  {% set sec4_img = sec4.image.one() ?? null %}
  {% set sec4_btn_href = sec4.btn_link.url ?? (sec4.btn_link ?? '#') %}
  {% set sec4_btn_2_href = sec4.btn_link_2.url ?? (sec4.btn_link_2 ?? '#') %}

  <section
    class="cta-sec"
    {% if sec4_img %}
      style="background-image: linear-gradient(180deg, #0000, var(--preto)), linear-gradient(90deg, #00000080, #0000), linear-gradient(to bottom, #00000040, #00000040), url('{{ WebP(sec4_img) }}');"
    {% endif %}
  >
    <img src="/uploads/shape-h-3.svg" loading="lazy" alt="" class="cta-shape">

    <div class="w-layout-blockcontainer cta-cont cont w-container">
      <div class="cta-div">
        {% if sec4.section_title %}
          <h2 data-w-id="af5b1613-a676-65af-5229-cc9204b99fe8" style="opacity:0" class="cta-h s1 white">
            {{ macros.limpar_paragrafos(sec4.section_title) }}
          </h2>
        {% endif %}

        {% if sec4.text %}
          <h3 data-w-id="af5b1613-a676-65af-5229-cc9204b99fea" style="opacity:0" class="cta-p s4 white">
            {{ macros.limpar_paragrafos(sec4.text) }}
          </h3>
        {% endif %}

        <div data-w-id="af5b1613-a676-65af-5229-cc9204b99fec" style="opacity:0" class="cta-inner">
          {% if sec4.btn_text %}
            <a href="{{ sec4_btn_href }}" target="{{ sec4.btn_link.target ?? '_self' }}" class="btn-sec w-button">
              {{ macros.limpar_paragrafos(sec4.btn_text) }}
            </a>
          {% endif %}

          {% if sec4.btn_text_2 %}
            <a href="{{ sec4_btn_2_href }}" target="{{ sec4.btn_link_2.target ?? '_self' }}" class="btn-ghost-white w-button">
              {{ macros.limpar_paragrafos(sec4.btn_text_2) }}
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </section>
{% endif %}

{% endblock %}