<section
  id="contact"
  class="py-32 bg-gradient-to-b from-gray-50 to-{{ settings.theme.colors.primary }}/5 relative overflow-hidden"
  aria-labelledby="contact-heading"
>
  <!-- Subtle background elements -->
  <div class="absolute inset-0 bg-pattern-light opacity-5"></div>
  <div class="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-bl from-gray-100 to-transparent opacity-70"></div>
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- Section header with elegant typography -->
    <div class="text-center mb-16">
      <span class="inline-block text-xs uppercase tracking-widest text-gray-500 mb-3" style="font-family: {{settings.fonts.body}}">Get In Touch</span>
      <h2 id="contact-heading" class="text-4xl font-light text-gray-900 mb-4" style="font-family: {{settings.fonts.heading}}">
        {{ sections.contact.title }}
      </h2>
      <div class="w-16 h-px bg-gray-300 mx-auto mb-6"></div>
      <p class="text-gray-600 font-light max-w-2xl mx-auto" style="font-family: {{settings.fonts.body}}">
        {{ sections.contact.subtitle }}
      </p>
    </div>
    
    <div class="relative max-w-6xl mx-auto">
      <!-- Main form card -->
      <div
        class="bg-white/80 backdrop-blur-md p-10 rounded-none shadow-sm border border-gray-100 max-w-3xl mx-auto transition-all duration-300 hover:shadow-md"
      >
        <form id="contactForm" class="grid gap-8">
          {% for item in sections.contact.form.fields %}
          <div>
            <label
              class="block text-sm uppercase tracking-wide text-gray-500 mb-2"
              for="{{ item.name }}"
              style="font-family: {{settings.fonts.body}}"
            >{{ item.label }}</label>
            
            {% if item.type == 'textarea' %}
            <textarea
              id="{{ item.name }}"
              name="{{ item.name }}"
              placeholder="{{ item.placeholder }}"
              class="w-full px-4 py-3 bg-white/90 rounded-none border border-gray-200 focus:border-gray-300 focus:ring-1 focus:ring-gray-300 outline-none text-gray-900 transition-all duration-300 ease-out"
              style="font-family: {{settings.fonts.body}}"
              {% if item.required %}required{% endif %}
              rows="5"
            ></textarea>
            {% else %}
            <input
              id="{{ item.name }}"
              name="{{ item.name }}"
              type="{{ item.type }}"
              placeholder="{{ item.placeholder }}"
              class="w-full px-4 py-3 bg-white/90 rounded-none border border-gray-200 focus:border-gray-300 focus:ring-1 focus:ring-gray-300 outline-none text-gray-900 transition-all duration-300 ease-out"
              style="font-family: {{settings.fonts.body}}"
              {% if item.required %}required{% endif %}
            />
            {% endif %}
          </div>
          {% endfor %}
          
          <div class="mt-4">
            <button
              type="submit"
              class="px-8 py-3 bg-gray-900 text-white font-light tracking-wide uppercase text-sm hover:bg-gray-800 transition-all duration-300 ease-out focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-2"
              style="font-family: {{settings.fonts.body}}"
            >
              {{ sections.contact.form.submitText }}
            </button>
          </div>
        </form>
      </div>
      
      <!-- Contact info card -->
      <div
        class="absolute top-0 -right-4 md:right-0 bg-white/90 backdrop-blur-md p-8 shadow-sm border border-gray-100 max-w-sm transform translate-y-8 md:translate-y-0 md:-translate-x-8 hover:-translate-y-2 transition-all duration-300 ease-out"
      >
        <div class="w-12 h-px bg-gray-300 mb-6"></div>
        <h3 class="text-xl font-light text-gray-900 mb-6" style="font-family: {{settings.fonts.heading}}">
          Contact Information
        </h3>
        <div class="space-y-6">
          <div class="flex items-start space-x-4">
            <i class="ri-map-pin-line text-xl text-gray-400 mt-1"></i>
            <div>
              <p class="text-gray-900 font-light mb-1" style="font-family: {{settings.fonts.body}}">Address</p>
              <p class="text-gray-500 text-sm font-light" style="font-family: {{settings.fonts.body}}">{{ sections.contact.address }}</p>
            </div>
          </div>
          <div class="flex items-start space-x-4">
            <i class="ri-phone-line text-xl text-gray-400 mt-1"></i>
            <div>
              <p class="text-gray-900 font-light mb-1" style="font-family: {{settings.fonts.body}}">Phone</p>
              <p class="text-gray-500 text-sm font-light" style="font-family: {{settings.fonts.body}}">{{ sections.contact.phone }}</p>
            </div>
          </div>
          <div class="flex items-start space-x-4">
            <i class="ri-mail-line text-xl text-gray-400 mt-1"></i>
            <div>
              <p class="text-gray-900 font-light mb-1" style="font-family: {{settings.fonts.body}}">Email</p>
              <p class="text-gray-500 text-sm font-light" style="font-family: {{settings.fonts.body}}">{{ sections.contact.email }}</p>
            </div>
          </div>
          
          {% if sections.contact.socialLinks %}
          <div class="pt-6 mt-6 border-t border-gray-100">
            <p class="text-gray-500 text-xs uppercase tracking-widest mb-4" style="font-family: {{settings.fonts.body}}">Connect With Us</p>
            <div class="flex space-x-4">
              {% for social in sections.contact.socialLinks %}
              <a href="{{ social.url }}" class="text-gray-400 hover:text-gray-900 transition-colors duration-300" aria-label="{{ social.platform }}">
                <i class="ri-{{ social.platform }}-line text-xl"></i>
              </a>
              {% endfor %}
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  
  <!-- Success dialog -->
  <div
    id="successDialog"
    class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm"
    aria-live="polite"
  >
    <div
      class="bg-white p-10 shadow-lg max-w-md w-full mx-4 border border-gray-100"
    >
      <div class="w-12 h-px bg-gray-300 mb-6"></div>
      <h3 class="text-2xl font-light text-gray-900 mb-4" style="font-family: {{settings.fonts.heading}}">Message Sent!</h3>
      <p class="text-gray-500 mb-8 font-light" style="font-family: {{settings.fonts.body}}">
        Thank you for reaching out. Our team will get back to you soon.
      </p>
      <button
        onclick="document.getElementById('successDialog').classList.add('hidden'); document.getElementById('contactForm').focus();"
        class="px-8 py-3 bg-gray-900 text-white font-light tracking-wide uppercase text-sm hover:bg-gray-800 transition-all duration-300 ease-out focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-2"
        style="font-family: {{settings.fonts.body}}"
      >
        Close
      </button>
    </div>
  </div>
  
  <script>
    document
      .getElementById("contactForm")
      .addEventListener("submit", function (e) {
        e.preventDefault();
        const inputs = this.querySelectorAll(
          "input[required], textarea[required]"
        );
        let allFilled = true;
        inputs.forEach((input) => {
          if (!input.value.trim()) allFilled = false;
        });
        if (allFilled) {
          document.getElementById("successDialog").classList.remove("hidden");
          this.reset();
        }
      });
  </script>
</section>