<section
  id="cta"
  class="relative py-28 overflow-hidden bg-gray-100 font-inter"
  aria-labelledby="cta-heading"
>
  <div class="absolute inset-0">
    {% if sections.cta.background.overlay %}
    <div
      class="absolute inset-0 bg-gradient-to-r from-indigo-500/20 to-indigo-300/20"
    ></div>
    {% endif %} {% if sections.cta.background.media %}
    <img
      src="{{ sections.cta.background.media.src }}"
      class="w-full h-full object-cover opacity-25"
      alt="CTA Background"
    />
    {% endif %}
  </div>
  <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white rounded-xl shadow-xl p-8 md:p-12 max-w-4xl mx-auto">
      <h2
        id="cta-heading"
        class="text-4xl sm:text-5xl font-bold text-gray-900 mb-6 text-center"
      >
        {{ sections.cta.title }}
      </h2>
      <p class="text-lg text-gray-600 mb-8 text-center max-w-2xl mx-auto">
        {{ sections.cta.description }}
      </p>
      <div class="flex justify-center gap-4 flex-wrap">
        {% if sections.cta.ctaButtons %} {% for button in
        sections.cta.ctaButtons %}
        <button
          class="bg-indigo-500 text-white px-6 py-3 rounded-md text-base font-medium hover:bg-indigo-600 transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          href="#"
        >
          {{ button.text }}
        </button>
        {% endfor %} {% endif %}
      </div>
      {% if sections.cta.stats %}
      <div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6">
        {% for stat in sections.cta.stats %}
        <div class="text-center">
          <div class="text-3xl font-bold text-gray-900">{{ stat.value }}</div>
          <div class="text-gray-600 text-sm">{{ stat.label }}</div>
        </div>
        {% endfor %}
      </div>
      {% endif %} {% if sections.cta.featuredContent %}
      <div class="mt-12 relative">
        {% if sections.cta.featuredContent.type == 'image' %}
        <img
          src="{{ sections.cta.featuredContent.media.src }}"
          class="rounded-xl shadow-md mx-auto max-w-full transform hover:scale-105 transition-transform duration-600 ease-out"
          alt="{{ sections.cta.featuredContent.media.alt }}"
        />
        {% elif sections.cta.featuredContent.type == 'video' %}
        <div
          class="relative aspect-video rounded-xl overflow-hidden shadow-md mx-auto max-w-full"
        >
          <video
            class="w-full h-full object-cover"
            autoplay
            loop
            muted
            playsinline
          >
            <source
              src="{{ sections.cta.featuredContent.media.src }}"
              type="video/mp4"
            />
            Your browser does not support the video tag.
          </video>
        </div>
        {% endif %} {% if sections.cta.featuredContent.badge %}
        <div class="absolute -top-4 -right-4 bg-white p-3 rounded-md shadow-md">
          <div class="flex items-center gap-3">
            {% if sections.cta.featuredContent.badge.icon %}
            <div
              class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center"
            >
              <i
                class="{{ sections.cta.featuredContent.badge.icon }} text-lg text-indigo-500"
              ></i>
            </div>
            {% endif %}
            <div>
              <div class="font-semibold text-gray-900 text-sm">
                {{ sections.cta.featuredContent.badge.title }}
              </div>
              <div class="text-xs text-gray-600">
                {{ sections.cta.featuredContent.badge.description }}
              </div>
            </div>
          </div>
        </div>
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>
</section>
