<section class="hero-slider-parallax">
    <!-- Slide 1 -->
     <?php foreach ($sliders as $index => $slide): ?>
    <div class="hero-slide <?= $index === 0 ? 'active' : '' ?>" style="background-image: url('<?=  $slide['photo'] ?>')">
        <div class="parallax-layer" data-depth="0.10"></div>
        <div class="hero-content container">
            <div class="row align-items-center">
                <div class="col-lg-7" style="padding-right:20px !important;">
                    <div class="hero-badge flag-badge" data-aos="fade-up">
                        🌍 <?=  $slide['extra_1'] ?>
                    </div>
                    <h1 class="hero-title" data-aos="fade-up"><?=  $slide['title'] ?></h1>
                    <div class="accent-line"></div>
                    <p class="hero-subtitle"><?=  $slide['description'] ?></p>
                    <div class="hero-cta">
                        <div class="btn-group">
                        <a href="<?=  $slide['link'] ?>" class="btn btn-outline-light btn-lg rounded me-2"><?=  $slide['link_text'] ?></a>
                        <a href="<?=  $slide['link_2'] ?>" class="btn btn-outline-warning rounded btn-lg"><?=  $slide['link_2_text'] ?></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 ">
                    <div class="floating-element parallax-element" data-aos="fade-up" data-depth="0.15">
                        <img src="<?=  $slide['photo'] ?>" alt="<?=  $slide['title'] ?>" class="img-fluid rounded-lg shadow-lg" style="border: 5px solid white;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php endforeach; ?>

    
    <!-- Slider controls -->
    <div class="slider-controls">
        <div class="slider-dots">
            <div class="slider-dot active" data-index="0"></div>
            <div class="slider-dot" data-index="1"></div>
            <div class="slider-dot" data-index="2"></div>
        </div>
    </div>
    
    <div class="scroll-down">
        <span>Scroll Down</span>
        <i class="fas fa-chevron-down"></i>
    </div>
</section>
<script>
    // Smooth scrolling
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth'
          });
        }
      });
    });
    
    
    // Initialize hero slider
    let currentSlide = 0;
    const slides = document.querySelectorAll('.hero-slide');
    const dots = document.querySelectorAll('.slider-dot');
    const totalSlides = slides.length;
    
    function showSlide(index) {
      // Hide all slides
      slides.forEach(slide => slide.classList.remove('active'));
      dots.forEach(dot => dot.classList.remove('active'));
      
      // Show selected slide
      slides[index].classList.add('active');
      dots[index].classList.add('active');
      currentSlide = index;
    }
    
    // Dot click events
    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        showSlide(parseInt(dot.getAttribute('data-index')));
      });
    });
    
    // Auto slide change
    setInterval(() => {
      currentSlide = (currentSlide + 1) % totalSlides;
      showSlide(currentSlide);
    }, 5000);
    
</script>