<section id="hero" class="relative min-h-screen overflow-hidden bg-slate-900">
  <!-- Split design with image on right -->
  <div class="absolute top-0 right-0 w-1/2 h-full hidden lg:block">
    <div class="h-full w-full overflow-hidden">
      <img 
        src="{{ sections.hero.heroImage.src }}" 
        alt="Hero background" 
        class="h-full w-full object-cover object-center transform scale-110 hover:scale-105 transition-transform duration-700"
      >
      <div class="absolute inset-0 bg-gradient-to-l from-transparent via-slate-900/20 to-slate-900"></div>
    </div>
  </div>
  
  <!-- Mobile background overlay -->
  <div class="absolute inset-0 lg:hidden">
    <img 
      src="{{ sections.hero.heroImage.src }}" 
      alt="Hero background" 
      class="h-full w-full object-cover object-center"
    >
    <div class="absolute inset-0 bg-slate-900/70"></div>
  </div>

  <!-- Decorative elements -->
  <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
    <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/30 rounded-full blur-3xl"></div>
    <div class="absolute bottom-0 right-1/3 w-64 h-64 bg-indigo-500/20 rounded-full blur-3xl"></div>
  </div>

  <!-- Content container -->
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center min-h-screen py-20">
    <div class="max-w-xl lg:max-w-2xl text-white lg:text-left text-center">
      <!-- Animated badge -->
      <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary mb-6 border border-primary/20 animate-pulse">
        <span class="w-2 h-2 rounded-full bg-primary mr-2"></span>
        New Release
      </div>
      
      <!-- Main heading with gradient -->
      <h1 class="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">
        <span class="block text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400">
          {{ sections.hero.title }}
        </span>
      </h1>

      <!-- Subtitles with animated typing effect -->
      {%- if sections.hero.subtitles %}
      <div class="flex flex-wrap gap-2 mb-6 justify-center lg:justify-start">
        {%- for subtitle in sections.hero.subtitles %}
        <span class="text-xl text-slate-300 border-b-2 border-primary/50">{{ subtitle }}</span>
        {%- endfor %}
      </div>
      {%- endif %}

      <!-- Description with slightly larger text -->
      <p class="text-lg md:text-xl text-slate-300 mb-10 max-w-lg mx-auto lg:mx-0">
        {{ sections.hero.description }}
      </p>

      <!-- CTA buttons with hover effects -->
      <div class="flex flex-wrap gap-4 justify-center lg:justify-start">
        {%- for btn in sections.hero.ctaButtons %}
        <a
          href="{{ btn.url }}"
          {%- if btn.ariaLabel %} aria-label="{{ btn.ariaLabel }}" {%- endif %}
          class="group relative px-8 py-4 rounded-lg overflow-hidden {% if btn.size == 'lg' %}text-lg{% endif %} 
            {% if btn.style == 'filled' %} 
              bg-primary text-white
            {% elif btn.style == 'outline' %} 
              bg-transparent text-white border-2 border-white/30 hover:border-white/60
            {% endif %}
            transition-all duration-300 hover:shadow-lg hover:shadow-primary/20"
        >
          <span class="relative z-10">{{ btn.label }}</span>
          <span class="absolute inset-0 bg-gradient-to-r from-primary to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 {% if btn.style == 'outline' %}opacity-0 group-hover:opacity-20{% endif %}"></span>
        </a>
        {%- endfor %}
      </div>
      
      <!-- Social proof or stats -->
      <div class="mt-12 flex items-center gap-8 justify-center lg:justify-start">
        <div class="flex -space-x-2">
          <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
          <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
          <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
          <div class="flex items-center justify-center w-10 h-10 rounded-full border-2 border-white bg-slate-700 text-xs font-medium">+5k</div>
        </div>
        <p class="text-sm text-slate-400">Trusted by thousands of customers worldwide</p>
      </div>
    </div>
  </div>
</section>