<?php
/*
 * Template Name: About Page
 *
 * @package far_loop
 */

get_header();

/** =========================
 *  Carga de campos About
 *  ========================= */
$fields = array_fill_keys(array('about_sections'), null);
foreach ($fields as $field => $value) {
  $fields[$field] = get_field($field);
}

// ACF Group "team"
$team        = get_field('team');
$team_title  = $team['team_title']  ?? '';
$team_layout = $team['team_layout'] ?? ''; // 'list' | 'slide'
$team_list   = $team['team_list']   ?? '';
$team_slide  = $team['team_horizontal_slide'] ?? array();

/** =========================
 *  Helper: retrato del perfil (ACF image 'portait' en el CPT profile)
 *  return_format = array (url, ID, alt, etc.)
 *  ========================= */
function far_loop_get_profile_portrait_html($member_id, $member_title = '') {
  if (!$member_id) return '';

  // OJO: el nombre del campo es 'portait' (sin 'r')
  $portrait = get_field('portait', $member_id);

  if (is_array($portrait) && !empty($portrait)) {
    if (!empty($portrait['ID'])) {
      $img_id = (int) $portrait['ID'];
      $alt    = $portrait['alt'] ?? $member_title;
      $html = wp_get_attachment_image(
        $img_id,
        'medium_large',
        false,
        array('loading' => 'lazy', 'alt' => esc_attr($alt))
      );
      if ($html) return $html;
    }
    if (!empty($portrait['url'])) {
      $url = esc_url($portrait['url']);
      $alt = esc_attr($portrait['alt'] ?? $member_title);
      return sprintf('<img src="%s" alt="%s" loading="lazy" />', $url, $alt);
    }
  }

  // Fallback: imagen destacada del perfil
  $thumb = get_the_post_thumbnail(
    $member_id,
    'medium_large',
    array('loading' => 'lazy', 'alt' => esc_attr($member_title))
  );

  return $thumb ?: '';
}

