/* Container around the slideshow */
.slider-container {
   max-width: 700px;
   position: relative;
   overflow: hidden;
   border-radius: var(--border-large);
   height: 600px;
}

/* Each slide is stacked on top of each other */
.slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* Initially hidden */
   opacity: 0;
   transition: opacity 1s ease;
   /* Fade-in over 1 second */
}

/* The active slide is displayed */
.slide.active {
   opacity: 1;
   z-index: 1;
   /* Brings the active slide to the front */
}

/* Image within the slide fills the entire space */
.slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Adjusts the image to fit the container, cropping if necessary */
   display: block;
}

/* Text overlay at the bottom of the image */
.slide-text {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   color: var(--light);
   padding: var(--spacing-base);
   text-align: center;
   text-shadow: var(--shadow-dark);
   font-size: var(--font-size-base);
   background-color: var(--transparent-dark)
}

.slide-text h3 {
   font-family: var(--accent-font);
   font-weight: var(--bold);
   font-variant: small-caps;
   letter-spacing: 1px;
   font-size: var(--font-size-large)
}

@media (width<768px) {
   .slide-text h3 {
      font-size: var(--font-size-title);
   }
}

/* Previous and next buttons */
.prev,
.next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: var(--transparent-dark);
   color: #fff;
   border: none;
   font-size: 2rem;
   padding: 10px;
   z-index: 10;
   transition: var(--transition);
   /* Above the slides */
}

.prev {
   left: 0;
}

.next {
   right: 0;
}

.prev:hover,
.next:hover {
   background-color: var(--transparent-dark);
}

(function () {
    // Slideshow
    // Collect all slides
    const slides = document.querySelectorAll('.slide');
    let currentIndex = 0;
    const totalSlides = slides.length;

    // Buttons
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    // Automatic switch (in ms)
    const intervalTime = 5000; // 5 seconds
    let slideInterval;

    // Shows the slide at the given index
    function showSlide(index) {
        // Remove active from all
        slides.forEach(slide => slide.classList.remove('active'));
        // Add active to the desired slide
        slides[index].classList.add('active');
    }

    // Next
    function nextSlide() {
        currentIndex++;
        if (currentIndex >= totalSlides) {
            currentIndex = 0;
        }
        showSlide(currentIndex);
    }

    // Previous
    function prevSlide() {
        currentIndex--;
        if (currentIndex < 0) {
            currentIndex = totalSlides - 1;
        }
        showSlide(currentIndex);
    }

    // Manual navigation
    nextBtn.addEventListener('click', () => {
        nextSlide();
        resetInterval(); // Restart interval
    });

    prevBtn.addEventListener('click', () => {
        prevSlide();
        resetInterval(); // Restart interval
    });

    // Automatic start
    function startInterval() {
        slideInterval = setInterval(nextSlide, intervalTime);
    }

    // Restart interval on click
    function resetInterval() {
        clearInterval(slideInterval);
        startInterval();
    }

    // Show initially + start interval
    showSlide(currentIndex);
    startInterval();
})();