<?php
require_once 'includes/bootstrap.php';
require_once 'includes/product-card.php';
include 'includes/header.php';

$hero_products = mysqli_query($conn,"SELECT p.*, b.name brand_name FROM products p LEFT JOIN brands b ON p.brand_id=b.id WHERE p.status=1 ORDER BY p.id DESC LIMIT 6");
$banners = mysqli_query($conn,"SELECT * FROM banners WHERE status=1 AND position='hero' ORDER BY sort_order ASC,id ASC LIMIT 6");
$categories = mysqli_query($conn,"SELECT * FROM categories WHERE status=1 AND (parent_id=0 OR parent_id IS NULL) ORDER BY sort_order ASC,id ASC LIMIT 15");
$suggested = mysqli_query($conn,"SELECT p.*, b.name brand_name FROM products p LEFT JOIN brands b ON p.brand_id=b.id WHERE p.status=1 ORDER BY p.id DESC LIMIT 8");
$new = mysqli_query($conn,"SELECT p.*, b.name brand_name FROM products p LEFT JOIN brands b ON p.brand_id=b.id WHERE p.status=1 AND p.is_new=1 ORDER BY p.id DESC LIMIT 8");
$hot = mysqli_query($conn,"SELECT p.*, b.name brand_name FROM products p LEFT JOIN brands b ON p.brand_id=b.id WHERE p.status=1 AND (p.is_hot=1 OR p.discount_percent>0) ORDER BY p.discount_percent DESC,p.id DESC LIMIT 8");
$best = mysqli_query($conn,"SELECT p.*, b.name brand_name FROM products p LEFT JOIN brands b ON p.brand_id=b.id WHERE p.status=1 AND p.is_best=1 ORDER BY p.id DESC LIMIT 8");
$brands = mysqli_query($conn,"SELECT * FROM brands ORDER BY exclusive DESC,sort_order ASC,id ASC LIMIT 16");

$banner80 = mysqli_query($conn,"SELECT * FROM banners WHERE status=1 AND position='banner80' ORDER BY sort_order ASC,id ASC LIMIT 1");
$bn80 = $banner80 && mysqli_num_rows($banner80) ? mysqli_fetch_assoc($banner80) : null;
$bn80_cat = $bn80 && isset($bn80['category_id']) ? (int)$bn80['category_id'] : 0;

$bn80_products = false;
if ($bn80_cat > 0) {
  $ids = array($bn80_cat);
  $subs = mysqli_query($conn,"SELECT id FROM categories WHERE parent_id=$bn80_cat AND status=1");
  if ($subs) {
    while ($s = mysqli_fetch_assoc($subs)) {
      $ids[] = (int)$s['id'];
    }
  }
  $in = implode(',', array_map('intval', $ids));
  $bn80_products = mysqli_query($conn,"SELECT p.*, b.name brand_name FROM products p LEFT JOIN brands b ON p.brand_id=b.id WHERE p.status=1 AND p.category_id IN ($in) ORDER BY p.id DESC LIMIT 8");
}

if (!$bn80_products || mysqli_num_rows($bn80_products) == 0) {
  $bn80_products = mysqli_query($conn,"SELECT p.*, b.name brand_name FROM products p LEFT JOIN brands b ON p.brand_id=b.id WHERE p.status=1 ORDER BY p.id DESC LIMIT 8");
}

$featured_cats = mysqli_query($conn,"SELECT * FROM categories WHERE status=1 AND (parent_id=0 OR parent_id IS NULL) AND (banner_image<>'' OR id IN (SELECT DISTINCT category_id FROM products WHERE status=1)) ORDER BY sort_order ASC,id ASC LIMIT 6");
?>

<style>
/* ===== إصلاح سلايدر الصفحة الرئيسية مثل حركة المتاجر الحديثة ===== */
.hero {
  margin-top: 10px;
}

