<section class="hero-full reveal">
  <div class="hero-slider stagger-item">
    <div class="hero-inner">
      <div class="hero-track">
      <article class="hero-slide">
        <div class="hero-slide__copy">
          <span class="kicker small">Strength & Conditioning</span>
          <h1>Train For Life</h1>
          <p>Signature programming across strength, cardio, and recovery — simple booking, serious results.</p>
            <div class="cta-links">
            <a class="cta-btn" href="<?= \Tshen\url('/classes') ?>">Book Now</a>
            <a class="cta-btn cta-btn--outline" href="<?= \Tshen\url('/login') ?>">Sign Up or Track</a>
          </div>
        </div>
        <div class="hero-slide__image">
          <img src="<?= \Tshen\asset('RED.webp') ?>" alt="Training" />
          
        </div>
      </article>
      <article class="hero-slide">
        <div class="hero-slide__copy">
          <span class="kicker small">Strength & Conditioning</span>
          <h1>Train For Life</h1>
          <p>Signature programming across strength, cardio, and recovery — simple booking, serious results.</p>
            <div class="cta-links">
            <a class="cta-btn" href="<?= \Tshen\url('/classes') ?>">Book a Class</a>
            <a class="cta-btn cta-btn--outline" href="<?= \Tshen\url('/about') ?>">Explore Studios</a>
          </div>
        </div>
        <div class="hero-slide__image">
          <img src="<?= \Tshen\asset('BARBEL.webp') ?>" alt="Cardio" />
         
        </div>
      </article>
      <article class="hero-slide">
        <div class="hero-slide__copy">
         <span class="kicker small">Strength & Conditioning</span>
          <h1>Train For Life</h1>
          <p>Signature programming across strength, cardio, and recovery — simple booking, serious results.</p>
            <div class="cta-links">
            <a class="cta-btn" href="<?= \Tshen\url('/classes') ?>">View Classes</a>
            <a class="cta-btn cta-btn--outline" href="<?= \Tshen\url('/dashboard') ?>">Go to Dashboard</a>
          </div>
        </div>
        <div class="hero-slide__image">
          <img src="<?= \Tshen\asset('fits.avif') ?>" alt="Mobility" />
          
        </div>
      </article>
      </div>
      <div class="hero-controls">
      <button class="hero-prev" aria-label="Previous">‹</button>
      <div class="hero-dots" aria-label="Slide navigation"></div>
      <button class="hero-next" aria-label="Next">›</button>
      </div>
    </div>
  </div>
</section>


<section class="container reveal barrys-secondary">
  <div class="barrys-secondary__grid stagger-item">
    <div class="barrys-image">
      <img src="<?= \Tshen\asset('barbel2.jpg') ?>" alt="Premium training environment" />
    </div>
    <div class="barrys-copy">
      <h2>Smart Training, Seamless Experience</h2>
      <p>Dynamic workouts, strategic rest, and total convenience. Your entire training journey—organized, optimized, and results-driven.</p>
      <div class="cta-links">
        <a class="cta-btn" href="<?= \Tshen\url('/classes') ?>">View Schedule</a>
      </div>
    </div>
    
  </div>
</section>

<section class="container2 reveal ts-four">
  <h2 class="stagger-item" style="text-align:center;">Explore Training Focus</h2>
  <div class="ts-four__grid stagger-item">
    <a class="ts-card" href="<?= \Tshen\url('/classes?category=Strength') ?>">
      <img src="<?= \Tshen\asset('BARBEL.webp') ?>" alt="Strength" />
      <div class="ts-overlay">
        <div class="ts-hover">
          <p class="ts-hover__copy">However you like to train, award‑winning classes await. Unlimited access to over 100 classes at each club, every week.</p>
          <span class="ts-hover__btn">CLASSES</span>
        </div>
        <div class="ts-bottom">
          <span class="ts-title">Exclusive classes</span>
          <button class="ts-action" aria-label="Open"></button>
        </div>
      </div>
    </a>
    <a class="ts-card" href="<?= \Tshen\url('/classes?category=Cardio') ?>">
      <img src="<?= \Tshen\asset('RED.webp') ?>" alt="Cardio" />
      <div class="ts-overlay">
        <div class="ts-hover">
          <p class="ts-hover__copy">Train in considered spaces with best‑in‑class equipment and amenities designed for performance and recovery.</p>
          <span class="ts-hover__btn">CLASSES</span>
        </div>
        <div class="ts-bottom">
          <span class="ts-title">World-class facilities</span>
          <button class="ts-action" aria-label="Open"></button>
        </div>
      </div>
    </a>
    <a class="ts-card" href="<?= \Tshen\url('/classes?category=Boxing') ?>">
      <img src="<?= \Tshen\asset('coach.jpg') ?>" alt="Boxing" />
      <div class="ts-overlay">
        <div class="ts-hover">
          <p class="ts-hover__copy">One‑to‑one coaching tailored to your goals, with measurable progress and support across training and recovery.</p>
          <span class="ts-hover__btn">CLASSES</span>
        </div>
        <div class="ts-bottom">
          <span class="ts-title">Elite personal training</span>
          <button class="ts-action" aria-label="Open"></button>
        </div>
      </div>
    </a>
    <a class="ts-card" href="<?= \Tshen\url('/classes?category=Yoga') ?>">
      <img src="<?= \Tshen\asset('fits.avif') ?>" alt="Yoga" />
      <div class="ts-overlay">
        <div class="ts-hover">
          <p class="ts-hover__copy">Fuel performance and recovery with practical nutrition guidance and plans that fit your routine.</p>
          <span class="ts-hover__btn">CLASSES</span>
        </div>
        <div class="ts-bottom">
          <span class="ts-title">Expert nutrition</span>
          <button class="ts-action" aria-label="Open"></button>
        </div>
      </div>
    </a>
  </div>
