<section class="py-20 px-6 bg-gray-50">
  <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 text-center"><%= title %></h2>
    <% } %>
    <% if (typeof subtitle !== 'undefined' && subtitle) { %>
    <p class="text-gray-500 text-sm leading-relaxed mb-10 max-w-xl mx-auto text-center"><%= subtitle %></p>
    <% } %>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <% (typeof items !== 'undefined' && Array.isArray(items) ? items : []).forEach(function(item) { %>
      <div class="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-11 h-11 rounded-xl flex items-center justify-center font-extrabold text-sm shrink-0"
               style="background:<%= item.color || 'rgba(128,101,248,.1)' %>;color:<%= item.accent || '#8065f8' %>"><%= item.initials || '•' %></div>
          <div>
            <div class="text-sm font-extrabold text-navy"><%= item.name %></div>
            <div class="text-xs text-gray-400"><%= item.role || '' %></div>
          </div>
        </div>
        <p class="text-sm text-gray-500 leading-relaxed m-0">"<%= item.text %>"</p>
      </div>
      <% }); %>
    </div>
  </div>
</section>
