// Mobile menu functionality
function toggleMobileMenu() {
    const mobileNav = document.getElementById('mobile-nav');
    mobileNav.classList.toggle('active');
    document.body.style.overflow = mobileNav.classList.contains('active') ? 'hidden' : '';
}

document.getElementById('mobile-menu-button').addEventListener('click', toggleMobileMenu);
document.getElementById('close-mobile-menu').addEventListener('click', toggleMobileMenu);

// Mobile dropdown functionality
function toggleMobileDropdown() {
    const dropdown = document.getElementById('mobile-dropdown');
    dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}

// Desktop dropdown functionality
function toggleDropdown() {
    const dropdown = document.getElementById('dropdown');
    dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}

// Close dropdowns when clicking outside
window.onclick = function(event) {
    if (!event.target.matches('button')) {
        const dropdowns = document.getElementsByClassName('dropdown-menu');
        for (let i = 0; i < dropdowns.length; i++) {
            const openDropdown = dropdowns[i];
            if (openDropdown.style.display === 'block') {
                openDropdown.style.display = 'none';
            }
        }
    }
}

// Lazy loading for images
document.addEventListener('DOMContentLoaded', function() {
    const lazyImages = document.querySelectorAll('img[loading="lazy"]');
    
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.src; // Trigger load
                    observer.unobserve(img);
                }
            });
        });

        lazyImages.forEach(img => imageObserver.observe(img));
    }
});

// Livestream functionality
async function updateLivestream() {
    const apiKey = "AIzaSyBYc-ESXTp_YhrQlyuIl8u84C3BjCJ6bFk"; 
    const channelId = "UCmd7RVmPoU27Y3NxHHj2rig";
    const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&type=video&eventType=live&key=${apiKey}`;

    try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        const livestreamContainer = document.getElementById("livestream-container");

        if (data.items && data.items.length > 0) {
            const liveVideoId = data.items[0].id.videoId;

            livestreamContainer.innerHTML = `
            <div class="live-camera-container">
                <div class="passport-header text-2xl">LIVESTREAM DIGITAL TWIN SHOWCASE</div>
                <div class="video-wrapper">
                    <iframe class="live-camera-iframe"
                        src="https://www.youtube.com/embed/${liveVideoId}?autoplay=1"
                        loading="lazy"
                        allowfullscreen>
                    </iframe>
                </div>
            </div>`;
        } else {
            const fallbackChannelUrl = "https://www.youtube.com/@DTShowcase"; 
        
            livestreamContainer.innerHTML = `
                <div class="live-camera-container">
                    <div class="passport-header text-2xl mb-2">AKTUELL KEIN LIVESTREAM VERFÜGBAR</div>
                    <div class="text-center text-sm text-gray-600 mb-2">
                        Schau dir vergangene Showcases und Videos auf unserem YouTube-Kanal an:
                    </div>
                    <div class="text-center">
                        <a href="${fallbackChannelUrl}" target="_blank" class="text-blue-600 hover:underline text-sm">
                            Zum YouTube-Kanal →
                        </a>
                    </div>
                </div>`;
        }
    } catch (error) {
        console.error("Fehler beim Prüfen des Livestreams:", error);
    }
}

document.addEventListener("DOMContentLoaded", updateLivestream);