</section>


<section class="inspiring-classes-section full-width">
  <div class="section-inner">
    <div class="section-header">
      <div class="header-content" style="color: var(--bg);">
        <h2>Dynamic Training Sessions</h2>
        <p style="color: #fff;">Intelligent, inspiring, and led by top-notch instructors a diverse lineup of classes designed to make fitness exciting, engaging, and truly enjoyable.</p>
      </div>
      <div class="header-cta">
        <a class="cta-btn" href="<?= \Tshen\url('/classes') ?>">View Classes</a>
      </div>
    </div>

    <div class="class-slider-container">
      <button class="slider-nav prev-btn" aria-label="Previous slide">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      
      <div class="class-cards-container">
        <div class="class-card-horizontal" data-class-id="1">
          <img src="<?= \Tshen\asset('fit.jpeg') ?>" alt="Sound Bath" />
          <div class="class-card-overlay">
            <div class="class-info">
              <h3>Sound Bath</h3>
              <p class="class-description">Lose yourself in deep relaxation and meditation. A unique soundscape of gongs, crystal bowls and percussion instruments will leave you feeling calm and rejuvenated.</p>
            </div>
            <a class="class-card-btn" href="<?= \Tshen\url('/classes?category=Strength') ?>">➺</a>
          </div>
        </div>
        
        <div class="class-card-horizontal" data-class-id="2">
          <img src="<?= \Tshen\asset('images.jpeg') ?>" alt="Just Ride – Cycling Classes" />
          <div class="class-card-overlay">
            <div class="class-info">
              <h3>Just Ride – Cycling Classes</h3>
              <p class="class-description">High-energy cycling workouts set to motivating music. Push your limits with interval training and rhythm rides led by expert instructors.</p>
            </div>
            <a class="class-card-btn" href="<?= \Tshen\url('/classes?category=Cardio') ?>">➺</a>
          </div>
        </div>
        
        <div class="class-card-horizontal" data-class-id="3">
          <img src="<?= \Tshen\asset('fits.avif') ?>" alt="Lift – Weightlifting Classes" />
          <div class="class-card-overlay">
            <div class="class-info">
              <h3>Lift – Weightlifting Classes</h3>
              <p class="class-description">Master proper form and technique with our expert coaches. Build strength, power and confidence through progressive weightlifting programs.</p>
            </div>
            <a class="class-card-btn" href="<?= \Tshen\url('/classes?category=Boxing') ?>">➺</a>
          </div>
        </div>
        
        <div class="class-card-horizontal" data-class-id="4">
          <img src="<?= \Tshen\asset('yoga.jfif') ?>" alt="Afterburner Training" />
          <div class="class-card-overlay">
            <div class="class-info">
              <h3>Afterburner Training</h3>
              <p class="class-description">High-intensity metabolic conditioning that continues to burn calories long after your workout. Combines strength, cardio and core exercises.</p>
            </div>
            <a class="class-card-btn" href="<?= \Tshen\url('/classes?category=Yoga') ?>">➺</a>
          </div>
        </div>
      </div>
      
      <button class="slider-nav next-btn" aria-label="Next slide">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
  </div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const container = document.querySelector('.class-cards-container');
  const cards = document.querySelectorAll('.class-card-horizontal');
  const nextBtn = document.querySelector('.next-btn');
  const prevBtn = document.querySelector('.prev-btn');
  let scrollAmount = 0;
  const cardWidth = cards[0].offsetWidth + 24; // card width + gap

  // Build category map from data attributes
  const categoryLinks = {
    1: '/classes?category=Yoga',
    2: '/classes?category=Cardio',
    3: '/classes?category=Strength',
    4: '/classes?category=Yoga'
  };

  // Attach click handlers to each card
  cards.forEach((card, index) => {
    card.addEventListener('click', function (e) {
      // Only navigate if the click is NOT on the button itself
      if (!e.target.closest('.class-card-btn')) {
        const classId = card.dataset.classId;
        if (categoryLinks[classId]) {
          window.location.href = categoryLinks[classId];
        }
      }
    });

    // Staggered entrance animation
    setTimeout(() => card.classList.add('animate-in'), 100 * index);
  });

  // Navigation buttons
  nextBtn.addEventListener('click', () => {
    scrollAmount = Math.min(scrollAmount + cardWidth, container.scrollWidth - container.clientWidth);
    smoothScroll(container, scrollAmount);
  });

  prevBtn.addEventListener('click', () => {
    scrollAmount = Math.max(scrollAmount - cardWidth, 0);
    smoothScroll(container, scrollAmount);
  });

  // Horizontal wheel scroll
  container.addEventListener('wheel', e => {
    e.preventDefault();
    const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
    scrollAmount += -delta * 60;
    scrollAmount = Math.max(0, Math.min(scrollAmount, container.scrollWidth - container.clientWidth));
    smoothScroll(container, scrollAmount);
  }, { passive: false });

  // Smooth-scroll helper
  function smoothScroll(el, target) {
    const start = el.scrollLeft;
    const change = target - start;
    const dur = 500;
    let startTime = null;

    function animate(ts) {
      if (!startTime) startTime = ts;
      const progress = Math.min((ts - startTime) / dur, 1);
      const val = easeInOutQuad(progress);
      el.scrollLeft = start + change * val;
      if (progress < 1) requestAnimationFrame(animate);
    }

    function easeInOutQuad(t) {
      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }

    requestAnimationFrame(animate);
  }
});
</script>






