<section id="cta" class="py-20 relative overflow-hidden">
  <!-- Background gradient -->
  <div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-rose-500"></div>
  
  <!-- Background pattern -->
  <div class="absolute inset-0 opacity-10">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="honeycomb-cta" width="56" height="100" patternUnits="userSpaceOnUse" patternTransform="scale(2) rotate(0)">
          <path d="M28 66L0 50L0 16L28 0L56 16L56 50L28 66Z M28 33L56 16L56 50L28 66L0 50L0 16L28 0L56 16L28 33Z" stroke="rgba(255, 255, 255, 0.3)" fill="none"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#honeycomb-cta)"/>
    </svg>
  </div>
  
  <!-- Floating elements -->
  <div class="absolute top-1/4 right-1/4 w-64 h-64 bg-white/10 rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
  <div class="absolute bottom-1/3 left-1/4 w-80 h-80 bg-white/10 rounded-full mix-blend-overlay filter blur-3xl animate-float animation-delay-4000"></div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <!-- Left content column -->
      <div class="text-white space-y-8" data-animate="feature" data-delay="100">
        <h2 class="text-4xl font-bold" id="cta-heading-v6">{{ sections.cta.title }}</h2>
        
        <p class="text-xl text-white/90">{{ sections.cta.description }}</p>
        
        <!-- Feature list -->
        {% if sections.cta.features %}
        <div class="space-y-4">
          {% for feature in sections.cta.features %}
          <div class="flex items-start group">
            <div class="flex-shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-white mt-1 group-hover:bg-white/30 transition-all duration-300">
              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div class="ml-4">
              <p class="text-white">{{ feature }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
        
        <!-- CTA buttons -->
        <div class="flex flex-wrap gap-4 pt-4">
          {% for button in sections.cta.ctaButtons %}
          <a 
            href="{{ button.url }}" 
            class="{% if button.style == 'filled' %}
              relative overflow-hidden group inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-xl text-amber-700 bg-white hover:bg-gray-50 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1
            {% else %}
              relative overflow-hidden group inline-flex items-center px-6 py-3 border border-white text-base font-medium rounded-xl text-white hover:bg-white/10 transition-all duration-300 hover:-translate-y-1
            {% endif %}"
          >
            <span class="relative z-10">{{ button.label }}</span>
            {% if button.style == 'filled' %}
            <span class="absolute inset-0 w-full h-full bg-white"></span>
            <span class="absolute inset-0 w-0 bg-amber-50 transition-all duration-300 ease-out group-hover:w-full"></span>
            {% endif %}
          </a>
          {% endfor %}
        </div>
      </div>
      
      <!-- Right image/form column -->
      {% if sections.cta.form %}
      <div class="bg-white rounded-xl shadow-xl p-8 relative" data-animate="feature" data-delay="300">
        <!-- Decorative elements -->
        <div class="absolute -top-6 -right-6 w-32 h-32 bg-amber-200/20 rounded-full -z-10"></div>
        <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-rose-200/20 rounded-full -z-10"></div>
        
        <h3 class="text-2xl font-bold text-gray-900 mb-6">{{ sections.cta.form.title }}</h3>
        
        <form class="space-y-4">
          {% for field in sections.cta.form.fields %}
          <div>
            <label for="cta-{{ field.id }}" class="block text-sm font-medium text-gray-700 mb-1">{{ field.label }}</label>
            <input 
              type="{{ field.type }}" 
              id="cta-{{ field.id }}" 
              name="{{ field.name }}" 
              class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-amber-500 focus:ring focus:ring-amber-200 focus:ring-opacity-50 transition-colors duration-300"
              placeholder="{{ field.placeholder }}"
              {% if field.required %}required{% endif %}
            >
          </div>
          {% endfor %}
          
          <div class="pt-2">
            <button 
              type="submit" 
              class="w-full px-6 py-3 border border-transparent text-base font-medium rounded-xl text-white bg-gradient-to-r from-amber-500 to-rose-500 hover:from-amber-600 hover:to-rose-600 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
            >
              {{ sections.cta.form.submitText | default('Get Started') }}
            </button>
          </div>
        </form>
      </div>
      {% elif sections.cta.image %}
      <div class="relative" data-animate="feature" data-delay="300">
        <div class="relative rounded-2xl overflow-hidden shadow-2xl border-8 border-white/20">
          <img 
            src="{{ sections.cta.image.src }}" 
            alt="{{ sections.cta.image.alt }}" 
            class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700"
          >
        </div>
        
        <!-- Decorative elements -->
        <div class="absolute -top-6 -right-6 w-32 h-32 bg-white/20 rounded-full -z-10 animate-float"></div>
        <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-white/20 rounded-full -z-10 animate-float animation-delay-2000"></div>
      </div>
      {% endif %}
    </div>
  </div>
  
  <style>
    /* Animations matching about v5 */
    @keyframes float {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(20px, -30px) scale(1.05); }
      66% { transform: translate(-10px, 20px) scale(0.95); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    
    .animate-float {
      animation: float 15s ease-in-out infinite;
    }
    
    .animation-delay-2000 {
      animation-delay: 2000ms;
    }
    
    .animation-delay-4000 {
      animation-delay: 4000ms;
    }
    
    [data-animate="feature"] {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Typing effect for heading matching about v5
      const heading = document.getElementById('cta-heading-v6');
      if (heading) {
        const text = heading.textContent.trim();
        heading.textContent = '';
        let i = 0;
        
        function typeWriter() {
          if (i < text.length) {
            heading.textContent += text.charAt(i);
            i++;
            setTimeout(typeWriter, 50);
          }
        }
        
        // Start typing after a short delay
        setTimeout(typeWriter, 800);
      }
      
      // Intersection Observer for scroll-triggered animations
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const delay = entry.target.dataset.delay || 0;
            setTimeout(() => {
              entry.target.style.opacity = '1';
              entry.target.style.transform = 'translateY(0)';
            }, delay);
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1 });
      
      // Observe all feature elements
      document.querySelectorAll('[data-animate="feature"]').forEach(el => {
        observer.observe(el);
      });
      
      // Parallax effect on scroll matching about v5
      window.addEventListener('scroll', function() {
        const scrollY = window.pageYOffset;
        const ctaSection = document.getElementById('cta');
        if (!ctaSection) return;
        
        // Apply parallax to floating elements
        const floatingElements = ctaSection.querySelectorAll('.absolute.rounded-full');
        floatingElements.forEach((el, index) => {
          const speed = 0.05 + (index * 0.02);
          const yPos = scrollY * speed;
          el.style.transform = `translate3d(0, ${yPos}px, 0)`;
        });
      });
    });
  </script>
</section>
