document.addEventListener('DOMContentLoaded', () => {
    const categoryBtns = document.querySelectorAll('.blog-cat-btn');
    const blogCards = document.querySelectorAll('.blog-card');

    if (!categoryBtns.length || !blogCards.length) {
        return;
    }

    categoryBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const selectedCategory = btn.dataset.cat;

            // Update active state on buttons
            categoryBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');

            // Filter blog cards
            blogCards.forEach(card => {
                const cardCategory = card.dataset.cat;
                if (selectedCategory === 'all' || cardCategory === selectedCategory) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
});