.hero-swiper {
  position: relative;
  width: 100%;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: #eef1f6;
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(55px);
  transition: opacity .75s ease, transform .75s ease, visibility .75s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 42px 54px;
  min-height: 360px;
  background: linear-gradient(100deg, #d9dde4 0%, #f3f4f7 48%, #d5d9df 100%);
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.hero-slide.leaving {
  opacity: 0;
  transform: translateX(-55px);
  z-index: 1;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 50%, rgba(255,255,255,.7), transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.65));
  z-index: 0;
}

.hero-text {
  position: relative;
  z-index: 3;
  max-width: 470px;
}

.hero-find {
  font-size: 58px;
  line-height: .9;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 9px 18px rgba(0,0,0,.23);
  transform: rotate(-5deg);
}

.hero-every {
  font-family: Georgia, serif;
  font-size: 84px;
  line-height: .75;
  color: #e32a27;
  font-style: italic;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(255,255,255,.75);
}

.hero-want {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  margin-left: 185px;
  margin-top: -6px;
  text-shadow: 0 7px 15px rgba(0,0,0,.20);
}

.hero-banner-title {
  margin-top: 15px;
  font-size: 20px;
  font-weight: 900;
  color: #17223b;
}

.hero-banner-sub {
  margin-top: 7px;
  font-size: 14px;
  color: #5d6678;
  max-width: 380px;
  line-height: 1.6;
}

.order-btn {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #e32a27;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  transition: .2s;
}

.order-btn:hover {
  transform: translateY(-2px);
}

.hero-products {
  position: relative;
  z-index: 2;
  width: 52%;
  height: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
}

.hero-products img {
  background: #fff;
  border-radius: 18px;
  padding: 8px;
  object-fit: contain;
  box-shadow: 0 16px 30px rgba(0,0,0,.14);
  transition: transform .75s ease, opacity .75s ease;
}

.hero-slide:not(.active) .hero-products img {
  opacity: 0;
  transform: translateY(30px) scale(.92);
}

.hero-slide.active .hero-products img:nth-child(1) {
  width: 92px;
  height: 135px;
  animation: heroFloat 3.4s ease-in-out infinite;
}

.hero-slide.active .hero-products img:nth-child(2) {
  width: 190px;
  height: 135px;
  animation: heroFloat 3.9s ease-in-out infinite;
}

.hero-slide.active .hero-products img:nth-child(3) {
  width: 112px;
  height: 245px;
  animation: heroFloat 4.3s ease-in-out infinite;
}

.hero-slide.active .hero-products img:nth-child(4) {
  width: 130px;
  height: 100px;
  animation: heroFloat 3.6s ease-in-out infinite;
}

.hero-slide.active .hero-products img:nth-child(5) {
  width: 170px;
  height: 118px;
  animation: heroFloat 4.1s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.hero-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  opacity: .85;
  cursor: pointer;
  transition: .25s;
}

.hero-dots button.active {
  width: 28px;
  border-radius: 999px;
  background: #e32a27;
  opacity: 1;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  color: #e32a27;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .2s;
}

.hero-arrow:hover {
  background: #e32a27;
  color: #fff;
}

.hero-prev {
  left: 18px;
}

.hero-next {
  right: 18px;
}

@media(max-width: 900px) {
  .hero-swiper,
  .hero-slide {
    min-height: 310px;
  }

  .hero-slide {
    padding: 30px 22px;
  }

  .hero-find {
    font-size: 38px;
  }

  .hero-every {
    font-size: 55px;
  }

  .hero-want {
    font-size: 22px;
    margin-left: 90px;
  }

  .hero-products {
    width: 48%;
    opacity: .75;
    transform: scale(.85);
  }
}

@media(max-width: 600px) {
  .hero-swiper,
  .hero-slide {
    min-height: 245px;
  }

  .hero-products {
    position: absolute;
    right: -30px;
    bottom: 20px;
    width: 60%;
    opacity: .35;
    transform: scale(.72);
  }

  .hero-find {
    font-size: 32px;
  }

  .hero-every {
    font-size: 42px;
  }

  .hero-want {
    font-size: 19px;
    margin-left: 72px;
  }

  .hero-banner-title,
  .hero-banner-sub {
    display: none;
  }

  .hero-arrow {
    display: none;
  }
}
</style>

