document.addEventListener("DOMContentLoaded", () => {

    // 1. Detect device language
    let userLang = (navigator.language || navigator.userLanguage).substring(0, 2).toLowerCase();

    // Function to detect the user's language
    const applyTranslations = () => {
        if (!window.i18n) return; // If something went wrong, we return

        // Search for all elements with the data-i18n attribute
        const elements = document.querySelectorAll("[data-i18n]");

        elements.forEach(el => {
            const key = el.getAttribute("data-i18n");
            // Si la clave existe en el diccionario, reemplaza el texto
            if (window.i18n[key]) {
                el.innerText = window.i18n[key];
            }
        });
    };

    // Function to load the .js file of the language
    const loadScript = (langCode, isFallback = false) => {
        const script = document.createElement("script");
        script.src = `lang/${langCode}.js`;

        // If the file exists, we apply the translations
        script.onload = () => applyTranslations();

        // If the file does NOT exist
        script.onerror = () => {
            if (!isFallback) {
                console.log(`Idioma ${langCode} no encontrado. Cargando inglés...`);
                loadScript("en", true); // Intentamos con el idioma por defecto
            }
        };

        document.head.appendChild(script);
    };

    // 2. Start the script loading
    loadScript(userLang);
});