document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('search-input');
    const filterBtns = document.querySelectorAll('.cat-filter-btn');
    const eventCards = document.querySelectorAll('.event-card');
    
    let currentCategory = 'All';
    let currentSearch = '';

    function filterEvents() {
        let visibleCount = 0;
        
        eventCards.forEach(card => {
            const title = card.getAttribute('data-title') || '';
            const desc = card.getAttribute('data-desc') || '';
            const cat = card.getAttribute('data-category') || '';
            
            const matchesCategory = (currentCategory === 'All' || cat === currentCategory);
            const matchesSearch = (title.includes(currentSearch) || desc.includes(currentSearch));
            
            if (matchesCategory && matchesSearch) {
                card.style.display = 'flex';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });
        
        // Optional: show a "no results" message if visibleCount === 0
    }

    searchInput.addEventListener('input', (e) => {
        currentSearch = e.target.value.toLowerCase();
        filterEvents();
    });

    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            currentCategory = btn.getAttribute('data-category');
            
            filterBtns.forEach(b => {
                b.classList.remove('bg-cyan-500', 'text-slate-950', 'font-bold', 'shadow-glow-cyan');
                b.classList.add('border', 'border-white/20', 'bg-slate-800/70', 'text-slate-200', 'hover:border-cyan-500/60', 'hover:text-cyan-300', 'hover:bg-slate-700/80');
            });
            btn.classList.remove('border', 'border-white/20', 'bg-slate-800/70', 'text-slate-200', 'hover:border-cyan-500/60', 'hover:text-cyan-300', 'hover:bg-slate-700/80');
            btn.classList.add('bg-cyan-500', 'text-slate-950', 'font-bold', 'shadow-glow-cyan');
            
            filterEvents();
        });
    });
});