<main class="container">

  <section class="hero">
    <div class="hero-swiper" id="heroSwiper">

      <?php
      $slide_count = 0;

      if ($banners && mysqli_num_rows($banners)):
        while ($b = mysqli_fetch_assoc($banners)):
          $title = localized($b,'title',$lang);
          $sub = localized($b,'subtitle',$lang);
          $link = isset($b['link']) && trim($b['link']) !== '' ? $b['link'] : 'search.php?lang=' . e($lang);
      ?>
        <div class="hero-slide <?php echo $slide_count == 0 ? 'active' : ''; ?>">
          <div class="hero-text">
            <div class="hero-find">Find</div>
            <div class="hero-every">Everything</div>
            <div class="hero-want">you want</div>

            <?php if ($title != ''): ?>
              <div class="hero-banner-title"><?php echo e($title); ?></div>
            <?php endif; ?>

            <?php if ($sub != ''): ?>
              <div class="hero-banner-sub"><?php echo e($sub); ?></div>
            <?php endif; ?>

            <a class="order-btn" href="<?php echo e($link); ?>">
              <?php echo e(t('order_now')); ?>
            </a>
          </div>

          <div class="hero-products">
            <?php
            if ($hero_products) {
              mysqli_data_seek($hero_products, 0);
              $k = 0;
              while ($hp = mysqli_fetch_assoc($hero_products)) {
                if ($k >= 5) break;
                echo '<img src="'.e(thumb_url(first_image($conn,(int)$hp['id']),260,260,'contain')).'" loading="eager" decoding="async" alt="">';
                $k++;
              }
            }
            ?>
          </div>
        </div>
      <?php
          $slide_count++;
        endwhile;
      else:
      ?>
        <div class="hero-slide active">
          <div class="hero-text">
            <div class="hero-find">Find</div>
            <div class="hero-every">Everything</div>
            <div class="hero-want">you want</div>
            <div class="hero-banner-title">Tariq Alagha Store</div>
            <div class="hero-banner-sub">Everything you need from electronics and home appliances.</div>
            <a class="order-btn" href="search.php?lang=<?php echo e($lang); ?>">
              <?php echo e(t('order_now')); ?>
            </a>
          </div>

          <div class="hero-products">
            <?php
            if ($hero_products) {
              while ($hp = mysqli_fetch_assoc($hero_products)) {
                echo '<img src="'.e(thumb_url(first_image($conn,(int)$hp['id']),260,260,'contain')).'" loading="eager" decoding="async" alt="">';
              }
            }
            ?>
          </div>
        </div>

        <div class="hero-slide">
          <div class="hero-text">
            <div class="hero-find">Find</div>
            <div class="hero-every">Everything</div>
            <div class="hero-want">you want</div>
            <div class="hero-banner-title">New Arrivals</div>
            <div class="hero-banner-sub">Latest products arrived now at Tariq Alagha.</div>
            <a class="order-btn" href="new-arrivals.php?lang=<?php echo e($lang); ?>">
              <?php echo e(t('order_now')); ?>
            </a>
          </div>

          <div class="hero-products">
            <?php
            if ($hero_products) {
              mysqli_data_seek($hero_products, 0);
              $k = 0;
              while ($hp = mysqli_fetch_assoc($hero_products)) {
                if ($k >= 5) break;
                echo '<img src="'.e(thumb_url(first_image($conn,(int)$hp['id']),260,260,'contain')).'" loading="eager" decoding="async" alt="">';
                $k++;
              }
            }
            ?>
          </div>
        </div>

        <div class="hero-slide">
          <div class="hero-text">
            <div class="hero-find">Find</div>
            <div class="hero-every">Everything</div>
            <div class="hero-want">you want</div>
            <div class="hero-banner-title">Hot Deals</div>
            <div class="hero-banner-sub">Best offers and discounts for your home.</div>
            <a class="order-btn" href="offers.php?lang=<?php echo e($lang); ?>">
              <?php echo e(t('order_now')); ?>
            </a>
          </div>

          <div class="hero-products">
            <?php
            if ($hero_products) {
              mysqli_data_seek($hero_products, 0);
              $k = 0;
              while ($hp = mysqli_fetch_assoc($hero_products)) {
                if ($k >= 5) break;
                echo '<img src="'.e(thumb_url(first_image($conn,(int)$hp['id']),260,260,'contain')).'" loading="eager" decoding="async" alt="">';
                $k++;
              }
            }
            ?>
          </div>
        </div>
      <?php
        $slide_count = 3;
      endif;
      ?>

      <button class="hero-arrow hero-prev" type="button" aria-label="Previous">‹</button>
      <button class="hero-arrow hero-next" type="button" aria-label="Next">›</button>

      <div class="hero-dots">
        <?php
        $count = max(1, $slide_count);
        for ($d = 0; $d < $count; $d++):
        ?>
          <button class="<?php echo $d == 0 ? 'active' : ''; ?>" type="button" data-slide="<?php echo $d; ?>"></button>
        <?php endfor; ?>
      </div>

    </div>
  </section>

  <section class="section">
    <h2 class="section-title"><?php echo e(t('shop_by_category')); ?></h2>
    <div class="category-grid">
      <?php if ($categories): while ($c = mysqli_fetch_assoc($categories)): ?>
        <?php
          $nm = category_name($c,$lang);
          $img = clean_upload_path($c['image'], category_product_image($conn,(int)$c['id']));
        ?>
        <a class="cat-card" href="category.php?id=<?php echo (int)$c['id']; ?>&lang=<?php echo e($lang); ?>">
          <div class="cat-img">
            <img src="<?php echo e(thumb_url($img,180,180,'contain')); ?>" loading="lazy" decoding="async" alt="<?php echo e($nm); ?>">
          </div>
          <span><?php echo e($nm); ?></span>
        </a>
      <?php endwhile; endif; ?>
    </div>
  </section>

  <section class="section" id="suggested">
    <div class="title-row">
      <h2><?php echo e(t('suggested')); ?></h2>
      <a class="see-all" href="search.php?lang=<?php echo e($lang); ?>"><?php echo e(t('see_all')); ?></a>
    </div>
    <div class="product-row">
      <?php if ($suggested): while ($p = mysqli_fetch_assoc($suggested)): render_product_card($conn,$p,$lang); endwhile; endif; ?>
    </div>
  </section>

  <section class="section category-showcase banner80-section">
    <?php
      $bnTitle = $bn80 ? localized($bn80,'title',$lang) : t('new_reached');
      $bnSub = $bn80 ? localized($bn80,'subtitle',$lang) : 'Latest products at Tariq Alagha';
      $bnImg = $bn80 ? clean_upload_path($bn80['image'],'assets/images/banners/00.webp') : 'assets/images/banners/00.webp';
    ?>
    <div class="category-banner">
      <img src="<?php echo e(thumb_url($bnImg,1320,260,'cover')); ?>" loading="lazy" decoding="async" alt="<?php echo e($bnTitle); ?>">
      <div class="category-banner-caption">
        <h2><?php echo e($bnTitle); ?></h2>
        <p><?php echo e($bnSub); ?></p>
      </div>
    </div>

    <div class="title-row compact">
      <h2><?php echo e($bnTitle); ?></h2>
      <a class="see-all" href="<?php echo $bn80_cat > 0 ? 'category.php?id='.$bn80_cat.'&lang='.e($lang) : 'new-arrivals.php?lang='.e($lang); ?>">
        <?php echo e(t('see_all')); ?>
      </a>
    </div>

    <div class="product-row">
      <?php if ($bn80_products): while ($p = mysqli_fetch_assoc($bn80_products)): render_product_card($conn,$p,$lang); endwhile; endif; ?>
    </div>
  </section>

  <section class="section" id="new-arrivals">
    <div class="title-row">
      <h2><?php echo e(t('new_reached')); ?></h2>
      <a class="see-all" href="new-arrivals.php?lang=<?php echo e($lang); ?>"><?php echo e(t('see_all')); ?></a>
    </div>
    <div class="product-row new-grid">
      <?php if ($new): while ($p = mysqli_fetch_assoc($new)): render_product_card($conn,$p,$lang); endwhile; endif; ?>
    </div>
  </section>

  <?php
  if ($featured_cats && mysqli_num_rows($featured_cats)):
    while ($fc = mysqli_fetch_assoc($featured_cats)):
      $catId = (int)$fc['id'];
      $ids = array($catId);

      $subs = mysqli_query($conn,"SELECT id FROM categories WHERE parent_id=$catId AND status=1");
      if ($subs) {
        while ($s = mysqli_fetch_assoc($subs)) {
          $ids[] = (int)$s['id'];
        }
      }

      $in = implode(',', array_map('intval', $ids));
      $cp = mysqli_query($conn,"SELECT p.*, b.name brand_name FROM products p LEFT JOIN brands b ON p.brand_id=b.id WHERE p.status=1 AND p.category_id IN ($in) ORDER BY p.id DESC LIMIT 8");

      if (!$cp || mysqli_num_rows($cp) == 0) continue;

      $catTitle = category_name($fc,$lang);
      $banner = clean_upload_path($fc['banner_image'], clean_upload_path($fc['image'], category_product_image($conn,$catId)));
  ?>
    <section class="section category-showcase">
      <div class="category-banner">
        <img src="<?php echo e(thumb_url($banner,1320,240,'cover')); ?>" loading="lazy" decoding="async" alt="<?php echo e($catTitle); ?>">
        <div class="category-banner-caption">
          <h2><?php echo e($catTitle); ?></h2>
          <p><?php echo is_rtl($lang) ? 'منتجات مختارة من هذا القسم' : 'Selected products from this category'; ?></p>
        </div>
      </div>

      <div class="title-row compact">
        <h2><?php echo e($catTitle); ?></h2>
        <a class="see-all" href="category.php?id=<?php echo $catId; ?>&lang=<?php echo e($lang); ?>">
          <?php echo e(t('see_all')); ?>
        </a>
      </div>

      <div class="product-row">
        <?php while ($p = mysqli_fetch_assoc($cp)): render_product_card($conn,$p,$lang); endwhile; ?>
      </div>
    </section>
  <?php endwhile; endif; ?>

  <section class="section">
    <div class="title-row">
      <h2>Tariq Alagha Recommends</h2>
      <a class="see-all" href="best-sellers.php?lang=<?php echo e($lang); ?>"><?php echo e(t('see_all')); ?></a>
    </div>
    <div class="product-row">
      <?php if ($best): while ($p = mysqli_fetch_assoc($best)): render_product_card($conn,$p,$lang); endwhile; endif; ?>
    </div>
  </section>

  <section class="section">
    <h2 class="section-title"><?php echo e(t('exclusive_brands')); ?></h2>
    <div class="brand-strip">
      <?php if ($brands): while ($b = mysqli_fetch_assoc($brands)): ?>
        <a class="brand-card" href="brand.php?id=<?php echo (int)$b['id']; ?>&lang=<?php echo e($lang); ?>">
          <div class="brand-img">
            <img src="<?php echo e(thumb_url(clean_upload_path($b['logo'],'assets/images/brands/no-brand.svg'),180,90,'contain')); ?>" loading="lazy" decoding="async" alt="">
          </div>
          <span><?php echo e($b['name']); ?></span>
        </a>
      <?php endwhile; endif; ?>
    </div>
  </section>

  <section class="section" id="hot-deals">
    <div class="title-row">
      <h2><?php echo e(t('hot_deals')); ?></h2>
      <a class="see-all" href="offers.php?lang=<?php echo e($lang); ?>"><?php echo e(t('see_all')); ?></a>
    </div>
    <div class="product-row">
      <?php if ($hot): while ($p = mysqli_fetch_assoc($hot)): render_product_card($conn,$p,$lang); endwhile; endif; ?>
    </div>
  </section>

