script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Feather Icons
    feather.replace();
    
    // Gallery data
    const galleryData = [
        { id: 1, category: 'wedding', src: 'http://static.photos/wedding/640x360/1', caption: 'Romantic wedding moment' },
        { id: 2, category: 'portrait', src: 'http://static.photos/portrait/640x360/2', caption: 'Professional headshot' },
        { id: 3, category: 'landscape', src: 'http://static.photos/landscape/640x360/3', caption: 'Mountain sunset' },
        { id: 4, category: 'product', src: 'http://static.photos/product/640x360/4', caption: 'Luxury watch' },
        { id: 5, category: 'wedding', src: 'http://static.photos/wedding/640x360/5', caption: 'First dance' },
        { id: 6, category: 'portrait', src: 'http://static.photos/portrait/640x360/6', caption: 'Family portrait' },
        { id: 7, category: 'landscape', src: 'http://static.photos/landscape/640x360/7', caption: 'Ocean view' },
        { id: 8, category: 'product', src: 'http://static.photos/product/640x360/8', caption: 'Cosmetics line' },
        { id: 9, category: 'wedding', src: 'http://static.photos/wedding/640x360/9', caption: 'Bride preparation' },
        { id: 10, category: 'portrait', src: 'http://static.photos/portrait/640x360/10', caption: 'Corporate portrait' },
        { id: 11, category: 'landscape', src: 'http://static.photos/landscape/640x360/11', caption: 'Forest path' },
        { id: 12, category: 'product', src: 'http://static.photos/product/640x360/12', caption: 'Fashion accessories' }
    ];

    // Lightbox elements
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    const lightboxCaption = document.getElementById('lightbox-caption');
    const closeLightbox = document.getElementById('close-lightbox');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');

    // Current image index for lightbox navigation
    let currentImageIndex = 0;
    let filteredImages = [];

    // Initialize gallery
    function initGallery() {
        const galleryContainer = document.querySelector('.masonry-grid');
        galleryContainer.innerHTML = '';

        // Create gallery items
        filteredImages.forEach((item, index) => {
            const galleryItem = document.createElement('div');
            galleryItem.className = 'gallery-item cursor-pointer';
            galleryItem.dataset.category = item.category;
            galleryItem.dataset.index = index;

            galleryItem.innerHTML = `
                <div class="category-label">${item.category}</div>
                <img src="${item.src}" alt="${item.caption}" loading="lazy">
            `;

            galleryItem.addEventListener('click', () => openLightbox(index));
            galleryContainer.appendChild(galleryItem);
        });
    }

    // Filter gallery by category
    function filterGallery(category) {
        if (category === 'all') {
            filteredImages = [...galleryData];
        } else {
            filteredImages = galleryData.filter(item => item.category === category);
        }
        initGallery();
    }

    // Open lightbox
    function openLightbox(index) {
        currentImageIndex = index;
        lightboxImg.src = filteredImages[index].src;
        lightboxCaption.textContent = filteredImages[index].caption;
        lightbox.classList.add('show');
        lightbox.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    // Close lightbox
    function closeLightboxHandler() {
        lightbox.classList.remove('show');
        lightbox.classList.add('hidden');
        document.body.style.overflow = '';
    }

    // Navigate to previous image
    function prevImage() {
        currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length;
        lightboxImg.src = filteredImages[currentImageIndex].src;
        lightboxCaption.textContent = filteredImages[currentImageIndex].caption;
    }

    // Navigate to next image
    function nextImage() {
        currentImageIndex = (currentImageIndex + 1) % filteredImages.length;
        lightboxImg.src = filteredImages[currentImageIndex].src;
        lightboxCaption.textContent = filteredImages[currentImageIndex].caption;
    }

    // Initialize filter buttons
    function initFilterButtons() {
        const filterButtons = document.querySelectorAll('.filter-btn');
        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                this.classList.add('active');
                // Filter gallery
                filterGallery(this.dataset.filter);
            });
        });
    }

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

    // Initialize everything
    filteredImages = [...galleryData];
    initGallery();
    initFilterButtons();

    // Lightbox event listeners
    closeLightbox.addEventListener('click', closeLightboxHandler);
    prevBtn.addEventListener('click', prevImage);
    nextBtn.addEventListener('click', nextImage);
    lightbox.addEventListener('click', function(e) {
        if (e.target === lightbox) {
            closeLightboxHandler();
        }
    });

    // Keyboard navigation for lightbox
    document.addEventListener('keydown', function(e) {
        if (!lightbox.classList.contains('hidden')) {
            if (e.key === 'Escape') {
                closeLightboxHandler();
            } else if (e.key === 'ArrowLeft') {
                prevImage();
            } else if (e.key === 'ArrowRight') {
                nextImage();
            }
        }
    });
});