// script.js

document.addEventListener('DOMContentLoaded', () => {
    
    // Smooth scroll for any future navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // Gallery image lightbox / modal
    const images = document.querySelectorAll('.gallery-container img');
    let currentIndex = 0;

    // Create lightbox elements
    const lightbox = document.createElement('div');
    lightbox.className = 'lightbox';
    lightbox.innerHTML = `
        <div class="lightbox-content">
            <span class="close-btn">&times;</span>
            <img class="lightbox-image" src="" alt="">
            <div class="lightbox-caption"></div>
            <button class="prev-btn">❮</button>
            <button class="next-btn">❯</button>
        </div>
    `;
    document.body.appendChild(lightbox);

    const lightboxImage = lightbox.querySelector('.lightbox-image');
    const lightboxCaption = lightbox.querySelector('.lightbox-caption');
    const closeBtn = lightbox.querySelector('.close-btn');
    const prevBtn = lightbox.querySelector('.prev-btn');
    const nextBtn = lightbox.querySelector('.next-btn');

    // Open lightbox when clicking any gallery image
    images.forEach((img, index) => {
        img.style.cursor = 'pointer';
        
        img.addEventListener('click', () => {
            currentIndex = index;
            showLightbox(img);
        });
    });

    function showLightbox(img) {
        lightboxImage.src = img.src;
        lightboxCaption.textContent = img.alt || 'Image ' + (currentIndex + 1);
        lightbox.style.display = 'flex';
        document.body.style.overflow = 'hidden'; // Prevent scrolling background
    }

    // Close lightbox
    function closeLightbox() {
        lightbox.style.display = 'none';
        document.body.style.overflow = 'visible';
    }

    closeBtn.addEventListener('click', closeLightbox);
    
    // Close when clicking outside the image
    lightbox.addEventListener('click', (e) => {
        if (e.target === lightbox) closeLightbox();
    });

    // Keyboard support (ESC, arrow keys)
    document.addEventListener('keydown', (e) => {
        if (lightbox.style.display === 'flex') {
            if (e.key === 'Escape') closeLightbox();
            if (e.key === 'ArrowRight') nextImage();
            if (e.key === 'ArrowLeft') prevImage();
        }
    });

    // Navigation buttons
    function nextImage() {
        currentIndex = (currentIndex + 1) % images.length;
        showLightbox(images[currentIndex]);
    }

    function prevImage() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        showLightbox(images[currentIndex]);
    }

    nextBtn.addEventListener('click', nextImage);
    prevBtn.addEventListener('click', prevImage);

    // Optional: Add a "Back to top" button
    const backToTop = document.createElement('button');
    backToTop.className = 'back-to-top';
    backToTop.innerHTML = '↑';
    backToTop.title = 'Back to top';
    document.body.appendChild(backToTop);

    window.addEventListener('scroll', () => {
        if (window.scrollY > 500) {
            backToTop.style.opacity = '1';
        } else {
            backToTop.style.opacity = '0';
        }
    });

    backToTop.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

});