<style>
.inspiring-classes {
    padding: 60px 0;
    background: #000;
    color: #fff;
        width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.section-header {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.section-header h2 {
    font-size: 42px;
    margin-bottom: 20px;
    color: #fff;
}

.view-classes-btn {
    display: inline-block;
    background: #c41230;
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 20px;
}

.class-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider-container {
    margin: 0 40px;
    overflow: hidden;
   
}

.slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
}

.slide {
    min-width: calc(33.333% - 14px);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slide-content h3 {
    margin: 0;
    font-size: 24px;
}

.arrow-link {
    font-size: 24px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.slide:hover .arrow-link {
    opacity: 1;
    transform: translateX(0);
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 32px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
}

.nav-arrow:hover {
    background: rgba(255,255,255,0.2);
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

@media (max-width: 1024px) {
    .slide {
        min-width: calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .slide {
        min-width: 100%;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const track = document.querySelector('.slider-track');
    const slides = document.querySelectorAll('.slide');
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    
    let currentIndex = 0;
    const slidesToShow = window.innerWidth > 1024 ? 3 : window.innerWidth > 768 ? 2 : 1;
    
    function updateSlider() {
        const slideWidth = track.clientWidth / slidesToShow;
        track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
    }
    
    prev.addEventListener('click', () => {
        currentIndex = Math.max(currentIndex - 1, 0);
        updateSlider();
    });
    
    next.addEventListener('click', () => {
        currentIndex = Math.min(currentIndex + 1, slides.length - slidesToShow);
        updateSlider();
    });
    
    window.addEventListener('resize', updateSlider);
    updateSlider();
});
</script>


<section class="container reveal contact-section black-overlay" style="padding-top:40px; padding-bottom:40px; ">
  <h2 class="stagger-item" style="text-align:center; color: white; padding-top: 60px;"> Have Questions or Need Assistance?</h2>
  <p2 class="stagger-item" style="text-align:center; max-width:720px; margin:8px auto 24px;"> Reach out to our team and we'll get back to you as soon as possible.</p2>
  <br></br>

      <a class="cta-btn" href="<?= \Tshen\url('/contact') ?>">Find Out More</a>
    </form>
  </div>
</section>
