<section id="cta" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-700"></div>
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.05]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="cta-dots" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="1" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#cta-dots)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto text-center" data-aos="fade-up">
      <!-- Badge if available -->
      {% if sections.cta.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-white/20 text-white mb-4">
        {{ sections.cta.badge }}
      </span>
      {% endif %}
      
      <!-- Main heading -->
      <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
        {{ sections.cta.title }}
      </h2>
      
      <!-- Description -->
      <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">
        {{ sections.cta.description }}
      </p>
      
      <!-- CTA buttons -->
      <div class="flex flex-col sm:flex-row gap-5 justify-center">
        {% for button in sections.cta.buttons %}
        <a 
          href="{{ button.url }}" 
          class="inline-flex items-center justify-center px-8 py-4 rounded-xl font-medium transition-all duration-300 {% if button.style == 'primary' %}bg-white text-indigo-600 hover:bg-indigo-50{% else %}bg-indigo-700/50 text-white border border-indigo-500 hover:bg-indigo-700/80{% endif %}"
        >
          {% if button.icon %}
          <i class="{{ button.icon }} mr-2" aria-hidden="true"></i>
          {% endif %}
          {{ button.label }}
        </a>
        {% endfor %}
      </div>
      
      <!-- Social proof if available -->
      {% if sections.cta.social_proof %}
      <div class="mt-12">
        <p class="text-indigo-200 mb-6">{{ sections.cta.social_proof.title }}</p>
        <div class="flex flex-wrap justify-center gap-8">
          {% for logo in sections.cta.social_proof.logos %}
          <img 
            src="{{ logo.src }}" 
            alt="{{ logo.alt }}" 
            class="h-8 md:h-10 opacity-80"
            loading="lazy"
          >
          {% endfor %}
        </div>
      </div>
      {% endif %}
      
      <!-- Trust indicators if available -->
      {% if sections.cta.trust_indicators %}
      <div class="mt-12 grid sm:grid-cols-3 gap-6">
        {% for indicator in sections.cta.trust_indicators %}
        <div class="bg-white/10 rounded-lg p-6 backdrop-blur-sm">
          <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-white mx-auto mb-4">
            <i class="{{ indicator.icon }}" aria-hidden="true"></i>
          </div>
          <h3 class="text-lg font-medium text-white mb-2">{{ indicator.title }}</h3>
          <p class="text-indigo-100 text-sm">{{ indicator.description }}</p>
        </div>
        {% endfor %}
      </div>
      {% endif %}
      
      <!-- Guarantees if available -->
      {% if sections.cta.guarantees %}
      <div class="mt-12 flex flex-wrap justify-center gap-6">
        {% for guarantee in sections.cta.guarantees %}
        <div class="flex items-center bg-white/10 rounded-full px-6 py-2 backdrop-blur-sm">
          <i class="{{ guarantee.icon }} text-white mr-2" aria-hidden="true"></i>
          <span class="text-white">{{ guarantee.text }}</span>
        </div>
        {% endfor %}
      </div>
      {% endif %}
      
      <!-- Features highlights if available -->
      {% if sections.cta.features_highlights %}
      <div class="mt-16">
        <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-6">
          {% for feature in sections.cta.features_highlights %}
          <div class="bg-white/10 rounded-lg p-6 backdrop-blur-sm text-center">
            <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-white mx-auto mb-4">
              <i class="{{ feature.icon }}" aria-hidden="true"></i>
            </div>
            <h3 class="text-lg font-medium text-white mb-2">{{ feature.title }}</h3>
            <p class="text-indigo-100 text-sm">{{ feature.description }}</p>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}
      
      <!-- Final message if available -->
      {% if sections.cta.final_message %}
      <div class="mt-12">
        <p class="text-xl text-white font-medium">{{ sections.cta.final_message }}</p>
      </div>
      {% endif %}
    </div>
  </div>
</section>
