<section class="py-16 bg-gray-50">
  <div class="container mx-auto px-4">
    <% if (block.props?.title) { %>
    <h2 class="text-3xl font-bold text-gray-900 text-center mb-12"><%= block.props.title %></h2>
    <% } %>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <% const testimonials = block.props?.items || []; %>
      <% for (const testimonial of testimonials) { %>
      <div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
        <p class="text-gray-700 italic mb-4">"<%= testimonial.quote || '' %>"</p>
        <div class="flex items-center">
          <% if (testimonial.avatar) { %>
          <img src="<%= testimonial.avatar %>" alt="" class="w-10 h-10 rounded-full mr-3">
          <% } %>
          <div>
            <p class="font-semibold text-gray-900"><%= testimonial.name || 'Anonymous' %></p>
            <% if (testimonial.role) { %>
            <p class="text-gray-500 text-sm"><%= testimonial.role %></p>
            <% } %>
          </div>
        </div>
      </div>
      <% } %>
    </div>
  </div>
</section>
