<section id="hero" class="min-h-screen flex items-center bg-gradient-to-br from-slate-900 via-gray-900 to-black 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="1"/%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 w-full">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <div class="space-y-8" data-aos="fade-right">
        {% if sections.hero.badge %}
        <div class="inline-flex items-center px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full">
          <div class="w-2 h-2 bg-primary rounded-full mr-3 animate-pulse"></div>
          <span class="text-white/90 font-medium text-sm">{{ sections.hero.badge }}</span>
        </div>
        {% endif %}
        
        <h1 class="text-5xl lg:text-7xl font-bold text-white leading-tight tracking-tight">
          {{ sections.hero.title }}
        </h1>
        
        {% if sections.hero.subtitles %}
        <div class="flex flex-wrap gap-3">
          {% for subtitle in sections.hero.subtitles %}
          <span class="px-3 py-1 bg-white/5 border border-white/10 rounded-md text-white/80 text-sm">
            {{ subtitle }}
          </span>
          {% endfor %}
        </div>
        {% endif %}
        
        <p class="text-xl text-white/70 leading-relaxed max-w-lg">
          {{ sections.hero.description }}
        </p>
        
        {% if sections.hero.ctaButtons %}
        <div class="flex flex-col sm:flex-row gap-4">
          {% for btn in sections.hero.ctaButtons %}
          <a href="{{ btn.url }}" 
             class="group {% if btn.style == 'filled' %}bg-primary text-white hover:bg-primary/90{% else %}bg-transparent text-white border border-white/30 hover:bg-white/10{% endif %} px-8 py-4 rounded-xl font-semibold transition-all duration-300 inline-flex items-center justify-center"
             {% if btn.ariaLabel %}aria-label="{{ btn.ariaLabel }}"{% endif %}>
            {{ btn.label }}
            <i class="ri-arrow-right-line ml-2 group-hover:translate-x-1 transition-transform"></i>
          </a>
          {% endfor %}
        </div>
        {% endif %}
        
        {% if sections.hero.stats %}
        <div class="grid grid-cols-3 gap-8 pt-8 border-t border-white/10">
          {% for stat in sections.hero.stats %}
          <div>
            <div class="text-3xl font-bold text-white mb-1">{{ stat.value }}</div>
            <div class="text-sm text-white/60">{{ stat.label }}</div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      
      <div class="relative" data-aos="fade-left" data-aos-delay="200">
        {% if sections.hero.heroImage %}
        <div class="relative">
          <div class="absolute -inset-4 bg-gradient-to-r from-primary/30 to-secondary/30 blur-3xl opacity-50"></div>
          <img src="{{ sections.hero.heroImage.src }}" 
               alt="{{ sections.hero.heroImage.alt }}" 
               class="relative w-full h-auto rounded-2xl shadow-2xl border border-white/10"
               loading="{% if sections.hero.heroImage.lazyLoad %}lazy{% else %}eager{% endif %}">
          
          <div class="absolute top-4 right-4 w-4 h-4 bg-primary rounded-full animate-ping"></div>
          <div class="absolute bottom-4 left-4 w-3 h-3 bg-secondary rounded-full"></div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>