<section id="contact" class="py-24 bg-gradient-to-br from-rose-50 via-amber-50 to-yellow-50 relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 overflow-hidden">
    <!-- Honeycomb pattern -->
    <div class="absolute inset-0 opacity-10">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="honeycomb-contact-v6" 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(245, 158, 11, 0.3)" fill="none"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#honeycomb-contact-v6)"/>
      </svg>
    </div>
    
    <!-- Floating elements -->
    <div class="absolute top-1/4 right-1/5 w-64 h-64 bg-gradient-to-br from-amber-200/30 to-rose-200/30 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-float"></div>
    <div class="absolute bottom-1/3 left-1/4 w-80 h-80 bg-gradient-to-br from-rose-200/30 to-yellow-200/30 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-float animation-delay-4000"></div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16" data-animate="init">
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-800 mb-4">
        <span class="w-2 h-2 rounded-full mr-2 bg-amber-500 animate-pulse"></span>
        {{ sections.contact.badge | default('Get In Touch') }}
      </span>
      <h2 id="contact-heading-v6" class="text-4xl font-bold text-slate-800 mb-6">{{ sections.contact.title }}</h2>
      <div class="w-24 h-1 bg-gradient-to-r from-amber-400 to-rose-400 mx-auto mb-6 rounded-full" data-animate="underline"></div>
      <p class="text-xl text-slate-600">{{ sections.contact.subtitle }}</p>
    </div>
    
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <!-- Left content column -->
      <div class="space-y-8" data-animate="feature" data-delay="100">
        <!-- Contact info -->
        <div class="space-y-6">
          {% if sections.contact.address %}
          <div class="flex items-start group">
            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 group-hover:from-amber-200 group-hover:to-rose-200 transition-all duration-300 shadow-sm">
              <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </div>
            <div class="ml-4">
              <h3 class="text-lg font-medium text-slate-800">Address</h3>
              <p class="mt-1 text-slate-600">{{ sections.contact.address }}</p>
            </div>
          </div>
          {% endif %}
          
          {% if sections.contact.email %}
          <div class="flex items-start group">
            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 group-hover:from-amber-200 group-hover:to-rose-200 transition-all duration-300 shadow-sm">
              <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
            <div class="ml-4">
              <h3 class="text-lg font-medium text-slate-800">Email</h3>
              <p class="mt-1 text-slate-600">{{ sections.contact.email }}</p>
            </div>
          </div>
          {% endif %}
          
          {% if sections.contact.phone %}
          <div class="flex items-start group">
            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 group-hover:from-amber-200 group-hover:to-rose-200 transition-all duration-300 shadow-sm">
              <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
            </div>
            <div class="ml-4">
              <h3 class="text-lg font-medium text-slate-800">Phone</h3>
              <p class="mt-1 text-slate-600">{{ sections.contact.phone }}</p>
            </div>
          </div>
          {% endif %}
        </div>
        
        <!-- Social links -->
        {% if sections.contact.socialLinks %}
        <div class="pt-6 bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-amber-100/50 p-8 hover:shadow-xl transition-all duration-300 hover:border-amber-300/50">
          <h3 class="text-lg font-medium text-slate-800 mb-6">{{ sections.contact.socialLinks.title | default('Follow Us') }}</h3>
          <div class="flex flex-wrap gap-4">
            {% for social in sections.contact.socialLinks.links %}
            <a href="{{ social.url }}" class="w-12 h-12 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 hover:from-amber-200 hover:to-rose-200 transition-all duration-300 hover:-translate-y-1 shadow-sm" aria-label="{{ social.platform }}">
              <i class="{{ social.icon }} text-lg"></i>
            </a>
            {% endfor %}
          </div>
        </div>
        {% endif %}
        
        <!-- Map or image -->
        {% if sections.contact.map %}
        <div class="rounded-xl overflow-hidden shadow-lg border border-amber-100/50 hover:shadow-xl transition-all duration-300 hover:border-amber-300/50">
          <iframe 
            src="{{ sections.contact.map.embedUrl }}" 
            width="100%" 
            height="250" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade"
            class="w-full"
          ></iframe>
        </div>
        {% endif %}
      </div>
      
      <!-- Right form column -->
      <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-amber-100/50 p-8 relative hover:shadow-xl transition-all duration-300 hover:border-amber-300/50" data-animate="feature" data-delay="300">
        <!-- Decorative elements -->
        <div class="absolute -top-6 -right-6 w-32 h-32 bg-gradient-to-bl from-amber-200 to-rose-200 rounded-full opacity-70 -z-10 animate-float"></div>
        
        <form id="contactForm" class="space-y-6">
          {% for field in sections.contact.form.fields %}
          <div>
            <label for="{{ field.id }}" class="block text-sm font-medium text-slate-700 mb-1">{{ field.label }}</label>
            
            {% if field.type == 'textarea' %}
            <textarea 
              id="{{ field.id }}" 
              name="{{ field.name }}" 
              rows="{{ field.rows | default(4) }}" 
              class="w-full px-4 py-3 rounded-lg border border-amber-200/50 focus:border-amber-500 focus:ring focus:ring-amber-200 focus:ring-opacity-50 transition-colors duration-300 bg-white/90"
              placeholder="{{ field.placeholder }}"
              {% if field.required %}required{% endif %}
            ></textarea>
            {% else %}
            <input 
              type="{{ field.type }}" 
              id="{{ field.id }}" 
              name="{{ field.name }}" 
              class="w-full px-4 py-3 rounded-lg border border-amber-200/50 focus:border-amber-500 focus:ring focus:ring-amber-200 focus:ring-opacity-50 transition-colors duration-300 bg-white/90"
              placeholder="{{ field.placeholder }}"
              {% if field.required %}required{% endif %}
            >
            {% 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-lg 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transform hover:-translate-y-1"
            >
              {{ sections.contact.form.submitText | default('Send Message') }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <!-- Success message modal (hidden by default) -->
  <div id="successModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl p-8 max-w-md mx-auto relative animate-fade-in-up">
      <button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
      <div class="text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-amber-500 to-rose-500 rounded-full mx-auto flex items-center justify-center mb-6">
          <svg class="w-8 h-8 text-white" 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>
        <h3 class="text-2xl font-bold text-slate-800 mb-2">Message Sent!</h3>
        <p class="text-slate-600 mb-6">Thank you for contacting us. We'll get back to you shortly.</p>
        <button id="confirmModal" class="px-6 py-2 bg-gradient-to-r from-amber-500 to-rose-500 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          Close
        </button>
      </div>
    </div>
  </div>
  
  <style>
    /* Animations matching about v5 */
    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @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-4000 {
      animation-delay: 4000ms;
    }
    
    .animate-fade-in-up {
      animation: fade-in-up 0.5s ease-out forwards;
    }
    
    [data-animate="init"] {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    [data-animate="underline"] {
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.6s ease-out;
    }
    
    [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('contact-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);
      }
      
      // Custom animation system
      const animateElements = document.querySelectorAll('[data-animate]');
      
      // Initial animation for header
      setTimeout(() => {
        const headerElement = document.querySelector('[data-animate="init"]');
        if (headerElement) {
          headerElement.style.opacity = '1';
          headerElement.style.transform = 'translateY(0)';
        }
        
        // Animate underline after header appears
        setTimeout(() => {
          const underlineElement = document.querySelector('[data-animate="underline"]');
          if (underlineElement) {
            underlineElement.style.transform = 'scaleX(1)';
          }
        }, 500);
      }, 300);
      
      // Intersection Observer for scroll-triggered animations
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.5 });
      
      animateElements.forEach((element) => {
        observer.observe(element);
      });
    });
  </script>
</section>
