import './etl.scss';

console.log('ETL Mobile Loaded');

document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('lightbox-modal');
    if (!modal) return;

    const img = document.getElementById('lightbox-img');
    const video = document.getElementById('lightbox-video');
    const closeBtn = document.getElementById('lightbox-close');
    const triggers = document.querySelectorAll('.lightbox-trigger');

    function openModal(src, type) {
        if (type === 'photo') {
            img.src = src;
            img.classList.remove('hidden');
            video.classList.add('hidden');
            video.pause();
        } else {
            video.src = src;
            video.classList.remove('hidden');
            img.classList.add('hidden');
            video.play(); // Auto-play video
        }
        
        modal.classList.remove('hidden');
        // Small timeout to allow transition
        setTimeout(() => {
            modal.classList.remove('opacity-0', 'pointer-events-none');
        }, 10);
    }

    function closeModal() {
        modal.classList.add('opacity-0', 'pointer-events-none');
        setTimeout(() => {
            modal.classList.add('hidden');
            video.pause();
            video.src = ""; // Stop buffering
            img.src = "";
        }, 300);
    }

    triggers.forEach(trigger => {
        trigger.addEventListener('click', (e) => {
            e.preventDefault(); // Prevent default link behavior if any
            const src = trigger.dataset.src;
            const type = trigger.dataset.type;
            if (src && type) {
                openModal(src, type);
            }
        });
    });

    closeBtn.addEventListener('click', closeModal);
    
    // Close on background click
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            closeModal();
        }
    });
});