<?php
/*
 * 
 * Template Name: Home
 * 
*/
enqueue_aos();
enqueue_swiper();
get_header(); ?>

<!-- ======= CONTEÚDO ======= -->
<main role="main" class="overflow-hidden">

  <!-- SEÇÃO - SEÇÃO INICIAL -->
  <section class="section-inicial" style="background-image: url('<?= wp_get_attachment_url(o2_get_field('imagem-fundo-esg')); ?>');">
    <div class="mw-1920 mx-auto h-100">
      <div class="d-flex flex-column justify-content-center align-items-center h-100">
        <h1 class="mt-4" data-aos="zoom-in-up" data-aos-duration="800"><?php o2_the_field('logo-esg'); ?></h1>
        <div class="d-flex flex-column align-items-center justify-content-center pointer" id="scroll-down">
          <!-- <p class="mt-4">Descer página</p> -->
          <!-- <div class="sd-wrapper d-flex flex-column mt-4">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 1.8811L10 9.8811L18 1.8811" stroke="white" stroke-width="3" stroke-linecap="round" />
            </svg>
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 1.8811L10 9.8811L18 1.8811" stroke="white" stroke-width="3" stroke-linecap="round" />
            </svg>
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 1.8811L10 9.8811L18 1.8811" stroke="white" stroke-width="3" stroke-linecap="round" />
            </svg>
          </div> -->
        </div>
      </div>
    </div>
    <script defer>
      jQuery(function() {
        jQuery('#scroll-down').on('click', function() {
          jQuery('html, body').animate({
            scrollTop: jQuery("#next-section").offset().top
          }, 200);
        })
      });
    </script>
  </section>

  <!-- SEÇÃO - REDUÇÃO DOS IMPACTOS AMBIENTAIS -->
  <section class="section-reducao overflow-hidden" id="next-section">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">
        <div class="row">
          <div class="col-12 col-lg-5">
            <div class="text-wrapper">
              <h2 class="font60" data-aos="fade-right" data-aos-duration="600" data-aos-anchor-placement="top-bottom"><?php o2_the_field('titulo-redacao'); ?></h2>
              <p class="texto-redacao font24 fw400" data-aos="fade-right" data-aos-duration="600" data-aos-delay="100"><?php o2_the_field('texto-redacao'); ?></p>
              <p class="texto-destaque-redacao font18 fw400" data-aos="fade-right" data-aos-duration="600" data-aos-delay="200"><?php o2_the_field('texto-destaque-redacao'); ?></p>
            </div>
          </div>
          <div class="col-12 col-lg-7">
            <div class="img-wrapper">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-reducao')); ?>" alt="<?= strip_tags(o2_get_field('titulo-redacao')); ?>">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- SEÇÃO - ESG -->
  <section class="section-esg">
    <div class="mw-1920 mx-auto">
      <div class="row">
        <div class="col-12 col-md-4">
          <h3 class="font18 fw700 text-white text-uppercase" data-aos="zoom-in" data-aos-duration="700">Environmental (Meio ambiente)</h3>
          <p data-aos="zoom-in" data-aos-duration="700"><?php o2_the_field('texto-environmental'); ?></p>
        </div>
        <div class="col-12 col-md-4">
          <h3 class="font18 fw700 text-white text-uppercase" data-aos="zoom-in" data-aos-duration="700">Social</h3>
          <p data-aos="zoom-in" data-aos-duration="700"><?php o2_the_field('texto-social'); ?></p>
        </div>
        <div class="col-12 col-md-4">
          <h3 class="font18 fw700 text-white text-uppercase" data-aos="zoom-in" data-aos-duration="700">Governance (Governança)</h3>
          <p data-aos="zoom-in" data-aos-duration="700"><?php o2_the_field('texto-governance'); ?></p>
        </div>
      </div>
    </div>
  </section>

  <?php
  $slider_esg = o2_get_field('slider-esg');
  if (!empty($slider_esg)) : ?>
    <!-- SEÇÃO - SLIDER ESG -->
    <section class="section-slider-esg parallax overflow-hidden position-relative">
      <div class="swiper-button-prev esg-prev"></div>
      <div class="swiper-button-next esg-next"></div>
      <div class="mw-1920 mx-auto">
        <div class="container-xl">
          <div class="swiper swiper-esg overflow-visible">
            <div class="swiper-wrapper">
              <?php
              $i = 0;
              foreach ($slider_esg as $item) : ?>
                <a href="<?= $item['url']; ?>" class="swiper-slide" data-aos="fade-up" data-aos-delay="<?= $i . '00'; ?>" data-aos-duration="700">
                  <img src="<?= wp_get_attachment_url($item['imagem']); ?>" alt="Imagem de Fundo">
                  <div class="title-wrapper">
                    <h3 class="m-0"><?= $item['titulo']; ?></h3>
                  </div>
                </a>
              <?php
              $i++;
              endforeach; ?>
            </div>
          </div>
          <div class="swiper-pagination esg-pagination"></div>
          <script>
            jQuery(function() {
              const swiperESG = new Swiper(".swiper-esg", {
                speed: 700,
                centerInsufficientSlides: true,
                slidesPerView: 1,
                spaceBetween: 30,
                navigation: {
                  nextEl: ".esg-next",
                  prevEl: ".esg-prev"
                },
                pagination: {
                  el: ".esg-pagination",
                  clickable: true,
                },
                breakpoints: {
                  576: {
                    slidesPerView: "auto",
                  }
                }
              });
            });
          </script>
        </div>
      </div>
    </section>
  <?php
  endif; ?>

</main>

<?php
get_footer(); ?>