// Designs page — filter + zoek
(function(){
  const grid = document.getElementById('seriesGrid');
  if (!grid) return;
  const search = document.getElementById('searchInput');
  const cat = document.getElementById('catFilter');
  const countEl = document.getElementById('resultCount');
  const noResults = document.getElementById('noResults');

  function apply(){
    const q = (search?.value || '').toLowerCase().trim();
    const c = (cat?.value || '').toLowerCase();
    let visible = 0;
    grid.querySelectorAll('[data-card]').forEach(card => {
      const name = (card.dataset.name || '').toLowerCase();
      const cats = (card.dataset.categories || '').toLowerCase();
      const models = (card.dataset.models || '').toLowerCase();
      const matchQ = !q || name.includes(q) || models.includes(q);
      const matchC = !c || cats.includes(c);
      const show = matchQ && matchC;
      card.style.display = show ? '' : 'none';
      if (show) visible++;
    });
    if (countEl) countEl.textContent = visible;
    if (noResults) noResults.style.display = visible === 0 ? '' : 'none';
  }
  search?.addEventListener('input', apply);
  cat?.addEventListener('change', apply);
})();

// Model detail — galerij thumbnails
(function(){
  const main = document.getElementById('galleryMain');
  if (!main) return;
  document.querySelectorAll('[data-thumb]').forEach(t => {
    t.addEventListener('click', () => {
      main.src = t.dataset.full;
      document.querySelectorAll('[data-thumb]').forEach(x => x.classList.remove('active'));
      t.classList.add('active');
    });
  });
})();
