<?php
/**
 * Template Name: Page Work with Us
 * Template Post Type: post, page
 */

get_header();
?>

<main id="site-content">





<section class="section-company-intro">
  <div class="company-intro-inner section-inner">
    <div class="company-intro-title"><?php the_title(); ?></div>
    <div class="work-intro-text"><?php the_field('intro_text'); ?></div>
  </div>
</section>




<?php
// Selector: "image" | "video"
$bg_type = get_field( 'work_values_image_video' );

// Media
$values_img   = get_field( 'work_values_image' ); // URL (según tu setup actual)
$values_video = get_field( 'work_values_video' ); // puede ser URL o array (ACF File)

// Normalizamos video a URL
$values_video_url = '';
if ( is_array( $values_video ) ) {
	$values_video_url = $values_video['url'] ?? '';
} elseif ( is_string( $values_video ) ) {
	$values_video_url = $values_video;
}

// Helper para renderizar background (imagen o video)
function talat_render_work_values_bg( $bg_type, $img_url, $video_url ) {
	?>
	<div class="company-values-bg">
		<?php if ( $bg_type === 'video' && $video_url ) : ?>
			<div class="company-values-bg-media company-values-bg-media--video">
				<video autoplay muted loop playsinline preload="metadata">
					<source src="<?php echo esc_url( $video_url ); ?>" type="video/mp4">
				</video>
			</div>
		<?php elseif ( $img_url ) : ?>
			<div class="company-values-bg-image"
				 style="background-image: url('<?php echo esc_url( $img_url ); ?>');"></div>
		<?php endif; ?>
	</div>
	<?php
}
?>

<?php if ( have_rows( 'work_values' ) ) : ?>

	<!-- 🖥 DESKTOP -->
	<section class="company-values display-desktop">

		<?php talat_render_work_values_bg( $bg_type, $values_img, $values_video_url ); ?>

		<div class="company-values-inner section-inner">
			<div class="company-values-cards">
				<?php while ( have_rows( 'work_values' ) ) : the_row(); ?>
					<?php
					$value_title = get_sub_field( 'value_title' );
					$value_text  = get_sub_field( 'value_text' );
					?>
					<article class="company-value-card">
						<?php if ( $value_title ) : ?>
							<h3 class="company-value-title"><?php echo esc_html( $value_title ); ?></h3>
						<?php endif; ?>

						<?php if ( $value_text ) : ?>
							<div class="company-value-text"><?php echo wp_kses_post( $value_text ); ?></div>
						<?php endif; ?>
					</article>
				<?php endwhile; ?>
			</div>
		</div>
	</section>

	<?php
	// Reiniciamos el repeater para poder usarlo en mobile
	if ( function_exists( 'reset_rows' ) ) {
		reset_rows( 'work_values' );
	}
	?>

	<?php if ( have_rows( 'work_values' ) ) : ?>
		<!-- 📱 MOBILE (Swiper) -->
		<section class="company-values company-values-mobile display-mobile">

			<?php talat_render_work_values_bg( $bg_type, $values_img, $values_video_url ); ?>

			<div class="company-values-mobile-inner section-inner">
				<div class="company-values-swiper swiper">
					<div class="swiper-wrapper">
						<?php while ( have_rows( 'work_values' ) ) : the_row(); ?>
							<?php
							$value_title = get_sub_field( 'value_title' );
							$value_text  = get_sub_field( 'value_text' );
							?>
							<div class="swiper-slide">
								<article class="company-value-card">
									<?php if ( $value_title ) : ?>
										<h3 class="company-value-title"><?php echo esc_html( $value_title ); ?></h3>
									<?php endif; ?>

									<?php if ( $value_text ) : ?>
										<div class="company-value-text"><?php echo wp_kses_post( $value_text ); ?></div>
									<?php endif; ?>
								</article>
							</div>
						<?php endwhile; ?>
					</div>
				</div><!-- .company-values-swiper -->
			</div><!-- .company-values-mobile-inner -->
		</section>
	<?php endif; ?>

<?php endif; ?>



<?php
$work_text1 = get_field( 'work_text1' );
?>