</main>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var swiper = document.getElementById('heroSwiper');
  if (!swiper) return;

  var slides = swiper.querySelectorAll('.hero-slide');
  var dots = swiper.querySelectorAll('.hero-dots button');
  var nextBtn = swiper.querySelector('.hero-next');
  var prevBtn = swiper.querySelector('.hero-prev');

  if (!slides || slides.length <= 1) {
    if (slides && slides.length === 1) {
      var wrap = swiper;
      for (var cloneI = 1; cloneI <= 2; cloneI++) {
        var c = slides[0].cloneNode(true);
        c.classList.remove('active');
        c.classList.remove('leaving');
        wrap.insertBefore(c, swiper.querySelector('.hero-arrow') || null);
      }
      var dotsBox = swiper.querySelector('.hero-dots');
      if (dotsBox) {
        dotsBox.innerHTML = '<button class=\"active\" type=\"button\" data-slide=\"0\"></button><button type=\"button\" data-slide=\"1\"></button><button type=\"button\" data-slide=\"2\"></button>';
      }
      slides = swiper.querySelectorAll('.hero-slide');
      dots = swiper.querySelectorAll('.hero-dots button');
    } else {
      return;
    }
  }

  var current = 0;
  var timer = null;
  var delay = 1000;
  var locked = false;

  function showSlide(index) {
    if (locked) return;
    locked = true;

    if (index < 0) index = slides.length - 1;
    if (index >= slides.length) index = 0;

    slides[current].classList.remove('active');
    slides[current].classList.add('leaving');

    if (dots[current]) dots[current].classList.remove('active');

    slides[index].classList.remove('leaving');
    slides[index].classList.add('active');

    if (dots[index]) dots[index].classList.add('active');

    current = index;

    setTimeout(function () {
      for (var i = 0; i < slides.length; i++) {
        if (i !== current) {
          slides[i].classList.remove('leaving');
        }
      }
      locked = false;
    }, 800);
  }

  function nextSlide() {
    showSlide(current + 1);
  }

  function prevSlide() {
    showSlide(current - 1);
  }

  function startAuto() {
    stopAuto();
    timer = setInterval(nextSlide, delay);
  }

  function stopAuto() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  if (nextBtn) {
    nextBtn.addEventListener('click', function () {
      nextSlide();
      startAuto();
    });
  }

  if (prevBtn) {
    prevBtn.addEventListener('click', function () {
      prevSlide();
      startAuto();
    });
  }

  for (var d = 0; d < dots.length; d++) {
    dots[d].addEventListener('click', function () {
      var to = parseInt(this.getAttribute('data-slide'), 10);
      if (!isNaN(to)) {
        showSlide(to);
        startAuto();
      }
    });
  }

  /* يبقى السلايدر متحركاً دائماً كل ثانية */

  var touchStartX = 0;
  var touchEndX = 0;

  swiper.addEventListener('touchstart', function (e) {
    if (!e.touches || !e.touches.length) return;
    touchStartX = e.touches[0].clientX;
  }, {passive:true});

  swiper.addEventListener('touchend', function (e) {
    touchEndX = e.changedTouches[0].clientX;
    var diff = touchStartX - touchEndX;

    if (Math.abs(diff) > 45) {
      if (diff > 0) {
        nextSlide();
      } else {
        prevSlide();
      }
      startAuto();
    }
  }, {passive:true});

  startAuto();
});
</script>

<?php include 'includes/footer.php'; ?>