<section id="community" class="py-32 bg-slate-900 text-white relative overflow-hidden">
  <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.03"%3E%3Ccircle cx="30" cy="30" r="2"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-40"></div>
  
  <div class="relative 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-white mb-6">
        {{ sections.community.title }}
      </h2>
      <p class="text-xl text-white/70 max-w-3xl mx-auto">
        {{ sections.community.subtitle }}
      </p>
    </div>
    
    {% if sections.community.liveActivity %}
    <div class="relative mb-16" data-aos="pulse">
      <div class="bg-white/10 backdrop-blur-lg p-8 rounded-2xl border border-white/20 shadow-xl max-w-2xl mx-auto text-center">
        <div class="flex items-center justify-center gap-3 mb-4">
          <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse shadow-lg"></div>
          <span class="text-xl font-bold text-white">{{ sections.community.liveActivity.onlineMembers }} members online</span>
        </div>
        <p class="text-white/80">{{ sections.community.liveActivity.recentJoiner }} from {{ sections.community.liveActivity.location }} just joined</p>
      </div>
    </div>
    {% endif %}
    
    {% if sections.community.stats %}
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
      {% for stat in sections.community.stats %}
      <div class="group text-center" data-aos="zoom-in" data-aos-delay="{{ loop.index0 * 100 }}">
        <div class="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-all duration-300 hover:scale-105">
          <div class="w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:rotate-6 transition-transform duration-300">
            <i class="{{ stat.icon | default('ri-user-line') }} text-white text-2xl"></i>
          </div>
          
          <div class="text-4xl font-bold text-white mb-2 group-hover:scale-110 transition-transform duration-300">{{ stat.value }}</div>
          <div class="text-sm font-semibold text-white/80 mb-1">{{ stat.label }}</div>
          <p class="text-xs text-white/60">{{ stat.description }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    
    {% if sections.community.highlights %}
    <div class="grid md:grid-cols-3 gap-8 mb-16">
      {% for highlight in sections.community.highlights %}
      <div class="group bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-all duration-300" data-aos="slide-up" data-aos-delay="{{ loop.index0 * 100 }}">
        <div class="w-14 h-14 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300">
          <i class="{{ highlight.icon | default('ri-chat-3-line') }} text-white text-xl"></i>
        </div>
        
        <h3 class="text-xl font-bold text-white mb-4">{{ highlight.title }}</h3>
        <p class="text-white/70 mb-4 leading-relaxed">{{ highlight.description }}</p>
        <div class="text-sm text-primary font-semibold">{{ highlight.members }} members</div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    
    {% if sections.community.cta %}
    <div class="text-center" data-aos="zoom-in">
      <a href="{{ sections.community.cta.url }}" 
         class="inline-block bg-gradient-to-r from-primary to-secondary text-white px-10 py-4 rounded-2xl font-bold shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
        {{ sections.community.cta.label }}
      </a>
    </div>
    {% endif %}
  </div>
</section>