<script>
    function loadTranslations(language) {
        fetch(`${language}.json`)
            .then(response => response.json())
            .then(translations => {

                // Actualizar los textos de la página con las traducciones
                document.getElementById('nav-home').innerHTML = translations.home;
                document.getElementById('nav-about').innerHTML = translations.about;
                document.getElementById('nav-vision').innerHTML = translations.vision;
                document.getElementById('nav-comentarios').innerHTML = translations.comentarios;
                document.getElementById('nav-contact').innerHTML = translations.contact;
                document.getElementById('mascerca').innerHTML = translations.mascerca;
                document.getElementById('aboutwho').innerHTML = translations.aboutwho;
                document.getElementById('aboutdesc').innerHTML = translations.aboutdesc;
                document.getElementById('leer').innerHTML = translations.leer;
                document.getElementById('leer1').innerHTML = translations.leer1;
                document.getElementById('leer2').innerHTML = translations.leer2;
                document.getElementById('leer3').innerHTML = translations.leer3;
                document.getElementById('modalmoreabout').innerHTML = translations.modalmoreabout;
                document.getElementById('featuredservices').innerHTML = translations.featuredservices;

                document.getElementById('quien').innerHTML = translations.quien;
                document.getElementById('texto1').innerHTML = translations.texto1;
                document.getElementById('l1').innerHTML = translations.l1;
                document.getElementById('l2').innerHTML = translations.l2;
                document.getElementById('l3').innerHTML = translations.l3;
                document.getElementById('l4').innerHTML = translations.l4;
                // Tarjeta 1 - Investigación
                document.getElementById('investigationheader').innerHTML = translations.investigationheader;
                document.getElementById('card1text').innerHTML = translations.card1text;
                document.getElementById('card1list1').innerHTML = translations.card1list1;
                document.getElementById('card1list2').innerHTML = translations.card1list2;
                document.getElementById('card1list3').innerHTML = translations.card1list3;
                document.getElementById('card1list4').innerHTML = translations.card1list4;

                // Tarjeta 2 - Estafa
                document.getElementById('fraudanalysisheader').innerHTML = translations.fraudanalysisheader;
                document.getElementById('card2text').innerHTML = translations.card2text;
                document.getElementById('card2list1').innerHTML = translations.card2list1;
                document.getElementById('card2list2').innerHTML = translations.card2list2;
                document.getElementById('card2list3').innerHTML = translations.card2list3;
                document.getElementById('card2list4').innerHTML = translations.card2list4;

                // Tarjeta 3 - Consultoría
                document.getElementById('consultingheader').innerHTML = translations.consultingheader;
                document.getElementById('card3text').innerHTML = translations.card3text;
                document.getElementById('card3list1').innerHTML = translations.card3list1;
                document.getElementById('card3list2').innerHTML = translations.card3list2;
                document.getElementById('card3list3').innerHTML = translations.card3list3;
                document.getElementById('card3list4').innerHTML = translations.card3list4;
                document.getElementById('visionTitle').innerHTML = translations.visionTitle;
                document.getElementById('visionText').innerHTML = translations.visionText;
                document.getElementById('valuesTitle').innerHTML = translations.valuesTitle;

                document.getElementById('value1Title').innerHTML = translations.value1Title;
                document.getElementById('value1Text').innerHTML = translations.value1Text;

                document.getElementById('value2Title').innerHTML = translations.value2Title;
                document.getElementById('value2Text').innerHTML = translations.value2Text;

                document.getElementById('value3Title').innerHTML = translations.value3Title;
                document.getElementById('value3Text').innerHTML = translations.value3Text;

                document.getElementById('value4Title').innerHTML = translations.value4Title;
                document.getElementById('value4Text').innerHTML = translations.value4Text;
                document.getElementById('aboutTitle').innerHTML = translations.aboutTitle;
                document.getElementById('aboutDesc').innerHTML = translations.aboutDesc;
                document.getElementById('closeBtn').innerHTML = translations.closeBtn;
                document.getElementById('card1Title').innerHTML = translations.card1Title;
                document.getElementById('card1Text').innerHTML = translations.card1Text;

                document.getElementById('card2Title').innerHTML = translations.card2Title;
                document.getElementById('card2Text').innerHTML = translations.card2Text;

                document.getElementById('card3Title').innerHTML = translations.card3Title;
                document.getElementById('card3Text').innerHTML = translations.card3Text;
                // Títulos y descripciones de las tarjetas
                document.getElementById('trust_title').innerHTML = translations.trust_title;
                // Tarjeta 1
                document.getElementById('trust_card1_title').innerHTML = translations.trust_card1_title;
                document.getElementById('trust_card1_text').innerHTML = translations.trust_card1_text;
                document.getElementById('trust_card1_quote').innerHTML = translations.trust_card1_quote;

                // Tarjeta 2
                document.getElementById('trust_card2_title').innerHTML = translations.trust_card2_title;
                document.getElementById('trust_card2_text').innerHTML = translations.trust_card2_text;
                document.getElementById('trust_card2_stat').innerHTML = translations.trust_card2_stat;

                // Tarjeta 3
                document.getElementById('trust_card3_title').innerHTML = translations.trust_card3_title;
                document.getElementById('trust_card3_text').innerHTML = translations.trust_card3_text;
                document.getElementById('trust_list1').innerHTML = translations.trust_list1;
                document.getElementById('trust_list2').innerHTML = translations.trust_list2;
                document.getElementById('trust_list3').innerHTML = translations.trust_list3;

                // CTA
                document.getElementById('trust_cta_text').innerHTML = translations.trust_cta_text;
                document.getElementById('trust_cta_btn').innerHTML = translations.trust_cta_btn;
                document.getElementById('testimonialsTitle').innerHTML = translations.testimonialsTitle;
                document.getElementById('testimonialsDesc').innerHTML = translations.testimonialsDesc;
                document.getElementById('leaveCommentTitle').innerHTML = translations.leaveCommentTitle;
                document.getElementById('ratingLabel').innerHTML = translations.ratingLabel;
                document.getElementById('submitBtn').innerHTML = translations.submitBtn;
                document.querySelector('.whatsapp-tooltip').innerHTML = translations.whatsappTooltip;

                // Servicios en el footer
                let footerServices = document.querySelectorAll('.footer-links li');
                footerServices.forEach((service, index) => {
                    if (translations.footerServices[index]) {
                        service.innerHTML = translations.footerServices[index];
                    }
                });
                // Contacto
                document.querySelector('.footer-contact .ri-mail-fill + div span').innerHTML = "Email";
                document.querySelector('.footer-contact .ri-mail-fill + div a').innerHTML = translations.contactEmail;

                // Boletín
                document.querySelector('.newsletter-text').innerHTML = translations.newsletterText;
                document.querySelector('.submit-btn span').innerHTML = translations.newsletterButton;
                document.querySelector('.privacy-text').innerHTML = translations.privacyText;

                // Legal
                document.querySelector('.footer-legal p').innerHTML = translations.legalText;
                document.querySelectorAll('.legal-links a')[0].innerHTML = translations.pdfLink;
                document.querySelectorAll('.legal-links a')[1].innerHTML = translations.termsOfService;
                document.querySelectorAll('.legal-links a')[2].innerHTML = translations.privacyPolicy;

                // Modal de suscripción exitosa
                document.getElementById('bscriptionModalTitle').innerHTML = translations.bscriptionModalTitle;
                document.getElementById('subscriptionModalTitle').innerHTML = translations.subscriptionSuccess;
                document.getElementById('subscriptionModalMessage').innerHTML = translations.subscriptionSuccessMessage;
                document.getElementById('boletin').innerHTML = translations.boletin;
                document.getElementById('telf').innerHTML = translations.telf;
                document.getElementById('cont').innerHTML = translations.cont;
                document.getElementById('como').innerHTML = translations.como;
                document.getElementById('servi').innerHTML = translations.servi;
                document.getElementById('sendMessageBtn').innerHTML = translations.sendMessageBtn;
                //utlimo cambio

                document.getElementById('solitarconsulta').innerHTML = translations.solitarconsulta;
                document.getElementById('detalleconsultas').innerHTML = translations.detalleconsultas;
                document.getElementById('solitartexto').innerHTML = translations.tituloconsulta;
                document.getElementById('consult-name').placeholder = translations.consultNamePlaceholder || 'Tu nombre completo';
                document.getElementById('consult-phone').placeholder = translations.consultPhonePlaceholder || 'Tu número de WhatsApp';
                document.getElementById('consult-email').placeholder = translations.consultEmailPlaceholder || 'Tu correo electrónico';
                document.getElementById('consult-reason').placeholder = translations.consultReasonPlaceholder || 'Motivo de consulta';
                document.querySelectorAll('#consult-reason option')[0].innerText = translations.consultReasonOption1 || 'Cotización de servicios';
                document.querySelectorAll('#consult-reason option')[1].innerText = translations.consultReasonOption2 || 'Información general';
                document.querySelectorAll('#consult-reason option')[2].innerText = translations.consultReasonOption3 || 'Consulta técnica';
                document.querySelectorAll('#consult-reason option')[3].innerText = translations.consultReasonOption4 || 'Otro motivo';
                document.getElementById('consult-message').placeholder = translations.consultMessagePlaceholder || 'Detalla tu consulta aquí...';
                document.querySelector('.submit-btn.comentario').innerText = translations.consultButton || 'ENVIAR CONSULTA';
                document.getElementById('nombre').placeholder = translations.nombre || 'Tu Nombre';
                document.getElementById('cargo').placeholder = translations.cargo|| 'Tu cargo/empresa(Opcional)';
                document.getElementById('comentario').placeholder = translations.comentario || 'Tu experiencia con nuetros servicios';
                document.getElementById('whatsappMessage').placeholder = translations.whatsappMessage || 'Escribe tu mensaje...';

                
            })
            .catch(error => console.error('Error al cargar las traducciones:', error));
    }

    // Manejar el cambio de idioma en el select
    document.getElementById('languageSelect').addEventListener('change', (event) => {
        const selectedLanguage = event.target.value;
        loadTranslations(selectedLanguage);
    });

    // Cargar el idioma predeterminado cuando se carga la página
    document.addEventListener('DOMContentLoaded', () => {
        const defaultLanguage = 'es'; // Idioma predeterminado (español)
        loadTranslations(defaultLanguage);
    });
</script>