<% const cardItems = typeof items !== 'undefined' && Array.isArray(items) ? items : []; %>
<% const gridCols = cardItems.length === 4 ? 'md:grid-cols-2 lg:grid-cols-4' : (cardItems.length === 2 ? 'md:grid-cols-2' : 'md:grid-cols-2 lg:grid-cols-3'); %>
<section class="py-20 px-6 bg-white">
  <div class="max-w-5xl mx-auto">
    <% if (typeof title !== 'undefined' && title) { %>
    <h2 class="text-3xl md:text-4xl font-extrabold text-navy mb-3 leading-tight"><%= title %></h2>
    <% } %>
    <% if (typeof subtitle !== 'undefined' && subtitle) { %>
    <p class="text-gray-500 text-sm leading-relaxed mb-10 max-w-2xl"><%= subtitle %></p>
    <% } %>
    <div class="grid grid-cols-1 <%= gridCols %> gap-6">
      <% cardItems.forEach(function(item) {
        const accent = item.accent || '#8065f8';
      %>
      <a href="<%= item.href || '#' %>" class="card-hover block rounded-2xl border border-gray-100 overflow-hidden no-underline text-inherit bg-white">
        <div class="h-1" style="background:linear-gradient(90deg,<%= accent %>,<%= accent %>99)"></div>
        <div class="p-6">
          <div class="w-12 h-12 rounded-xl flex items-center justify-center font-extrabold text-sm mb-4"
               style="background:<%= item.color || 'rgba(128,101,248,.1)' %>;color:<%= accent %>"><%= item.icon || item.initials || '•' %></div>
          <h3 class="text-base font-extrabold text-navy mb-2"><%= item.title %></h3>
          <% if (item.description) { %>
          <p class="text-sm text-gray-500 leading-relaxed m-0"><%= item.description %></p>
          <% } %>
        </div>
      </a>
      <% }); %>
    </div>
  </div>
</section>
