<section id="stats" class="py-24 bg-gradient-to-br from-white to-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-5xl font-bold text-center mb-6">
      {{sections.stats.title}}
    </h2>
    <p class="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
      {{sections.stats.subtitle}}
    </p>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
      {% for item in sections.stats.items %}
      <div
        class="group bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
      >
        <div
          class="w-16 h-16 flex items-center justify-center bg-{{item.color}}-100 rounded-2xl mb-6 group-hover:scale-110 transition-transform duration-300"
        >
          <i class="{{item.icon}} text-{{item.color}} text-2xl"></i>
        </div>
        <h3 class="text-xl font-semibold mb-4">{{item.value}}</h3>
        <p class="text-gray-600 leading-relaxed">{{item.label}}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
