<section id="stats" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-indigo-50 to-blue-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="stats-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(#stats-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.stats.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
        {{ sections.stats.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.stats.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.stats.subtitle }}
      </p>
    </div>
    
    <!-- Stats layout options -->
    {% if sections.stats.layout == 'grid' %}
    <!-- Grid layout -->
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
      {% for stat in sections.stats.items %}
      <div 
        class="bg-white rounded-xl shadow-md p-8 border border-gray-100 transition-all duration-300 hover:shadow-lg hover:border-indigo-200 text-center"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 100 }}"
      >
        <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mx-auto mb-6">
          <i class="{{ stat.icon }} text-2xl" aria-hidden="true"></i>
        </div>
        <div class="text-4xl font-bold text-gray-900 mb-2">{{ stat.value }}</div>
        <p class="text-gray-600">{{ stat.label }}</p>
        {% if stat.description %}
        <p class="text-sm text-gray-500 mt-2">{{ stat.description }}</p>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    
    {% elif sections.stats.layout == 'simple' %}
    <!-- Simple layout -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
      {% for stat in sections.stats.items %}
      <div 
        class="text-center"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 100 }}"
      >
        <div class="text-4xl md:text-5xl font-bold text-indigo-600 mb-2">{{ stat.value }}</div>
        <p class="text-gray-600 font-medium">{{ stat.label }}</p>
      </div>
      {% endfor %}
    </div>
    
    {% elif sections.stats.layout == 'cards_with_icon' %}
    <!-- Cards with icon layout -->
    <div class="grid md:grid-cols-3 gap-8">
      {% for stat in sections.stats.items %}
      <div 
        class="bg-white rounded-xl shadow-md p-8 border border-gray-100 transition-all duration-300 hover:shadow-lg hover:border-indigo-200"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 100 }}"
      >
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
            <i class="{{ stat.icon }} text-xl" aria-hidden="true"></i>
          </div>
          <div>
            <div class="text-3xl font-bold text-gray-900">{{ stat.value }}</div>
            <p class="text-gray-600">{{ stat.label }}</p>
          </div>
        </div>
        {% if stat.description %}
        <p class="text-gray-600 mt-4">{{ stat.description }}</p>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    
    {% else %}
    <!-- Default banner layout -->
    <div class="bg-indigo-600 rounded-2xl shadow-xl p-8 md:p-12">
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
        {% for stat in sections.stats.items %}
        <div 
          class="text-center"
          data-aos="fade-up" 
          data-aos-delay="{{ loop.index0 * 100 }}"
        >
          <div class="text-4xl md:text-5xl font-bold text-white mb-2">{{ stat.value }}</div>
          <p class="text-indigo-100 font-medium">{{ stat.label }}</p>
          {% if stat.description %}
          <p class="text-indigo-200 text-sm mt-2">{{ stat.description }}</p>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    
    <!-- Additional content if available -->
    {% if sections.stats.content %}
    <div class="mt-24 grid lg:grid-cols-2 gap-16 items-center" data-aos="fade-up" data-aos-delay="300">
      <!-- Content column -->
      <div class="space-y-6">
        <h3 class="text-3xl font-bold text-gray-900">{{ sections.stats.content.title }}</h3>
        <p class="text-lg text-gray-600">{{ sections.stats.content.description }}</p>
        
        <!-- Feature list if available -->
        {% if sections.stats.content.features %}
        <ul class="space-y-4 mt-6">
          {% for feature in sections.stats.content.features %}
          <li class="flex items-start">
            <div class="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3">
              <svg class="w-4 h-4" 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>
            </div>
            <div>
              <h4 class="text-lg font-medium text-gray-900">{{ feature.title }}</h4>
              <p class="text-gray-600">{{ feature.description }}</p>
            </div>
          </li>
          {% endfor %}
        </ul>
        {% endif %}
        
        <!-- CTA button if available -->
        {% if sections.stats.content.cta_url and sections.stats.content.cta_text %}
        <div class="mt-8">
          <a 
            href="{{ sections.stats.content.cta_url }}" 
            class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors duration-300"
          >
            {{ sections.stats.content.cta_text }}
            <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </a>
        </div>
        {% endif %}
      </div>
      
      <!-- Media column -->
      <div class="relative">
        {% if sections.stats.content.image %}
        <div class="rounded-2xl overflow-hidden shadow-xl">
          <img 
            src="{{ sections.stats.content.image }}" 
            alt="{{ sections.stats.content.title }}" 
            class="w-full h-auto"
            loading="lazy"
          >
        </div>
        
        <!-- Decorative elements -->
        <div class="absolute -top-6 -right-6 w-32 h-32 bg-indigo-200 rounded-full opacity-70 -z-10"></div>
        <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-blue-200 rounded-full opacity-70 -z-10"></div>
        {% endif %}
      </div>
    </div>
    {% endif %}
    
    <!-- Chart visualization if available -->
    {% if sections.stats.chart %}
    <div class="mt-24" data-aos="fade-up" data-aos-delay="300">
      <div class="text-center max-w-3xl mx-auto mb-12">
        <h3 class="text-3xl font-bold text-gray-900 mb-4">{{ sections.stats.chart.title }}</h3>
        <p class="text-lg text-gray-600">{{ sections.stats.chart.description }}</p>
      </div>
      
      <div class="bg-white rounded-xl shadow-md p-8 border border-gray-100">
        <div class="aspect-[16/9] w-full bg-gray-50 rounded-lg flex items-center justify-center">
          <!-- Chart placeholder - actual chart would be rendered by JavaScript -->
          <div class="text-center text-gray-500">
            <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mx-auto mb-4">
              <i class="ri-bar-chart-line text-2xl" aria-hidden="true"></i>
            </div>
            <p>{{ sections.stats.chart.placeholder_text|default('Chart visualization will be rendered here') }}</p>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</section>
