<section class="post-hero">
  <div class="wrap">
    <p class="eyebrow">Our Work</p>
    <h1>Case studies &amp; delivered projects</h1>
    <p class="post-date">A running record of what we've built, run, and delivered across East Africa.</p>
  </div>
  <div class="post-hero-pattern"></div>
</section>

<section class="block">
  <% if (!projects.length) { %>
    <p>New work is on the way &mdash; check back soon.</p>
  <% } else { %>
    <% if (categories.length) { %>
      <div class="filter-tabs" id="filter-tabs">
        <button type="button" class="filter-tab active" data-filter="all">All</button>
        <% categories.forEach(function(cat) { %>
          <button type="button" class="filter-tab" data-filter="<%= cat.slug %>"><%= cat.name %></button>
        <% }) %>
      </div>
    <% } %>
    <div class="card-grid" id="work-grid">
      <% projects.forEach(function(project) { %>
        <a class="case-card"
           href="/work/<%= project.slug %>"
           data-categories="<%= project.Categories.map(function(c) { return c.slug; }).join(',') %>">
          <% if (project.featuredImage) { %>
            <img class="thumb" src="<%= project.featuredImage %>" alt="<%= project.title %>">
          <% } else { %>
            <div class="thumb-fallback"></div>
          <% } %>
          <div class="body">
            <h3><%= project.title %></h3>
            <% if (project.summary) { %><p class="card-summary"><%= project.summary %></p><% } %>
            <span class="read-more">View project &rarr;</span>
          </div>
        </a>
      <% }) %>
    </div>
  <% } %>
</section>

<script src="/js/work-filter.js"></script>
