document.addEventListener('componentsLoaded', function() {
    // Initialize language system
    const defaultLang = 'de';
    let currentLang = localStorage.getItem('preferredLanguage') || defaultLang;

    // Initialize language switcher
    initializeLanguageSwitcher();
    updateContent();
    updateHTMLLang(); // Ensure HTML lang attribute is set initially

    function initializeLanguageSwitcher() {
        const switcher = document.querySelector('.language-switcher');
        if (!switcher) return;

        // Set initial active state
        updateButtonStates();

        // Add click handlers
        switcher.querySelectorAll('.lang-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const newLang = btn.dataset.lang;
                if (newLang !== currentLang) {
                    currentLang = newLang;
                    localStorage.setItem('preferredLanguage', currentLang);
                    updateButtonStates();
                    updateContent();
                    updateHTMLLang();
                }
            });
        });
    }

    function updateButtonStates() {
        document.querySelectorAll('.lang-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.lang === currentLang);
        });
    }

    function updateHTMLLang() {
        document.documentElement.setAttribute('lang', currentLang);
    }

    function updateContent() {
        const elements = document.querySelectorAll('[data-i18n]');
        elements.forEach(element => {
            const key = element.dataset.i18n; // Fixed: using dataset.i18n instead of i18n
            const translation = getTranslation(key);
            if (translation !== undefined) {
                if (element.tagName === 'META') {
                    element.setAttribute('content', translation);
                } else {
                    element.innerHTML = translation;
                }
            }
        });

        // Update meta tags
        updateMetaTags();
    }

    function updateMetaTags() {
        document.title = translations[currentLang].meta.title;
        const metaDescription = document.querySelector('meta[name="description"]');
        if (metaDescription) {
            metaDescription.setAttribute('content', translations[currentLang].meta.description);
        }
    }

    function getTranslation(key) {
        const keys = key.split('.');
        let value = translations[currentLang];
        
        for (const k of keys) {
            if (value === undefined) return undefined;
            value = value[k];
        }
        
        return value;
    }
});