<?php
/**
 * Template Name: Page Home
 * Template Post Type: page
 */

get_header();
?>

<main id="site-content">

    <section class="hero">

    <?php
    $hero_style   = get_field('home_hero_style');
    $hero_image   = get_field('home_hero_imagen');
    $hero_video   = get_field('home_hero_video');
    $hero_slide   = get_field('home_slide');
    $hero_text    = get_field('home_hero_texto');
    ?>

    <?php if ($hero_style === 'image' && $hero_image): ?>
        <div class="hero-bg hero-image" style="background-image: url('<?php echo esc_url($hero_image); ?>');"></div>

    <?php elseif ($hero_style === 'video' && $hero_video): ?>
        <div class="hero-bg hero-video">
        <video autoplay muted loop playsinline>
            <source src="<?php echo esc_url($hero_video); ?>" type="video/mp4">
            <?php esc_html_e('Tu navegador no soporta video HTML5.', 'textdomain'); ?>
        </video>
        </div>

    <?php elseif ($hero_style === 'slide' && $hero_slide): ?>
        <div class="hero-bg hero-slider swiper heroSwiper">
        <div class="swiper-wrapper">
            <?php foreach ($hero_slide as $slide): ?>
            <div class="swiper-slide hero-slide" style="background-image: url('<?php echo esc_url($slide['url']); ?>');"></div>
            <?php endforeach; ?>
        </div>
        </div>
    <?php endif; ?>

    <!-- Texto superpuesto -->
    <?php if ( $hero_text ) : ?>
        <div class="hero-overlay-text section-inner">
            <?php echo $hero_text; ?>
        </div>
    <?php endif; ?>

    </section>






    <section class="section-igualdad section-inner">
        
    </section>



















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

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

<script>
  const swiper = new Swiper(".mySwiper", {
    // 🔹 Configuración base (para <700px)
    slidesPerView: 1,
    spaceBetween: 0,
    centeredSlides: false,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 🔹 A partir de 700px o más
    breakpoints: {
      700: {
        slidesPerView: 1.12,
        spaceBetween: 20,
        centeredSlides: true,
      }
    }
  });



  const heroSwiper = new Swiper(".heroSwiper", {
    loop: true,
    effect: "fade",
    fadeEffect: { crossFade: true },
    speed: 1200,
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
    allowTouchMove: false, // sin interacción manual
  });
</script>

<?php
get_footer();