</main>
<?php if (!empty($_SESSION['user'])): ?>
</div><!-- Close main-with-sidebar -->
<?php endif; ?>

<?php
$footer_class = !empty($_SESSION['user']) ? 'site-footer footer-logged has-sidebar' : 'site-footer footer-main';
?>
<footer class="<?= $footer_class ?>">
  <div class="container">
    <div class="footer-grid">
      <!-- Brand / Contact -->
      <div class="footer-brand">
        <div class="footer-logo">
          <img src="<?= \Tshen\asset('tshenlogo.png') ?>" alt="TSHEN logo" />
        </div>
        <p class="footer-tagline">Start strong with classes tailored to your level — strength, mobility, and consistency.</p>
        <div class="footer-contact">
          <div class="line"><span>Call us:</span> <a href="tel:+15550123456">+1 555‑012‑3456</a></div>
          <div class="line"><span>Email:</span> <a href="mailto:hello@tshen.fit">hello@tshen.fit</a></div>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="footer-title">Quick Links</h3>
        <ul class="footer-list">
          <li><a href="<?= \Tshen\url('/about') ?>">About TSHEN</a></li>
          <li><a href="<?= \Tshen\url('/classes') ?>">Find Classes</a></li>
          <li><a href="<?= \Tshen\url('/store') ?>">Pricing</a></li>
          <li><a href="<?= \Tshen\url('/studio') ?>">Studios</a></li>
          <li><a href="<?= \Tshen\url('/contact') ?>">Contact</a></li>
        </ul>
      </div>

      <!-- Our Service -->
      <div>
        <h3 class="footer-title">Our Service</h3>
        <ul class="footer-list">
          <li>Barre</li>
          <li>Dance</li>
          <li>Boxing</li>
          <li>Pilates</li>
          <li>Yoga</li>
          <li>HIIT</li>
        </ul>
      </div>

      <!-- Gallery -->
      <div>
        <h3 class="footer-title">Gallery</h3>
        <div class="footer-gallery">
          <img src="<?= \Tshen\asset('fitness.jpg') ?>" alt="Training" />
          <img src="<?= \Tshen\asset('fit.jpeg') ?>" alt="Weights" />
          <img src="<?= \Tshen\asset('images.jpeg') ?>" alt="Cardio" />
          <img src="<?= \Tshen\asset('fits.avif') ?>" alt="Studio" />
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <p>&copy; <?= date('Y') ?> TSHEN — Build your fitness routine with confidence.</p>
    </div>
  </div>
</footer>

<script>
function toggleSidebar() {
  var sidebar = document.querySelector('.sidebar');
  var main = document.querySelector('.main-content');
  if (sidebar && main) {
    sidebar.classList.toggle('open');
    main.classList.toggle('sidebar-open');
  }
}
// Reveal on scroll (runs for all users)
(function(){
  var els = document.querySelectorAll('.reveal');
  if (!('IntersectionObserver' in window)) {
    els.forEach(function(el){
      el.classList.add('in-view');
      var items = el.querySelectorAll('.stagger-item');
      items.forEach(function(it){ it.classList.add('in-view'); });
    });
    return;
  }
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      if (entry.isIntersecting) {
        var el = entry.target;
        el.classList.add('in-view');
        var items = el.querySelectorAll('.stagger-item');
        items.forEach(function(it, idx){
          it.style.setProperty('--i', idx);
          setTimeout(function(){ it.classList.add('in-view'); }, idx * 90);
        });
        io.unobserve(el);
      }
    });
  }, { threshold: 0.1 });
  els.forEach(function(el){ io.observe(el); });
})();


// Carousel controls for Inspiring Classes
(function(){
  var carousel = document.querySelector('.classes-carousel');
  var prev = document.querySelector('.carousel-prev');
  var next = document.querySelector('.carousel-next');
  if (!carousel || !prev || !next) return;
  function step(){
    var item = carousel.querySelector('.carousel-item');
    var gap = 16; // matches CSS gap
    var w = item ? item.getBoundingClientRect().width : 280;
    return Math.round(w + gap);
  }
  prev.addEventListener('click', function(){
    carousel.scrollBy({ left: -step(), behavior: 'smooth' });
  });
  next.addEventListener('click', function(){
    carousel.scrollBy({ left: step(), behavior: 'smooth' });
  });
})();

// Swipeable Hero Slider
(function(){
  var slider = document.querySelector('.hero-slider');
  if (!slider) return;
  var track = slider.querySelector('.hero-track');
  var inner = slider.querySelector('.hero-inner') || slider;
  var slides = Array.from(track.querySelectorAll('.hero-slide'));
  var prev = slider.querySelector('.hero-prev');
  var next = slider.querySelector('.hero-next');
  var dotsWrap = slider.querySelector('.hero-dots');
  var dots = [];
  var index = 0;
  var timer = null;
  var AUTOPLAY_MS = 6000;
  function width(){ return inner.clientWidth; }

  function renderDots(){
    if (!dotsWrap) return;
    dotsWrap.innerHTML = '';
    slides.forEach(function(_, i){
      var b = document.createElement('button');
      b.className = 'hero-dot';
      b.setAttribute('aria-label', 'Go to slide ' + (i+1));
      b.addEventListener('click', function(){ goTo(i); });
      dotsWrap.appendChild(b);
    });
    dots = Array.from(dotsWrap.querySelectorAll('.hero-dot'));
  }
  function update(){
    track.style.transform = 'translateX(' + (-index * width()) + 'px)';
    dots.forEach(function(d, i){ d.classList.toggle('active', i === index); });
  }
  function goTo(i){
    index = (i + slides.length) % slides.length;
    update();
    restartAutoplay();
  }
  function restartAutoplay(){
    if (timer) clearInterval(timer);
    timer = setInterval(function(){ goTo(index + 1); }, AUTOPLAY_MS);
  }

  if (prev) prev.addEventListener('click', function(){ goTo(index - 1); });
  if (next) next.addEventListener('click', function(){ goTo(index + 1); });

  // Swipe support
  var startX = 0, currentX = 0, dragging = false;
  function onStart(x){ dragging = true; startX = x; currentX = x; if (timer) clearInterval(timer); }
  function onMove(x){ if (!dragging) return; currentX = x; var dx = currentX - startX; track.style.transform = 'translateX(' + (-index * width()) + 'px) translateX(' + dx + 'px)'; }
  function onEnd(){ if (!dragging) return; var dx = currentX - startX; dragging = false; if (Math.abs(dx) > 60) { goTo(index + (dx < 0 ? 1 : -1)); } else { update(); restartAutoplay(); } }
  track.addEventListener('touchstart', function(e){ onStart(e.touches[0].clientX); });
  track.addEventListener('touchmove', function(e){ onMove(e.touches[0].clientX); });
  track.addEventListener('touchend', onEnd);
  track.addEventListener('mousedown', function(e){ onStart(e.clientX); });
  window.addEventListener('mousemove', function(e){ onMove(e.clientX); });
  window.addEventListener('mouseup', onEnd);

  renderDots();
  update();
  restartAutoplay();
  window.addEventListener('resize', update);
})();
</script>
</body>
</html>