<section class="py-24 bg-white" id="stats">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2
        class="text-3xl sm:text-4xl font-playfair font-bold text-gray-900 mb-4"
      >
        {{ sections.stats.title }}
      </h2>
      <p class="text-base sm:text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.stats.subtitle }}
      </p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
      {% for stat in sections.stats.items[:4] %}

      <div class="text-center">
        <div
          class="w-16 h-16 mx-auto mb-6 flex items-center justify-center bg-primary/10 rounded-full"
        >
          <i class="{{stat.icon}} text-2xl text-primary"></i>
        </div>
        <h3 class="text-xl font-bold text-gray-900 mb-3">{{stat.label}}</h3>
        <p class="text-gray-600">{{stat.value}}</p>
      </div>

      {% endfor %}
    </div>
  </div>
</section>
