<section id="hero" class="py-16 bg-gradient-to-r from-blue-50 to-blue-100">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center space-y-6" data-aos="fade-up">
      {% if sections.hero.badge %}
      <div class="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-600 rounded-full shadow-sm">
        <span class="text-base mr-2">🎉</span>
        <span class="font-semibold">{{ sections.hero.badge }}</span>
      </div>
      {% endif %}
      
      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
        {{ sections.hero.title }}
        {% if sections.testimonials.featured %}
        <span class="block text-blue-600">"{{ sections.testimonials.featured.quote | truncate(50) }}"</span>
        {% endif %}
      </h1>
      
      {% if sections.hero.subtitles %}
      <div class="flex flex-wrap justify-center gap-3">
        {% for subtitle in sections.hero.subtitles %}
        <span class="px-4 py-2 bg-white text-gray-700 rounded-full shadow-sm border border-gray-200 text-sm">
          {{ subtitle }}
        </span>
        {% endfor %}
      </div>
      {% endif %}
      
      <p class="text-base text-gray-600 max-w-2xl mx-auto">
        {{ sections.hero.description }}
      </p>
      
      {% if sections.hero.ctaButtons %}
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        {% for btn in sections.hero.ctaButtons %}
        <a href="{{ btn.url }}" 
           class="{% if btn.style == 'filled' %}bg-blue-600 text-white hover:bg-blue-700 shadow-md hover:shadow-lg{% else %}bg-white text-blue-600 border-2 border-blue-600 hover:bg-blue-50{% endif %} px-6 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105"
           {% if btn.ariaLabel %}aria-label="{{ btn.ariaLabel }}"{% endif %}>
          {{ btn.label }}
        </a>
        {% endfor %}
      </div>
      {% endif %}
      
      {% if sections.hero.heroImage %}
      <div class="relative max-w-lg mx-auto mt-8" data-aos="fade-up" data-aos-delay="300">
        <div class="relative">
          <img src="{{ sections.hero.heroImage.src }}" 
               alt="{{ sections.hero.heroImage.alt }}" 
               class="w-full h-auto rounded-xl shadow-md"
               loading="{% if sections.hero.heroImage.lazyLoad %}lazy{% else %}eager{% endif %}">
          <div class="absolute -top-4 -right-4 w-6 h-6 bg-orange-400 rounded-full"></div>
          <div class="absolute -bottom-4 -left-4 w-6 h-6 bg-blue-400 rounded-full"></div>
        </div>
      </div>
      {% endif %}
      
      {% if sections.hero.stats %}
      <div class="grid grid-cols-3 gap-6 max-w-md mx-auto pt-6">
        {% for stat in sections.hero.stats %}
        <div class="text-center p-4 bg-white rounded-lg shadow-sm">
          <div class="text-xl font-semibold text-blue-600">{{ stat.value }}</div>
          <div class="text-sm text-gray-600">{{ stat.label }}</div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</section>
