document.addEventListener('DOMContentLoaded', function() {
    // Initialize language
    const defaultLanguage = 'es';
    let currentLanguage = localStorage.getItem('language') || defaultLanguage;
    updateLanguage(currentLanguage);

    // Handle language change from any component
    document.addEventListener('languageChange', (e) => {
        updateLanguage(e.detail);
    });

    // Blog filter functionality with event delegation
    document.addEventListener('click', function(e) {
        // Handle blog category buttons
        if (e.target.closest('[data-category]')) {
            const button = e.target.closest('[data-category]');
            const category = button.getAttribute('data-category');
            // Update all buttons in the document
            document.querySelectorAll('[data-category]').forEach(btn => {
                btn.classList.remove('active-category');
                btn.classList.add('bg-white', 'text-gray-700');
            });
            // Update clicked button
            button.classList.remove('bg-white', 'text-gray-700');
            button.classList.add('active-category');
            // Update category contents with animation
            document.querySelectorAll('[data-category-content]').forEach(content => {
                if (content.getAttribute('data-category-content') === category) {
                    content.style.display = 'block';
                    content.style.animation = 'fadeIn 0.5s ease-out';
                } else {
                    content.style.display = 'none';
                }
            });
feather.replace();
        }
    });
// Form submission handling
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // Here you would typically send the form data
            // For demo purposes, we'll just show an alert
            alert('Thank you for your message! I will get back to you soon.');
            this.reset();
        });
    }
});

function updateLanguage(language) {
    // Update all elements with data-i18n attributes
    document.querySelectorAll('[data-i18n]').forEach(element => {
        const key = element.getAttribute('data-i18n');
        if (translations[language] && translations[language][key]) {
            element.textContent = translations[language][key];
        } else if (translations['es'][key]) {
            // Fallback to Spanish if translation missing
            element.textContent = translations['es'][key];
        }
    });

    // Update HTML lang attribute
    document.documentElement.lang = language;

    // Update active language in selector
    document.querySelectorAll('.language-option').forEach(option => {
        if (option.getAttribute('data-lang') === language) {
            option.classList.add('active');
        } else {
            option.classList.remove('active');
        }
    });
}

function filterBlogPosts(category) {
    const blogPosts = document.querySelectorAll('.blog-post');
    blogPosts.forEach(post => {
        const postCategories = post.getAttribute('data-categories').split(' ');
        if (category === 'all' || postCategories.includes(category)) {
            post.style.display = 'block';
        } else {
            post.style.display = 'none';
        }
    });
}