<section
  id="cta"
  class="relative py-32 overflow-hidden"
  style="
    background: {{ sections.cta.background.gradient | default('none') }}
  "
>
  <div class="absolute inset-0">
    {% if sections.cta.background.overlay %}
    <div
      class="absolute inset-0 bg-gradient-to-r from-primary/60 to-primary/20"
    ></div>
    {% endif %} {% if sections.cta.background.media %}
    <img
      src="{{sections.cta.background.media.src}}"
      class="w-full h-full object-cover"
      alt="CTA Background"
    />
    {% endif %}
  </div>
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid md:grid-cols-2 gap-12 items-center">
      <div>
        <h2 class="text-5xl font-bold text-white mb-6">
          {{ sections.cta.title }}
        </h2>
        <p class="text-xl text-white/90 mb-8">{{ sections.cta.description }}</p>
        <div class="flex gap-4">
          {% if sections.cta.ctaButtons %} {% for button in
          sections.cta.ctaButtons %}
          <button
            class="bg-white text-primary px-8 py-4 !rounded-button text-lg hover:bg-gray-100 whitespace-nowrap"
            href="#"
          >
            {{ button.text }}
          </button>
          {% endfor %} {% endif %}
        </div>
        {% if sections.cta.stats %}
        <div class="mt-12 flex items-center gap-8">
          {% for stat in sections.cta.stats %}
          <div>
            <div class="text-4xl font-bold text-white">{{ stat.value }}</div>
            <div class="text-white/80">{{ stat.label }}</div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      <div class="relative">
        {% if sections.cta.featuredContent %} {% if
        sections.cta.featuredContent.type == 'image' %}
        <img
          src="{{ sections.cta.featuredContent.media.src }}"
          class="rounded-lg shadow-2xl"
          alt="{{ sections.cta.featuredContent.media.alt }}"
        />
        {% elif sections.cta.featuredContent.type == 'video' %}
        <div
          class="relative aspect-video rounded-xl overflow-hidden shadow-2xl"
        >
          <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 %} {% endif %} {% if sections.cta.featuredContent.badge %}
        <div
          class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-xl"
        >
          <div class="flex items-center gap-4">
            {% if sections.cta.featuredContent.badge.icon %}
            <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>
            {% endif %}
            <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>
