<section id="features" class="py-32 bg-gradient-to-b from-gray-50 to-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-20" data-aos="fade-up">
      <h2 class="text-5xl font-bold text-gray-900 mb-6">
        {{ sections.features.title }}
      </h2>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        {{ sections.features.subtitle }}
      </p>
    </div>
    
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for feature in sections.features.items %}
      <div class="group relative bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-500 border border-gray-100" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}">
        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        
        <div class="relative">
          <div class="flex items-start gap-4 mb-6">
            <div class="w-14 h-14 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
              <i class="{{ feature.icon | default('ri-star-line') }} text-white text-xl"></i>
            </div>
            
            <div class="flex-1">
              <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-primary transition-colors duration-300">
                {{ feature.title }}
              </h3>
              {% if feature.badge %}
              <span class="inline-block px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs font-medium">
                {{ feature.badge }}
              </span>
              {% endif %}
            </div>
          </div>
          
          <p class="text-gray-600 mb-6 leading-relaxed">
            {{ feature.subtitle }}
          </p>
          
          {% if feature.status %}
          <div class="inline-flex items-center px-3 py-1 bg-green-50 text-green-700 rounded-full text-sm font-medium mb-4">
            <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
            {{ feature.status }}
          </div>
          {% endif %}
          
          {% if feature.benefits %}
          <ul class="space-y-2 mb-6">
            {% for benefit in feature.benefits %}
            <li class="flex items-start gap-2 text-sm text-gray-600">
              <div class="w-5 h-5 bg-primary/10 rounded-full flex items-center justify-center mt-0.5 flex-shrink-0">
                <i class="ri-check-line text-primary text-xs"></i>
              </div>
              <span>{{ benefit }}</span>
            </li>
            {% endfor %}
          </ul>
          {% endif %}
          
          {% if feature.media %}
          <div class="mt-6 rounded-xl overflow-hidden border border-gray-100">
            <img src="{{ feature.media.src }}" 
                 alt="{{ feature.media.alt }}" 
                 class="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-500">
          </div>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>