<section class="page-hero page-hero-sm">
  <div class="container">
    <h1><i class="bi bi-search-heart" style="font-size:1.8rem;opacity:.85"></i> Business Directory</h1>
    <p>Discover and connect with verified Biz2Biz Chamber member businesses in your area.</p>
    <form class="pub-dir-search" method="GET" action="/directory">
      <div class="pub-dir-search-input">
        <i class="bi bi-search"></i>
        <input type="text" name="search" value="<%= search || '' %>" placeholder="Search by name, keyword, or service...">
      </div>
      <select name="category" class="pub-dir-select">
        <option value="">All Categories</option>
        <% categories.forEach(c => { %>
        <option value="<%= c.id %>" <%= (category == c.id) ? 'selected' : '' %>><%= c.name %></option>
        <% }) %>
      </select>
      <input type="text" name="city" value="<%= city || '' %>" placeholder="City" class="pub-dir-city">
      <button type="submit" class="btn btn-white btn-sm"><i class="bi bi-search"></i> Search</button>
    </form>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="pub-dir-meta">
      <p><strong><%= total || 0 %></strong> verified businesses<% if (search) { %> matching "<strong><%= search %></strong>"<% } %><% if (city) { %> in <strong><%= city %></strong><% } %></p>
      <% if (search || category || city) { %>
      <a href="/directory" class="pub-dir-clear"><i class="bi bi-x-circle"></i> Clear filters</a>
      <% } %>
    </div>

    <% if (members && members.length) { %>
    <div class="pub-dir-grid">
      <% members.forEach(m => { %>
      <a href="/directory/<%= m.slug %>" class="pub-dir-card">
        <div class="pub-dir-card-top">
          <% if (m.logo) { %>
            <img src="<%= m.logo %>" alt="<%= m.name %>" class="pub-dir-logo">
          <% } else { %>
            <div class="pub-dir-logo-placeholder"><%= m.name[0].toUpperCase() %></div>
          <% } %>
          <% if (m.is_featured) { %><span class="pub-dir-featured"><i class="bi bi-patch-check-fill"></i></span><% } %>
        </div>
        <div class="pub-dir-card-body">
          <h3><%= m.name %></h3>
          <p class="pub-dir-category"><i class="bi bi-tag-fill"></i> <%= m.category_name || 'Business' %></p>
          <% if (m.city || m.state) { %>
          <p class="pub-dir-location"><i class="bi bi-geo-alt-fill"></i> <%= [m.city, m.state].filter(Boolean).join(', ') %></p>
          <% } %>
          <% if (m.short_description) { %>
          <p class="pub-dir-desc"><%= m.short_description.substring(0, 90) %><%= m.short_description.length > 90 ? '…' : '' %></p>
          <% } %>
          <% if (m.rating > 0) { %>
          <div class="pub-dir-rating">
            <% for(let i=1;i<=5;i++) { %><i class="bi bi-star<%= i <= Math.round(m.rating) ? '-fill' : '' %>"></i><% } %>
            <span><%= parseFloat(m.rating).toFixed(1) %> (<%= m.review_count || 0 %>)</span>
          </div>
          <% } %>
        </div>
        <div class="pub-dir-card-footer">
          <span class="btn btn-primary btn-sm">View Profile <i class="bi bi-arrow-right"></i></span>
        </div>
      </a>
      <% }) %>
    </div>

    <% const totalPages = Math.ceil(total / limit); %>
    <% if (totalPages > 1) { %>
    <div class="pagination">
      <% if (page > 1) { %><a href="?page=<%= page-1 %>&search=<%= search||'' %>&category=<%= category||'' %>&city=<%= city||'' %>" class="page-btn"><i class="bi bi-chevron-left"></i></a><% } %>
      <% for(let i=Math.max(1,page-2); i<=Math.min(totalPages,page+2); i++) { %>
      <a href="?page=<%= i %>&search=<%= search||'' %>&category=<%= category||'' %>&city=<%= city||'' %>" class="page-btn <%= i===page?'active':'' %>"><%= i %></a>
      <% } %>
      <% if (page < totalPages) { %><a href="?page=<%= page+1 %>&search=<%= search||'' %>&category=<%= category||'' %>&city=<%= city||'' %>" class="page-btn"><i class="bi bi-chevron-right"></i></a><% } %>
    </div>
    <% } %>

    <% } else { %>
    <div class="empty-state" style="padding:80px 0">
      <i class="bi bi-search" style="font-size:3rem;color:#d1d5db;display:block;margin-bottom:16px"></i>
      <h3 style="color:#374151;margin-bottom:8px">No businesses found</h3>
      <p style="color:#9ca3af;margin-bottom:24px">Try a different search term or browse all categories.</p>
      <a href="/directory" class="btn btn-primary">Browse All Businesses</a>
    </div>
    <% } %>

    <!-- CTA for non-members -->
    <div class="pub-dir-cta">
      <div class="pub-dir-cta-inner">
        <div>
          <h3>Is your business listed here?</h3>
          <p>Join Biz2Biz Chamber to get your verified profile, connect with customers, and access all member tools — starting with a free 30-day trial.</p>
        </div>
        <a href="/register" class="btn btn-primary">Get Listed — Free Trial <i class="bi bi-arrow-right"></i></a>
      </div>
    </div>
  </div>
</section>
