<section id="cta" class="py-24 bg-gray-50 relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-secondary/5"></div>
  
  <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <div class="space-y-8" data-aos="fade-up">
      {% if sections.cta.badge %}
      <div class="inline-flex items-center px-4 py-2 bg-primary/10 border border-primary/20 rounded-lg">
        <div class="w-2 h-2 bg-primary rounded-full mr-3"></div>
        <span class="text-primary font-medium">{{ sections.cta.badge }}</span>
      </div>
      {% endif %}
      
      <h2 class="text-4xl lg:text-5xl font-light text-gray-900 leading-tight">
        {{ sections.cta.title }}
        {% if sections.cta.highlight %}
        <span class="block text-primary">{{ sections.cta.highlight }}</span>
        {% endif %}
      </h2>
      
      <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
        {{ sections.cta.description }}
      </p>
      
      {% if sections.cta.buttons %}
      <div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
        {% for button in sections.cta.buttons %}
        <a href="{{ button.url }}" 
           class="bg-primary text-white px-8 py-4 rounded-lg font-medium hover:bg-primary/90 transition-colors duration-300 inline-flex items-center justify-center gap-3">
          {% if button.icon %}
          <i class="{{ button.icon | default('ri-arrow-right-line') }}"></i>
          {% endif %}
          {{ button.label }}
        </a>
        {% endfor %}
      </div>
      {% endif %}
      
      {% if sections.cta.trustIndicators %}
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 pt-16 border-t border-gray-200">
        {% for indicator in sections.cta.trustIndicators %}
        <div class="text-center">
          <div class="text-3xl font-light text-gray-900 mb-1">{{ indicator.value }}</div>
          <div class="text-gray-600 text-sm uppercase tracking-wide">{{ indicator.label }}</div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
      
      {% if sections.cta.guarantees %}
      <div class="grid md:grid-cols-3 gap-8 pt-16">
        {% for guarantee in sections.cta.guarantees %}
        <div class="flex items-center gap-4 justify-center">
          <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
            <i class="{{ guarantee.icon | default('ri-shield-check-line') }} text-primary"></i>
          </div>
          <div class="text-left">
            <div class="font-medium text-gray-900">{{ guarantee.title }}</div>
            <div class="text-gray-600 text-sm">{{ guarantee.description }}</div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</section>