<section id="features" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-30"></div>
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.03]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="features-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M0 0h40v40H0z" fill="none" />
            <path d="M0 0h1v40H0zm40 0v1H0V0zm0 40h-1V0h1zM0 40v-1h40v1z" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#features-grid)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section header -->
    <div class="text-center max-w-3xl mx-auto mb-16" data-aos="fade-up">
      {% if sections.features.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
        {{ sections.features.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.features.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.features.subtitle }}
      </p>
      <div class="mt-6 mx-auto w-20 h-1 bg-indigo-600 rounded-full"></div>
    </div>
    
    <!-- Features grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for feature in sections.features.items %}
      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 transition-all duration-300 hover:shadow-lg hover:border-indigo-200 group" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}">
        <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600 mb-6 transition-all duration-300 group-hover:bg-indigo-600 group-hover:text-white">
          <i class="{{ feature.icon }}" aria-hidden="true"></i>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-3 transition-colors duration-300 group-hover:text-indigo-600">{{ feature.title }}</h3>
        <p class="text-gray-600">{{ feature.subtitle }}</p>
        
        <!-- Feature badge if available -->
        {% if feature.badge %}
        <div class="mt-4 inline-block px-3 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700">
          {{ feature.badge }}
        </div>
        {% endif %}
        
        <!-- Feature status if available -->
        {% if feature.status %}
        <div class="mt-2 text-sm text-indigo-600 font-medium">
          {{ feature.status }}
        </div>
        {% endif %}
        
        <!-- Feature benefits if available -->
        {% if feature.benefits %}
        <ul class="mt-4 space-y-2">
          {% for benefit in feature.benefits %}
          <li class="flex items-start">
            <svg class="w-5 h-5 text-indigo-500 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span class="text-gray-600">{{ benefit }}</span>
          </li>
          {% endfor %}
        </ul>
        {% endif %}
        
        <!-- Feature media if available -->
        {% if feature.media %}
        <div class="mt-6 rounded-lg overflow-hidden">
          <img 
            src="{{ feature.media.src }}" 
            alt="{{ feature.media.alt }}" 
            class="w-full h-auto object-cover transition-transform duration-500 ease-out group-hover:scale-105"
            loading="lazy"
          >
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
</section>