?>
<div class="u_pt-3 u_pt-md-6 wrapper-about-loop">
  <div class="l_container u_mv-5">

 

          <ul class="same-page-nav page-nav">
            <li class="same-page-nav__item"><a href="#about-team" data-soft-scroll="#about-team" class="same-page-nav__link"><?php _e( 'Loop Team', 'far_loop' );?></a></li>
            <li class="same-page-nav__item"><a href="#about-press" data-soft-scroll="#about-press" class="same-page-nav__link"><?php _e( 'Press', 'far_loop' );?></a></li>
            <li class="same-page-nav__item"><a href="#about-partners" data-soft-scroll="#about-partners" class="same-page-nav__link"><?php _e( 'Partners', 'far_loop' );?></a></li>
          </ul>




    <?php if (!empty($fields['about_sections'])) : ?>
      
      <?php foreach ($fields['about_sections'] as $section) :
        $label  = $section['section_title'] ?? '';
        $anchor = sanitize_title($label);
        $html   = $section['section_content'] ?? '';
        $image  = $section['section_image'] ?? ''; // nuevo campo
        if (!$anchor || !$label) continue;
      ?>
        <div id="<?php echo esc_attr($anchor); ?>" class="visitors-section">

  
         <!-- <h2 class="section-heading delta"><span class="u_text-underline"><?php echo esc_html($label); ?></span></h2> -->
          
          <?php if ($image) : ?>
            <div class="wrapper-profile">
              <div class="cover-image activity-single-image">
                <img src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($label); ?>">
              </div>
            </div>
          <?php endif; ?>

         
          
          <div class="wysiwyg">
            <?php echo $html; // WYSIWYG ?>
          </div>
        </div>
      <?php endforeach; ?>
      
    <?php endif; ?>


    <!-- BLOQUE TEAM -->
    <?php if ($team_title || $team_layout) : ?>
      <div class="u_mt-6 u_pt-3" id="about-team">
     
          <?php if ($team_title) : ?>
            <h2 class="section-heading delta"><span class="u_text-underline"><?php echo esc_html($team_title); ?></span></h2>
          <?php endif; ?>

          <?php if ($team_layout === 'list') : ?>

            <div class="wysiwyg">
              <?php echo $team_list; ?>
            </div>

          <?php elseif ($team_layout === 'slide') : ?>

            <?php if (!empty($team_slide) && is_array($team_slide)) : ?>
              <!-- Slider Team (Swiper) -->
              <div class="team-swiper-outer u_mt-3">
                <div class="swiper team-swiper" data-swiper-team>

                  <!-- Controles -->
                  <div class="team-swiper__controls u_mt-1">
                    <button class="team-swiper__prev" type="button" aria-label="<?php esc_attr_e('Anterior', 'far_loop'); ?>">&larr;</button>
                    <button class="team-swiper__next" type="button" aria-label="<?php esc_attr_e('Siguiente', 'far_loop'); ?>">&rarr;</button>
                  </div>

                  <div class="swiper-wrapper">
                    <?php foreach ($team_slide as $row) :
                      $member   = $row['team_member'] ?? null; // Post Object (WP_Post)
                      $position = $row['position'] ?? '';
                      if (!$member) continue;

                      $member_id = (is_object($member) && !empty($member->ID)) ? (int)$member->ID : 0;
                      if (!$member_id) continue;

                      $member_title  = get_the_title($member_id);
                      $member_link   = get_permalink($member_id);
                      $portrait_html = far_loop_get_profile_portrait_html($member_id, $member_title);
                    ?>
                      <div class="swiper-slide archive-grid">

                        <article class="team-card">
                          <a class="team-card__thumb portrait" href="<?php echo esc_url($member_link); ?>">
                            <?php echo $portrait_html; ?>
                          </a>

                       <div class="archive-thumb__text">
                          <?php if (!empty($position)) : ?><div class="archive-thumb__label"><?php echo esc_html($position); ?></div><?php endif; ?>
                          <div class="archive-thumb__title"><a href="<?php echo esc_url($member_link); ?>"><?php echo esc_html($member_title); ?></a></div>
                      </div>

                        </article>

                      </div>
                    <?php endforeach; ?>
                  </div>


                </div>
              </div>



              <script>
                (function(){
                  function initTeamSwiper() {
                    if (!window.Swiper) return;
                    var el = document.querySelector('[data-swiper-team]');
                    if (!el || el.__inited) return;
                    el.__inited = true;

                    new Swiper(el, {
                      slidesPerView: 4.3,
                      spaceBetween: 24,
                      watchOverflow: true,
                      navigation: {
                        nextEl: '.team-swiper__next',
                        prevEl: '.team-swiper__prev',
                      },
                      breakpoints: {
                        0:    { slidesPerView: 1.2, spaceBetween: 16 },
                        480:  { slidesPerView: 1.6, spaceBetween: 16 },
                        640:  { slidesPerView: 2.2, spaceBetween: 18 },
                        768:  { slidesPerView: 3.2, spaceBetween: 20 },
                        1024: { slidesPerView: 4.3, spaceBetween: 24 }
                      }
                    });
                  }

                  function injectOnce(tagName, attrs) {
                    return new Promise(function(resolve){
                      var tag = document.createElement(tagName);
                      Object.keys(attrs).forEach(function(k){ tag.setAttribute(k, attrs[k]); });
                      tag.onload = function(){ resolve(); };
                      document.head.appendChild(tag);
                    });
                  }

                  if (!window.Swiper) {
                    var cssP = injectOnce('link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css' });
                    var jsP  = injectOnce('script', { src: 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js', defer: 'defer' });
                    Promise.all([cssP, jsP]).then(initTeamSwiper);
                  } else {
                    initTeamSwiper();
                  }
                })();
              </script>
            <?php endif; ?>
          <?php endif; ?>
     
      </div>
    <?php endif; ?>

    <!-- BLOQUE PRESS (embebido) -->
    <div class="u_mt-6 u_pt-3" id="about-press">
      <div class="wrapper-about-press">
        <?php
        get_template_part( 'template-parts/press' );
        ?>
      </div>
    </div>


        <!-- BLOQUE PARTNERS (embebido) -->
    <div class="u_mt-6 u_pt-3" id="about-partners">
      <div class="wrapper-about-partners">
        <?php
        // Si quieres forzar un ID concreto de la página Partners, pásalo así:
        // get_template_part( 'template-parts/partners/partners-block', null, array('partners_id' => 123) );
        get_template_part( 'template-parts/partners' );
        ?>
      </div>
    </div>

  </div>
</div>

<?php get_footer();