<section
  id="cta"
  class="relative py-32 overflow-hidden bg-gradient-to-br from-primary/95 via-primary/80 to-secondary/90"
>
  <div class="absolute inset-0">
    <div
      class="absolute inset-0 bg-gradient-to-r from-primary/70 to-primary/30 mix-blend-overlay"
    ></div>
    {%- if sections.cta.background.media %}
    <img
      src="{{ sections.cta.background.media.src }}"
      class="w-full h-full object-cover opacity-20"
      alt="{{ sections.cta.background.media.alt }}"
    />
    {%- endif %}
  </div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-12 items-center">
      {# — Left Column: Text, Buttons & Stats — #}
      <div class="space-y-8">
        <h2
          class="text-4xl lg:text-5xl font-extrabold text-white leading-tight tracking-tight"
        >
          {{ sections.cta.title }}
        </h2>
        <p class="text-lg lg:text-xl text-white/90 leading-relaxed">
          {{ sections.cta.description }}
        </p>

        <div class="flex flex-wrap gap-4">
          {%- for btn in sections.cta.ctaButtons %}
          <a
            href="#"
            class="inline-block bg-white text-primary px-8 py-3 rounded-full text-lg font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 whitespace-nowrap"
          >
            {{ btn.text }}
          </a>
          {%- endfor %}
        </div>

        <div class="grid grid-cols-2 gap-6 mt-12">
          {%- for stat in sections.cta.stats %}
          <div class="bg-white/10 backdrop-blur-sm p-4 rounded-xl">
            <div class="text-3xl font-bold text-white">{{ stat.value }}</div>
            <div class="text-white/80 text-sm">{{ stat.label }}</div>
          </div>
          {%- endfor %}
        </div>
      </div>

      {# — Right Column: Featured Image & Badge — #}
      <div class="relative">
        {%- if sections.cta.featuredContent.media %}
        <img
          src="{{ sections.cta.featuredContent.media.src }}"
          class="rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500"
          alt="{{ sections.cta.featuredContent.media.alt }}"
        />
        {%- endif %} {%- if sections.cta.featuredContent.badge %}
        <div
          class="absolute -bottom-8 -right-8 bg-white p-5 rounded-2xl shadow-2xl border border-gray-100 transform rotate-0 hover:rotate-3 transition-transform duration-300"
        >
          <div class="flex items-center gap-4">
            <div
              class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center"
            >
              <i
                class="{{ sections.cta.featuredContent.badge.icon }} text-2xl text-primary"
              ></i>
            </div>
            <div>
              <div class="font-semibold text-gray-900">
                {{ sections.cta.featuredContent.badge.title }}
              </div>
              <div class="text-sm text-gray-600">
                {{ sections.cta.featuredContent.badge.description }}
              </div>
            </div>
          </div>
        </div>
        {%- endif %}
      </div>
    </div>
  </div>
</section>
