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

{% block main %}

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

  <section
    class="intro-sec ces"
    {% 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-cinza.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
  processes_section_2:
  - section_subtitle
  - section_title
  - text
========================= #}
{% set sec2 = entry.processes_section_2.one() ?? null %}
{% if sec2 %}
  <section class="ces-1-sec">
    <div class="w-layout-blockcontainer ces-1-cont cont w-container">
      <div class="ces-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="ces-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="ces-1-p p">
            {{ macros.limpar_paragrafos(sec2.text) }}
          </p>
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 3 — PROCESSO
  processes_section_3:
  - section_subtitle
  - section_title
  - cards_images
  - btn_text
  - btn_link
========================= #}
{% set sec3 = entry.processes_section_3.one() ?? null %}
{% if sec3 %}
  {% set sec3_btn_href = sec3.btn_link.url ?? (sec3.btn_link ?? '#') %}

  <section class="ces-2-sec">
    <div class="w-layout-blockcontainer ces-2-cont cont w-container">
      <div class="ces-2-div-top">
        {% if sec3.section_subtitle %}
          <div data-w-id="745978ad-1cd7-f0f3-0363-a6ba02f60f98" 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="745978ad-1cd7-f0f3-0363-a6ba02f60f9a" style="opacity:0" class="ces-2-h s2">
            {{ macros.limpar_paragrafos(sec3.section_title) }}
          </h2>
        {% endif %}
      </div>

      <div class="ces-2-div-bot" data-w-id="e5ccdcc9-a74f-c9aa-0a5d-0b6879487416" style="opacity:0">

        <div class="processes-slider-wrapper slider-wrapper" data-arrows="1">
          <div class="carousel processes-slider">
            {% if sec3.cards_images|length %}
              {% for card in sec3.cards_images.all() %}
                {% set card_img = card.image.one() ?? null %}
                {% set card_icon = card.icone is defined ? (card.icone.one() ?? null) : null %}
                <div class="carousel-cell">
                  <div class="ces-card">
                    {% if card_img %}
                      <img src="{{ WebP(card_img) }}" loading="lazy" alt="{{ card_img.title }}" class="ces-card-img">
                    {% endif %}

                    {% if card_icon %}
                      <img src="{{ card_icon.url() }}" loading="lazy" alt="{{ card_icon.title }}" class="ces-card-icon">
                    {% else %}
                      <img src="/uploads/proc-2-icon-{{ loop.index }}.svg" loading="lazy" alt="" class="ces-card-icon">
                    {% endif %}

                    {% if card.title %}
                      <h3 class="ces-card-h s4">{{ macros.limpar_paragrafos(card.title) }}</h3>
                    {% endif %}

                    {% if card.text %}
                      <p class="ces-h-p p">{{ macros.limpar_paragrafos(card.text) }}</p>
                    {% endif %}
                  </div>
                </div>
              {% endfor %}
            {% endif %}
          </div>
        </div>
      </div>

      <div class="ces-2-div-footer">
        {# <div data-w-id="9f8930f3-3c58-ae92-6a9f-d38734065c15" style="opacity:0" class="ces-2-div-arrow">
          <a href="javascript:void(0)" class="btn-arrow w-inline-block">
            <img src="/uploads/arrow-left.svg" loading="lazy" alt="" class="btn-arrow-icon-2">
          </a>
          <a href="javascript:void(0)" class="btn-arrow w-inline-block">
            <img src="/uploads/arrow-right.svg" loading="lazy" alt="" class="btn-arrow-icon-2">
          </a>
        </div> #}

        <div class="ces-2-line"></div>

        {% if sec3.btn_text %}
          <a href="{{ sec3_btn_href }}" target="{{ sec3.btn_link.target ?? '_self' }}" class="btn-main w-button">
            {{ macros.limpar_paragrafos(sec3.btn_text) }}
          </a>
        {% endif %}
      </div>
    </div>
  </section>
{% endif %}


{# =========================
  SEC 4 — CTA
  processes_section_4:
  - section_title
  - text
  - btn_text
  - btn_link
  - btn_text_2
  - btn_link_2
  - image
========================= #}
{% set sec4 = entry.processes_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_link2.url ?? (sec4.btn_link2 ?? '#') %}

  <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 pro">
            {{ 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 pro">
            {{ 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 %}