`views/index.ejs`

117 lines
<%- include('partials/head', { title: site.name + ' — ' + site.tagline, description: site.description }) %>

<main class="wrap main">
  <section class="hero">
    <h1>Who carries what,<br><span class="hero-accent">where, and for which brand standard.</span></h1>
    <p class="lead">An independent, free index of <%= total %> hospitality FF&amp;E rep agencies — boutique hotel, hotel brand, resort, casino, cruise, F&amp;B, spa, hospitality healthcare. Filter by territory, by segment, or by line carried.</p>
  </section>

  <form class="filter-bar" method="get" action="/">
    <input type="search" name="q" value="<%= filters.q %>" placeholder="Search rep, agency, line, city…" aria-label="Search">

    <select name="territory" aria-label="Territory">
      <option value="">All territories</option>
      <% facets.territories.forEach(function(t){ %>
        <option value="<%= t %>" <%= filters.territory === t ? 'selected' : '' %>><%= t %></option>
      <% }) %>
    </select>

    <select name="vertical" aria-label="Segment">
      <option value="">All segments</option>
      <% facets.verticals.forEach(function(v){ %>
        <option value="<%= v %>" <%= filters.vertical === v ? 'selected' : '' %>><%= v %></option>
      <% }) %>
    </select>

    <select name="line" aria-label="Line carried">
      <option value="">All lines</option>
      <% facets.lines.forEach(function(l){ %>
        <option value="<%= l %>" <%= filters.line === l ? 'selected' : '' %>><%= l %></option>
      <% }) %>
    </select>

    <button type="submit" class="btn-primary">Filter</button>
    <% if (filters.q || filters.territory || filters.vertical || filters.line) { %>
      <a class="btn-ghost" href="/">Reset</a>
    <% } %>
  </form>

  <div class="result-bar">
    <div class="muted"><%= matched %> of <%= total %> matching</div>
    <div class="controls">
      <label class="control">
        <span>Sort</span>
        <select id="sort-select" name="sort">
          <option value="newest" <%= filters.sort === 'newest' ? 'selected' : '' %>>Newest</option>
          <option value="name" <%= filters.sort === 'name' ? 'selected' : '' %>>Name A→Z</option>
          <option value="agency" <%= filters.sort === 'agency' ? 'selected' : '' %>>Agency A→Z</option>
          <option value="city" <%= filters.sort === 'city' ? 'selected' : '' %>>City A→Z</option>
          <option value="territory" <%= filters.sort === 'territory' ? 'selected' : '' %>>Territory</option>
        </select>
      </label>
      <label class="control">
        <span>Density</span>
        <input id="density-slider" type="range" min="220" max="420" step="20" value="300">
      </label>
    </div>
  </div>

  <% if (!matched) { %>
    <div class="empty">No reps match those filters. <a href="/">Reset</a>.</div>
  <% } else { %>
    <ul class="rep-grid" id="rep-grid">
      <% reps.forEach(function(r){ %>
        <li class="rep-card">
          <a class="rep-link" href="/rep/<%= r.id %>">
            <div class="rep-card-head">
              <div class="rep-avatar"><%= r.name.split(' ').map(s => s[0]).join('').slice(0,2) %></div>
              <div>
                <div class="rep-name"><%= r.name %></div>
                <div class="rep-agency"><%= r.agency %></div>
              </div>
            </div>
            <div class="rep-meta">
              <span class="chip city"><%= r.city %></span>
              <% r.territories.slice(0,4).forEach(function(t){ %>
                <span class="chip"><%= t %></span>
              <% }) %>
            </div>
            <div class="rep-lines muted">
              <%= r.lines.slice(0,3).join(' &middot; ') %>
            </div>
            <div class="rep-vertical">
              <% r.vertical.forEach(function(v){ %>
                <span class="tag"><%= v %></span>
              <% }) %>
            </div>
          </a>
        </li>
      <% }) %>
    </ul>
  <% } %>

  <section class="how-matches">
    <h2>How matches work</h2>
    <div class="how-grid">
      <div class="how-step">
        <div class="how-num">01</div>
        <h3>Filter by where the project is</h3>
        <p>Pick the state the property sits in (territory). Reps are indexed by every state they actively cover — not by where their office happens to be — so a rep based in Atlanta who covers FL/AL/GA/SC/TN shows up under all five.</p>
      </div>
      <div class="how-step">
        <div class="how-num">02</div>
        <h3>Narrow by segment, or by line</h3>
        <p>A rep who carries a resort textile line in CA isn't always the right call for a roadside select-service in the same state. Use the segment filter (boutique hotel, casino, cruise, F&amp;B, spa, etc.) or filter to a specific manufacturer line you already need to spec.</p>
      </div>
      <div class="how-step">
        <div class="how-num">03</div>
        <h3>Contact the rep directly</h3>
        <p>Open the listing page for the agency principal you want. Every record has a direct email and phone — no contact form, no lead-routing, no introductions. We are not a brokerage; we are a map.</p>
      </div>
    </div>
    <p class="how-foot muted">Operated by <a href="https://designerwallcoverings.com">Designer Wallcoverings</a> as a free industry resource. Listings are not pay-to-play; there is no advertising. To add, update, or correct a listing, email <a href="mailto:<%= site.email %>"><%= site.email %></a>.</p>
  </section>
</main>

<%- include('partials/foot') %>