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

<!-- ======= CONTEÚDO ======= -->
<main role="main" class="page-social">

  <?php
  # SEÇÃO - BANNER
  get_template_part('template-parts/section', 'banner'); ?>

  <!-- ABA - PROGRAMAS SOCIAIS -->
  <section class="section-social section-programas-sociais active overflow-hidden" data-tab="programas-sociais">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">
        <div class="row">
          <div class="col-12 col-md-6">
            <h2 class="font60 fw900 text-green" data-aos="fade-right" data-aos-duration="600"><?php o2_the_field('titulo-programas-sociais'); ?></h2>
            <p class="font18 fw400 text-gray font-alternates" data-aos="fade-right" data-aos-duration="600" data-aos-delay="100"><?php o2_the_field('texto-programas-sociais'); ?></p>
          </div>
          <div class="col-12 col-md-6">
            <div class="img-wrapper position-relative mt-3 mt-md-0">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-programas-sociais')); ?>" data-aos="zoom-in" data-aos-duration="600" alt="<?= strip_tags(o2_get_field('titulo-programas-sociais')); ?>">
            </div>
          </div>
        </div>
        <div class="row align-items-end">
          <div class="col-12 col-md-6 img-wrapper-dois-wrapper">
            <div class="img-wrapper-dois position-relative">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-card-programas-sociais')); ?>" data-aos="fade-up-right" data-aos-duration="700" alt="<?= strip_tags(o2_get_field('titulo-programas-sociais')); ?>">
            </div>
          </div>
          <?php
          $texto_agasalho = '<p class="mb-2 mb-md-3">Em 2025, a Karina<br class="d-none d-md-block"> investiu um total de</p>
              <h3 class="font60 fw700 font-alternates" data-aos="zoom-in" data-aos-duration="800">R$ 1.200.684,83</h3>
              <p>para apoiar as comunidades onde estamos presentes</p>
              <p>Conheça as iniciativas que refletem o compromisso social da Karina:</p>
              ';

          if (is_page('es') || wp_get_post_parent_id() == 178) {
            $texto_agasalho = '<p class="mb-2 mb-md-3">En 2023, Karina<br class="d-none d-md-block"> invertido un total de</p>
              <h3 class="font60 fw700 font-alternates" data-aos="zoom-in" data-aos-duration="800">R$ 1.048.870</h3>
              <p>para apoyar a las comunidades donde estamos presentes</p>
              <p>Conozca las iniciativas qui reflejan el compromiso social de Karina:</p>
              ';
          }
          if (is_page('en') || wp_get_post_parent_id() == 161) {
            $texto_agasalho = '<p class="mb-2 mb-md-3">In 2023, Karina<br class="d-none d-md-block"> invested a total of</p>
              <h3 class="font60 fw700 font-alternates" data-aos="zoom-in" data-aos-duration="800">R$ 1.048.870</h3>
              <p>to support the communities where we are present</p>
              <p>Discover the iniciatives that reflect Karinas social commitment: </p>
              ';
          }
          ?>
          <div class="col-12 col-md-6 d-flex justify-content-center justify-content-xxl-start">
            <div class="card-wrapper">
              <?= $texto_agasalho ?>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ABA - INSTITUTO MELO CORDEIRO -->
  <section class="section-social section-melo-cordeiro overflow-hidden" data-tab="melo-cordeiro">

    <div class="triangle-wrapper mw-1920 mx-auto">
      <div class="container-xl">
        <h2 class="font60 fw900 text-green mb-4 mb-md-5"><?php o2_the_field('titulo-melo-cordeiro'); ?></h2>
        <div class="row flex-column-reverse flex-md-row">
          <div class="col-12 col-md-4">
            <div class="img-wrapper mt-4 mt-md-0">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-melo-cordeiro')); ?>" alt="<?= strip_tags(o2_get_field('titulo-melo-cordeiro')); ?>">
            </div>
          </div>
          <div class="col-12 col-md-8 zigue">
            <div class="font18 fw400 text-gray font-alternates"><?php o2_the_field('paragrafo'); ?></div>
            <div class="font18 fw400 text-gray font-alternates"><?php o2_the_field('paragrafo2'); ?></div>
            <div class="card">
              <?php o2_the_field('paragrafo3'); ?>
            </div>
          </div>
        </div>
        <div class="editor">
          <?= apply_filters('the_content', o2_get_field('texto-pos-imagem')); ?>
        </div>
      </div>
    </div>

    <div class="bg-blue d-none">
      <div class="mw-1920 mx-auto">
        <div class="container-xl">
          <h2 class="font40 fw600 font-alternates text-center text-white"><?php o2_the_field('titulo-slider-melo-cordeiro'); ?></h2>

          <?php
          $slider = o2_get_field('slider'); ?>
          <div class="row flex-column-reverse flex-md-row align-items-center">
            <div class="col-12 col-md-3">
              <div class="swiper-container position-relative">
                <div class="swiper swiper-itens">
                  <div class="swiper-wrapper">
                    <?php
                    foreach ($slider as $index => $item) : ?>
                      <div class="swiper-slide <?= $index == 0 ? 'active' : ''; ?>">
                        <?= $item['titulo']; ?>
                      </div>
                    <?php
                    endforeach; ?>
                  </div>
                </div>
                <div class="swiper-button-prev itens-prev"></div>
                <div class="swiper-button-next itens-next"></div>
              </div>
            </div>
            <div class="col-12 col-md-9">
              <div class="swiper swiper-imagens">
                <div class="swiper-wrapper">
                  <?php
                  foreach ($slider as $item) : ?>
                    <div class="swiper-slide">
                      <img src="<?= wp_get_attachment_url($item['imagem']); ?>" alt="<?= $item['titulo']; ?>" class="img-fluid">
                      <div class="text-wrapper">
                        <h3 class="font20 fw700 text-white font-alternates text-center"><?= $item['titulo']; ?></h3>
                        <h4 class="fw500 text-white font-alternates text-center"><?= $item['subtitulo']; ?></h4>
                      </div>
                    </div>
                  <?php
                  endforeach; ?>
                </div>
              </div>
              <script defer>
                jQuery(function() {
                  var swiperItens = new Swiper(".swiper-itens", {
                    direction: "vertical",
                    speed: 800,
                    centerInsufficientSlides: true,
                    slidesPerView: 5,
                    spaceBetween: 8,
                    navigation: {
                      nextEl: ".itens-next",
                      prevEl: ".itens-prev",
                    },
                    slideToClickedSlide: true,
                  });

                  var swiperImagens = new Swiper(".swiper-imagens", {
                    speed: 800,
                    centerInsufficientSlides: true,
                    slidesPerView: 1,
                    effect: "fade",
                    fadeEffect: {
                      crossFade: true,
                    },
                    allowTouchMove: false,
                  });

                  function atualizarAtivo() {
                    jQuery(".swiper-itens .swiper-slide").removeClass("ativo");
                    jQuery(".swiper-itens .swiper-slide").eq(swiperItens.activeIndex).addClass("ativo");
                  }

                  swiperItens.on("slideChange", function() {
                    swiperImagens.slideTo(swiperItens.activeIndex);
                    atualizarAtivo();
                  });

                  swiperImagens.on("slideChange", function() {
                    swiperItens.slideTo(swiperImagens.activeIndex);
                    atualizarAtivo();
                  });

                  atualizarAtivo();

                  jQuery(".swiper-itens .swiper-slide").on("click", function() {
                    var index = jQuery(this).index();
                    swiperItens.slideTo(index);
                    swiperImagens.slideTo(index);
                    jQuery('.swiper-itens .swiper-slide').removeClass('active');
                    jQuery(this).addClass('active');
                  });
                });
              </script>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>

  <!-- ABA - PROJETO E-DUKA -->
  <section class="section-social section-projeto-eduka overflow-hidden" data-tab="projeto-eduka">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">
        <h2 class="font60 fw900 text-green mb-4"><?php o2_the_field('titulo-eduka'); ?></h2>
        <div class="row">
          <?php
          $textos = o2_get_field('textos-eduka');
          foreach ($textos as $item) : ?>
            <div class="col-12 col-md-6">
              <p class="text-gray">
                <?= $item['texto']; ?>
              </p>
            </div>
          <?php
          endforeach; ?>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6">
            <div class="card-wrapper mx-auto mx-lg-0">
              <?php o2_the_field('texto-card-eduka'); ?>
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="img-wrapper">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-card-eduka')); ?>" alt="Projeto E-duka">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ABA - PROJETO COSTURA CRIATIVA -->
  <section class="section-social section-costura-criativa overflow-hidden" data-tab="costura-criativa">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">
        <h2 class="font60 fw900 text-green mb-4"><?php o2_the_field('titulo-costura-criativa'); ?></h2>
        <div class="row">
          <?php
          $textos = o2_get_field('textos-costura-criativa');
          foreach ($textos as $item) : ?>
            <div class="col-12 col-md-6">
              <p class="text-gray">
                <?= $item['texto']; ?>
              </p>
            </div>
          <?php
          endforeach; ?>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6">
            <div class="card-wrapper mx-auto mx-lg-0">
              <?php o2_the_field('texto-card-costura-criativa'); ?>
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="img-wrapper">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-card-costura-criativa')); ?>" alt="Projeto Costura Criativa">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ABA - PROJETO JOVENS DE OURO -->
  <section class="section-social section-costura-criativa overflow-hidden" data-tab="jovens-ouro">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">
        <h2 class="font60 fw900 text-green mb-4"><?= o2_get_field('titulo-jovens-de-ouro') ?></h2>
        <div class="row">
            <div class="col-12">
              <p class="text-gray">
                <?= o2_get_field('texto-jovens-de-ouro') ?>
              </p>
            </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6">
            <!-- <div class="card-wrapper mx-auto mx-lg-0">
              <?php o2_the_field('texto-card-costura-criativa'); ?>
            </div> -->
          </div>
          <div class="col-12 col-lg-6">
             <!-- <div class="img-wrapper">
               <img src="<?= wp_get_attachment_url(o2_get_field('imagem-card-costura-criativa')); ?>"  alt="Projeto Costura Criativa">
            </div> -->
           </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ABA - PROJETO CAMPANHA DO AGASALHO  -->
  <section class="section-social section-costura-criativa overflow-hidden" data-tab="campanha-agasalho">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">
        <h2 class="font60 fw900 text-green mb-4"><?= o2_get_field('titulo-campanha-agasalho') ?></h2>
        <div class="row">
            <div class="col-12">
              <p class="text-gray">
                <?= o2_get_field('texto-campanha-agasalho') ?>
              </p>
            </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6">
            <!-- <div class="card-wrapper mx-auto mx-lg-0">
              <?php o2_the_field('texto-card-costura-criativa'); ?>
            </div> -->
          </div>
          <div class="col-12 col-lg-6">
             <!-- <div class="img-wrapper">
               <img src="<?= wp_get_attachment_url(o2_get_field('imagem-card-costura-criativa')); ?>"  alt="Projeto Costura Criativa">
            </div> -->
           </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ABA - TURMA DO JILÓ -->
  <section class="section-social section-turma-jilo" data-tab="turma-jilo">

    <div class="drawings-wrapper mw-1920 mx-auto">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col-12 col-xl-2 d-none d-xl-block ps-0">
            <img src="<?php bloginfo("template_url") ?>/assets/images/jilo-left.png" alt="Turma do Jiló">
          </div>
          <div class="col-12 col-md-8 col-xl-6">
            <div class="text-wrapper">
              <h2 class="font60 fw900 text-green"><?php o2_the_field('titulo-turma-jilo'); ?></h2>
              <p class="font18 fw400 text-gray font-alternates"><?php o2_the_field('texto-turma-jilo'); ?></p>
            </div>
          </div>
          <div class="col-12 col-md-4 mt-4 mt-md-0 d-flex justify-content-center justify-content-md-start">
            <img src="<?php bloginfo("template_url") ?>/assets/images/jilo-right.png" alt="Turma do Jiló" class="d-none d-md-block">
            <img src="<?php bloginfo("template_url") ?>/assets/images/jilo-right-mobile.png" alt="Turma do Jiló" class="d-block d-md-none">
          </div>
        </div>
      </div>
    </div>

    <div class="volumes">
      <div class="mw-1920 mx-auto">
        <div class="container-xl">
          <h2 class="font24 fw500 font-alternates text-center font-alternates mb-4 mb-md-5"><?php o2_the_field('titulo-volumes-turma-jilo'); ?></h2>

          <div class="row row-gap-5 pt-3">
            <?php
            $volumes = o2_get_field('volumes');

            foreach ($volumes as $item) : ?>
              <div class="col-6 col-md-3 d-flex flex-column align-items-center">
                <a href="<?= wp_get_attachment_url($item['arquivo']); ?>" target="_blank">
                  <img src="<?= wp_get_attachment_url($item['imagem']); ?>" alt="<?= $item['volume']; ?>" class="img-fluid d-block mx-auto mb-3">
                  <p class="font14 fw700 font-alternates text-white text-center">
                    <?= $item['volume']; ?>
                    <svg class="ms-1" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9 0L9 12" stroke="white" stroke-width="2" />
                      <path d="M2 6L9 13L16 6" stroke="white" stroke-width="2" />
                      <path d="M0 18H18" stroke="white" stroke-width="2" />
                    </svg>
                  </p>
                  <p class="font14 fw700 font-alternates text-white text-center mt-1"><?= $item['descricao']; ?></p>
                </a>
              </div>
            <?php
            endforeach; ?>
          </div>

        </div>
      </div>
    </div>

    <div class="mw-1920 mx-auto imagem-turma-jilo">
      <div class="container-xl">
        <div class="row align-items-center">
          <div class="col-12 col-md-7 col-xxl-5 d-none d-xl-block">
            <div class="img-wrapper position-relative">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-turma-jilo')); ?>" alt="Turma do Jiló">
            </div>
          </div>
          <div class="col-12 col-xl-5 col-xxl-6">
            <div class="text-wrapper">
              <div class="editor">
                <?= apply_filters('the_content', o2_get_field('texto-imagem-turma-jilo')); ?>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>

</main>

<?php
get_footer(); ?>