<div class="wm-screen">
  <div class="wm-topbar">
    <button class="btn-icon btn-icon-sm" onclick="window.location.href='services-home.html'"><i class="bi bi-arrow-left"></i></button>
    <div class="flex-grow-1">
      <h5 class="title">All Services</h5>
      <div class="subtitle">25 wedding service categories</div>
    </div>
  </div>

  <div class="wm-wrap">
    <div class="wm-search mb-3">
      <i class="bi bi-search"></i>
      <input id="catSearch" placeholder="Search a service…">
    </div>

    <div class="row g-2" id="catGrid"></div>
  </div>

  {{> weddings-bottom-nav}}
</div>




<script>
  function render(filter = '') {
    const grid = document.getElementById('catGrid');
    grid.innerHTML = '';
    WEDDING_CATEGORIES.filter(c => c.name.toLowerCase().includes(filter)).forEach(c => {
      const col = document.createElement('div');
      col.className = 'col-4';
      col.innerHTML = `
        <a class="wm-cat mb-2" href="vendor-listing.html?cat=${c.id}">
          <span class="cat-ico" style="background:${c.grad}"><i class="bi ${c.icon}"></i></span>
          <span class="cat-name">${c.name}</span>
          <span class="cat-count">${c.count}+ vendors</span>
        </a>`;
      grid.appendChild(col);
    });
    if (!grid.children.length) {
      grid.innerHTML = '<div class="col-12"><div class="wm-glass p-5 text-center text-muted"><i class="bi bi-search d-block fs-1 mb-2"></i>No services found</div></div>';
    }
  }
  render();
  document.getElementById('catSearch').addEventListener('input', e => render(e.target.value.trim().toLowerCase()));
</script>
