<!-- SEÇÃO - BANNER -->
<section class="section-banner d-flex align-items-center" style="background-image: url('<?= wp_get_attachment_url(o2_get_field('imagem-banner')); ?>');">

  <div class="mw-1920 mx-auto">
    <div class="container-xl">
      <h1 class="text-center m-0">
        <?= get_the_title(); ?>
      </h1>
    </div>
  </div>

  <?php
  if (is_page('ambiental')) : ?>
    <nav class="tab-wrapper d-flex align-items-center">
      <button class="tab active" role="tab" data-tab="acoes-eko">Ações EKO</button>
      <button class="tab" role="tab" data-tab="metas">Metas</button>
    </nav>
    <script>
      jQuery(function() {
        jQuery(function() {
          jQuery('section[data-tab]').hide();

          var initialTab = jQuery('.tab[data-tab]').first();
          initialTab.addClass('active');

          var initialTabValue = initialTab.data('tab');
          jQuery('section[data-tab="' + initialTabValue + '"]').show();

          jQuery('.tab[data-tab]').on('click', function() {
            var selectedTab = jQuery(this).data('tab');

            jQuery('.tab[data-tab]').removeClass('active');
            jQuery('section[data-tab]').hide();

            jQuery(this).addClass('active');
            jQuery('section[data-tab="' + selectedTab + '"]').show();

            var firstSecondaryTab = jQuery('section[data-tab="' + selectedTab + '"] .tab[data-secondary-tab]').first();
            jQuery('.tab[data-secondary-tab]').removeClass('active');
            jQuery('.tab-content').hide();

            if (firstSecondaryTab.length) {
              firstSecondaryTab.addClass('active');
              var firstSecondaryTabValue = firstSecondaryTab.data('secondary-tab');
              jQuery('.tab-content[data-secondary-tab="' + firstSecondaryTabValue + '"]').fadeIn(400);
            }
          });

          jQuery('.tab[data-secondary-tab]').on('click', function() {
            var selectedSecondaryTab = jQuery(this).data('secondary-tab');

            jQuery('.tab[data-secondary-tab]').removeClass('active');
            jQuery('.tab-content').hide();

            jQuery(this).addClass('active');
            jQuery('.tab-content[data-secondary-tab="' + selectedSecondaryTab + '"]').fadeIn(400);
          });

          var initialSecondaryTab = jQuery('.tab[data-secondary-tab]').first();
          initialSecondaryTab.addClass('active');
          var initialSecondaryTabValue = initialSecondaryTab.data('secondary-tab');
          jQuery('.tab-content[data-secondary-tab="' + initialSecondaryTabValue + '"]').fadeIn(400);
        });
      });
    </script>
  <?php
  endif;

  if (is_page('social')) : ?>
    <nav class="tab-wrapper overflow-hidden">
      <div class="swiper-container position-relative mw-100">
        <div class="swiper swiper-tabs">
          <div class="swiper-wrapper">
            <button class="swiper-slide tab active" role="tab" data-tab="programas-sociais">Programas Sociais</button>
            <button class="swiper-slide tab" role="tab" data-tab="melo-cordeiro">Instituto Melo Cordeiro</button>
            <button class="swiper-slide tab" role="tab" data-tab="projeto-eduka">Projeto E-duka</button>
            <button class="swiper-slide tab" role="tab" data-tab="costura-criativa">Projeto Costura Criativa</button>
            <button class="swiper-slide tab" role="tab" data-tab="turma-jilo">Turma do Jiló</button>
          </div>
        </div>
        <div class="swiper-button-prev tabs-prev"></div>
        <div class="swiper-button-next tabs-next"></div>
      </div>
    </nav>
    <script defer>
      jQuery(function() {
        var swiperTabs = new Swiper(".swiper-tabs", {
          speed: 800,
          centerInsufficientSlides: true,
          slidesPerView: 1,
          spaceBetween: 5,
          slideToClickedSlide: false,
          preventClicks :true,
          a11y: false,
          loop: true,
          allowTouchMove: false,
          navigation: {
            nextEl: ".tabs-next",
            prevEl: ".tabs-prev"
          },
          breakpoints: {
            576: {
              centeredSlides: false,
              slidesPerView: "auto",
              slideToClickedSlide: false,
              allowTouchMove: false,
            }
          },
        });

        swiperTabs.on('slideChange', function() {
          const previousIndex = swiperTabs.activeIndex;
          swiperTabs.slideTo(previousIndex, 0, false); // Retorna ao slide anterior
        });

        jQuery(".tab").on("click", function() {
          var tabId = jQuery(this).data("tab");

          jQuery(".tab").removeClass("active");
          jQuery(this).addClass("active");

          jQuery(".section-social").stop().hide().removeClass("active");
          jQuery(".section-social[data-tab='" + tabId + "']").stop().fadeIn(300).addClass("active");

        });
      });
    </script>
  <?php
  endif;

  if (is_page('governanca')) : ?>
    <nav class="tab-wrapper overflow-hidden d-flex align-items-center" style="padding-top: 8px; padding-bottom: 8px">
      <button class="tab" role="tab" data-tab="compliance">Compliance</button>
      <button class="tab" role="tab" data-tab="politicas">Políticas</button>
    </nav>
    <script defer>
      jQuery(function() {
        jQuery(function() {
          jQuery('section[data-tab]').hide();

          var initialTab = jQuery('.tab[data-tab]').first();
          initialTab.addClass('active');

          var initialTabValue = initialTab.data('tab');
          jQuery('section[data-tab="' + initialTabValue + '"]').show();

          jQuery('.tab[data-tab]').on('click', function() {
            var selectedTab = jQuery(this).data('tab');

            jQuery('.tab[data-tab]').removeClass('active');
            jQuery('section[data-tab]').hide();

            jQuery(this).addClass('active');
            jQuery('section[data-tab="' + selectedTab + '"]').show();

            var firstSecondaryTab = jQuery('section[data-tab="' + selectedTab + '"] .tab[data-secondary-tab]').first();
            jQuery('.tab[data-secondary-tab]').removeClass('active');
            jQuery('.tab-content').hide();

            if (firstSecondaryTab.length) {
              firstSecondaryTab.addClass('active');
              var firstSecondaryTabValue = firstSecondaryTab.data('secondary-tab');
              jQuery('.tab-content[data-secondary-tab="' + firstSecondaryTabValue + '"]').fadeIn(400);
            }
          });

          jQuery('.tab[data-secondary-tab]').on('click', function() {
            var selectedSecondaryTab = jQuery(this).data('secondary-tab');

            jQuery('.tab[data-secondary-tab]').removeClass('active');
            jQuery('.tab-content').hide();

            jQuery(this).addClass('active');
            jQuery('.tab-content[data-secondary-tab="' + selectedSecondaryTab + '"]').fadeIn(400);
          });

          var initialSecondaryTab = jQuery('.tab[data-secondary-tab]').first();
          initialSecondaryTab.addClass('active');
          var initialSecondaryTabValue = initialSecondaryTab.data('secondary-tab');
          jQuery('.tab-content[data-secondary-tab="' + initialSecondaryTabValue + '"]').fadeIn(400);
        });
      });
    </script>
  <?php
  endif;

  if (is_page('certificacoes')) : ?>
    <nav class="tab-wrapper overflow-hidden">
      <div class="swiper-container position-relative mw-100">
        <div class="swiper swiper-tabs">
          <div class="swiper-wrapper">
            <?php
            $certificacoes = o2_get_field('certificacoes');
            foreach ($certificacoes as $index => $item) : ?>
              <button class="swiper-slide tab <?= $index == 0 ? 'active' : ''; ?>" role="tab" data-tab="<?= stringToSlug(strip_tags(($item['nome']))); ?>">
                <?= strip_tags($item['nome']); ?>
              </button>
            <?php
            endforeach; ?>
          </div>
        </div>
        <div class="swiper-button-prev tabs-prev"></div>
        <div class="swiper-button-next tabs-next"></div>
      </div>
    </nav>
    <script defer>
      jQuery(function() {
        var swiperTabs = new Swiper(".swiper-tabs", {
          speed: 800,
          centerInsufficientSlides: true,
          slidesPerView: 1,
          spaceBetween: 5,
          slideToClickedSlide: false,
          preventClicks :true,
          a11y: false,
          navigation: {
            nextEl: ".tabs-next",
            prevEl: ".tabs-prev"
          },
          breakpoints: {
            576: {
              centeredSlides: false,
              slidesPerView: "auto",
            }
          },
        });

        jQuery(".tab").on("click", function() {
          var tabId = jQuery(this).data("tab");

          jQuery(".tab").removeClass("active");
          jQuery(this).addClass("active");

          jQuery(".section-certificacao").stop().hide().removeClass("active");
          jQuery(".section-certificacao[data-tab='" + tabId + "']").stop().fadeIn(300).addClass("active");

        });
      });
    </script>
  <?php
  endif;

  if (is_page('relatorios-anuais')) : ?>
    <nav class="tab-wrapper overflow-hidden">
      <div class="swiper-container position-relative mw-100">
        <div class="swiper swiper-tabs">
          <div class="swiper-wrapper">
            <button class="swiper-slide tab active" role="tab" data-tab="igualdade-salarial">Relatório de Igualdade Salarial</button>
            <button class="swiper-slide tab" role="tab" data-tab="relatorio-sustentabilidade">Relatórios de Sustentabilidade</button>
            <button class="swiper-slide tab" role="tab" data-tab="reducao-emissao-estufa">Inventários de<br class="d-none d-lg-block"> Gases de Efeito Estufa</button>
          </div>
        </div>
        <div class="swiper-button-prev tabs-prev"></div>
        <div class="swiper-button-next tabs-next"></div>
      </div>
    </nav>
    <script defer>
      jQuery(function() {
        var swiperTabs = new Swiper(".swiper-tabs", {
          speed: 800,
          centerInsufficientSlides: true,
          slidesPerView: 1,
          spaceBetween: 5,
          slideToClickedSlide: false,
          preventClicks :true,
          a11y: false,
          navigation: {
            nextEl: ".tabs-next",
            prevEl: ".tabs-prev"
          },
          breakpoints: {
            576: {
              centeredSlides: false,
              slidesPerView: "auto",
            }
          },
        });

        jQuery(".tab").on("click", function() {
          var tabId = jQuery(this).data("tab");

          jQuery(".tab").removeClass("active");
          jQuery(this).addClass("active");

          jQuery(".section-relatorios").stop().hide().removeClass("active");
          jQuery(".section-relatorios[data-tab='" + tabId + "']").stop().fadeIn(300).addClass("active");

        });
      });
    </script>
  <?php
  endif; ?>

</section>