`; document.querySelector('.featured-centers').insertBefore(capacityFilter, document.querySelector('.centers-grid')); // Add styles for capacity filter buttons const style = document.createElement('style'); style.textContent = ` .capacity-filter-btn { padding: 10px 20px; background: white; border: 1px solid var(--event-purple); border-radius: 6px; color: var(--event-purple); font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .capacity-filter-btn:hover, .capacity-filter-btn.active { background: var(--event-purple); color: white; } `; document.head.appendChild(style); // Capacity filter functionality const capacityButtons = document.querySelectorAll('.capacity-filter-btn'); capacityButtons.forEach(button => { button.addEventListener('click', function() { capacityButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); const minCapacity = this.getAttribute('data-min'); const maxCapacity = this.getAttribute('data-max'); // In a real implementation, this would filter centers by capacity console.log('Filtering by capacity:', minCapacity, 'to', maxCapacity); }); }); // Center details modal (simulated) const centerCards = document.querySelectorAll('.center-card'); centerCards.forEach(card => { card.addEventListener('click', function(e) { if (!e.target.closest('.btn-secondary')) { const title = this.querySelector('.center-title').textContent; // In a real implementation, this would open a modal with detailed information console.log('Opening details for:', title); } }); }); // Availability checker simulation const availabilityChecker = document.createElement('div'); availabilityChecker.innerHTML = ` `; document.querySelector('.event-categories').insertBefore(availabilityChecker, document.querySelector('.categories-grid')); });