document.addEventListener("DOMContentLoaded", function(){
  const nav = document.querySelector('.ugfx-navbar');
  const onScroll = () => {
    if (!nav) return;
    nav.classList.toggle('nav-scrolled', window.scrollY > 24);
  };
  onScroll();
  window.addEventListener('scroll', onScroll, { passive:true });

  const search = document.getElementById('djSearch');
  const chips = Array.from(document.querySelectorAll('.ugfx-filter-chip'));
  const cards = Array.from(document.querySelectorAll('.dj-card-item'));
  let activeFilter = 'all';

  function runFilter(){
    const q = (search ? search.value : '').trim().toLowerCase();
    cards.forEach(card => {
      const matchesFilter = activeFilter === 'all' || (card.dataset.filter || '').includes(activeFilter);
      const matchesSearch = q === '' || (card.dataset.search || '').includes(q);
      card.classList.toggle('ugfx-hidden', !(matchesFilter && matchesSearch));
    });
  }

  chips.forEach(chip => chip.addEventListener('click', function(){
    activeFilter = this.dataset.filter || 'all';
    chips.forEach(c => c.classList.toggle('active', c === this));
    runFilter();
  }));
  if (search) search.addEventListener('input', runFilter);
  runFilter();
});
