/* Container styles */
.slideshow-container {
width: 100%;
max-width: 1438px;
margin: 0 auto;
position: relative;
padding: 10px;
box-sizing: border-box;
}

/* Slides */
.slide {
display: none;
width: 100%;
}

.slide img {
width: 1438px;
height: 720px;
object-fit: cover;
display: block;
border-radius: 15px;
box-shadow: 0 0 20px rgba(32, 30, 155, 0.7);
}

/* Caption */
.caption {
text-align: center;
padding: 8px 0;
font-size: clamp(14px, 2vw, 18px);
}

/* Thumbnail flex container */
.thumbnail-flex {
width: 100%;
max-width: 728px;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
box-sizing: border-box;
justify-content: center;
}

.thumbnail {
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s, transform 0.2s;
flex: 0 0 120px;
}

.thumbnail:hover {
opacity: 1;
transform: scale(1.05);
}

.thumbnail.active {
opacity: 1;
border: 2px solid #007bff;
}

.thumbnail img {
width: 120px;
height: 64px;
object-fit: cover;
display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.slide img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
}

.thumbnail {
flex: 0 0 100px;
}

.thumbnail img {
width: 100px;
height: 53px;
}
}

@media (max-width: 480px) {
.thumbnail {
flex: 0 0 80px;
}

.thumbnail img {
width: 80px;
height: 43px;
}
}

const images = [
{
src: "https://cwc.gov.in/sites/default/files/2_0.jpg",
caption: "Dr.J.Harsha, SE(HO&CC),MSO,CWC",
},
{
src: "https://cwc.gov.in/sites/default/files/main-2.jpeg",
caption: "Sh. Ankit Dudeja, Ex. Engg. Cauvery Division",
url: "https://cwc.gov.in/divisions/cauvery-division"
},
{
src: "https://cwc.gov.in/sites/default/files/main-3.jpeg",
caption: "Monthly Review Meeting under the chairmanship of CE,MSO,CWC",
url: "https://cwc.gov.in/meetings"
},
{
src: "https://cwc.gov.in/sites/default/files/main-4.jpeg",
caption: "Monitoring visit to CADWM Components of Tillari Irrigation Project, Goa",
url: "https://cwc.gov.in/projects/tillari-irrigation"
},
{
src: "https://cwc.gov.in/sites/default/files/2_0.jpg",
caption: "Dr.J.Harsha, SE(HO&CC),MSO,CWC",
},
{
src: "https://cwc.gov.in/sites/default/files/main-2.jpeg",
caption: "Sh. Ankit Dudeja, Ex. Engg. Cauvery Division",
url: "https://cwc.gov.in/divisions/cauvery-division"
},
{
src: "https://cwc.gov.in/sites/default/files/main-3.jpeg",
caption: "Monthly Review Meeting under the chairmanship of CE,MSO,CWC",
url: "https://cwc.gov.in/meetings"
},
{
src: "https://cwc.gov.in/sites/default/files/main-4.jpeg",
caption: "Monitoring visit to CADWM Components of Tillari Irrigation Project, Goa",
url: "https://cwc.gov.in/projects/tillari-irrigation"
},
{
src: "https://cwc.gov.in/sites/default/files/2_0.jpg",
caption: "Dr.J.Harsha, SE(HO&CC),MSO,CWC",
url: "https://cwc.gov.in/about-us/our-team"
},
{
src: "https://cwc.gov.in/sites/default/files/main-2.jpeg",
caption: "Sh. Ankit Dudeja, Ex. Engg. Cauvery Division",
url: "https://cwc.gov.in/divisions/cauvery-division"
},
{
src: "https://cwc.gov.in/sites/default/files/main-3.jpeg",
caption: "Monthly Review Meeting under the chairmanship of CE,MSO,CWC",
url: "https://cwc.gov.in/meetings"
},
{
src: "https://cwc.gov.in/sites/default/files/main-4.jpeg",
caption: "Monitoring visit to CADWM Components of Tillari Irrigation Project, Goa",
url: "https://cwc.gov.in/projects/tillari-irrigation"
}
];

const slideshowContainer = document.querySelector('.slideshow-container');
const thumbnailFlex = document.querySelector('.thumbnail-flex');

images.forEach((image, index) => {
const slide = document.createElement('div');
slide.classList.add('slide');
slide.innerHTML = `

${image.caption}
`;
slideshowContainer.appendChild(slide);

const thumbnail = document.createElement('div');
thumbnail.classList.add('thumbnail');
thumbnail.innerHTML = `

`;
thumbnail.dataset.index = index;
thumbnailFlex.appendChild(thumbnail);
});

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const thumbnails = document.querySelectorAll('.thumbnail');
let autoPlayInterval;

function showSlide(index) {
slides.forEach(slide => slide.style.display = 'none');
thumbnails.forEach(thumb => thumb.classList.remove('active'));
slides[index].style.display = 'block';
thumbnails[index].classList.add('active');
currentSlide = index;
}

thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', function() {
clearInterval(autoPlayInterval);
const index = parseInt(this.dataset.index);
showSlide(index);
autoPlayInterval = setInterval(autoSlide, 5000);
});
});

function autoSlide() {
currentSlide = (currentSlide + 1) % images.length;
showSlide(currentSlide);
}

showSlide(0);
autoPlayInterval = setInterval(autoSlide, 5000);

slideshowContainer.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));
slideshowContainer.addEventListener('mouseleave', () => {
autoPlayInterval = setInterval(autoSlide, 5000);
});