<section class="home-expertise">
	<div class="home-expertise-inner section-inner">

		<!-- COLUMNA IZQUIERDA -->
		<div class="home-expertise-left">

			<div class="home-expertise-copy">
				<h2 class="home-expertise-title"><?php esc_html_e('Work With Us', 'talat'); ?></h2>

				<?php if ( $work_text1 ) : ?>
					<div class="home-expertise-text">
						<?php echo $work_text1; ?>
					</div>
				<?php endif; ?>
			</div>

		</div><!-- /.home-expertise-left -->


		<!-- COLUMNA DERECHA -->
		<div class="home-expertise-right">

			<h3 class="home-keysectors-title"><?php esc_html_e('Nuestras Vacantes', 'talat'); ?></h3>

			<?php if ( have_rows( 'available_positions' ) ) : ?>
				<div class="home-keysectors-list">
					<?php while ( have_rows( 'available_positions' ) ) : the_row(); ?>
						<?php
						$title    = get_sub_field( 'position_title' );
						$text     = get_sub_field( 'position_text' );
						$link     = get_sub_field( 'position_link' );
						?>
						<article class="position-keysector-item">
					

							<div class="home-keysector-main">
								<?php if ( $title ) : ?>
									<div class="home-keysector-title">
										<?php echo esc_html( $title ); ?>
									</div>
								<?php endif; ?>

								<?php if ( $text ) : ?>
									<div class="home-keysector-text">
										<?php echo $text; ?>
									</div>
								<?php endif; ?>
							</div>
						</article>
					<?php endwhile; ?>
				</div>
			<?php endif; ?>

		</div><!-- /.home-expertise-right -->

	</div><!-- /.home-expertise-inner -->
</section>





    


<?php
$contact_image = get_field( 'contact_image' );      // ACF image (array)
$contact_form  = get_field( 'contact_form_id' );    // WYSIWYG con shortcode WPForms

$contact_bg = '';
if ( is_array( $contact_image ) && ! empty( $contact_image['url'] ) ) {
    $contact_bg = $contact_image['url'];
} elseif ( is_string( $contact_image ) ) {
    $contact_bg = $contact_image;
}
?>

<?php if ( $contact_bg || $contact_form ) : ?>
<section class="company-contact" id="company-contact"
    <?php if ( $contact_bg ) : ?>
        style="background-image:url('<?php echo esc_url( $contact_bg ); ?>');"
    <?php endif; ?>
>
    <div class="company-contact-overlay"></div>

    <div class="company-contact-inner section-inner">
        <div class="company-contact-left">
            <h2 class="company-contact-title">Work With Us</h2>
        </div>

        <div class="company-contact-right">
            <div class="company-contact-form">

                <?php
                // El WYSIWYG contiene el shortcode de WPForms (ej. [wpforms id="123"])
                if ( $contact_form ) {
                    echo do_shortcode( $contact_form );
                }
                ?>

            </div>
        </div>
    </div>
</section>
<?php endif; ?>
    



</main><!-- #site-content -->

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof Swiper === 'undefined') return;

    new Swiper('.company-values-swiper', {
        slidesPerView: 1.1,
        spaceBetween: 20,
        loop: false,
        navigation: false,
        pagination: false,
        centeredSlides: false
    });
});
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {
  const blocks = document.querySelectorAll('[data-clients-collapsible]');
  if (!blocks.length) return;

  function isMobile() {
    return window.matchMedia('(max-width: 900px)').matches;
  }

  blocks.forEach(function (block) {
    const btn = block.querySelector('.home-clients-see-more');
    const list = block.querySelector('ul');
    if (!btn || !list) return;

    function countItems() {
      return list.querySelectorAll('li').length;
    }

    function setCollapsedState() {
      // Solo aplica en mobile
      if (!isMobile()) {
        block.classList.remove('is-collapsed', 'is-expanded');
        btn.style.display = 'none';
        btn.setAttribute('aria-expanded', 'false');
        return;
      }

      const total = countItems();

      // Si hay 5 o menos, no mostramos botón
      if (total <= 5) {
        block.classList.remove('is-collapsed', 'is-expanded');
        btn.style.display = 'none';
        btn.setAttribute('aria-expanded', 'false');
        return;
      }

      // Por defecto colapsado
      if (!block.classList.contains('is-expanded')) {
        block.classList.add('is-collapsed');
        btn.style.display = 'inline-flex';
        btn.setAttribute('aria-expanded', 'false');
        btn.childNodes[0].nodeValue = 'See more ';
      }
    }

    // Toggle
    btn.addEventListener('click', function () {
      if (!isMobile()) return;

      const expanded = block.classList.toggle('is-expanded');
      block.classList.toggle('is-collapsed', !expanded);

      btn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
      btn.childNodes[0].nodeValue = expanded ? 'See less ' : 'See more ';
    });

    // Init + on resize
    setCollapsedState();
    window.addEventListener('resize', setCollapsedState);
  });
});
</script>


<?php
get_footer();
