<section
  id="contact"
  class="py-24 bg-gradient-to-b from-gray-100 to-indigo-50 font-inter"
  aria-labelledby="contact-heading"
>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 id="contact-heading" class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.contact.title }}
      </h2>
      <p class="text-lg text-gray-500 max-w-2xl mx-auto">
        {{ sections.contact.subtitle }}
      </p>
    </div>
    <div class="relative">
      <div
        class="bg-white/30 backdrop-blur-lg p-8 rounded-xl shadow-lg max-w-3xl mx-auto border border-white/20"
      >
        <form id="contactForm" class="grid gap-6">
          {% for item in sections.contact.form.fields %}
          <div>
            <label
              class="block text-sm font-medium text-gray-900 mb-2"
              for="{{ item.name }}"
              >{{ 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/50 rounded-md border border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/50 outline-none text-gray-900 transition-all duration-600 ease-out"
              {%
              if
              item.required
              %}required{%
              endif
              %}
            ></textarea>
            {% else %}
            <input
              id="{{ item.name }}"
              name="{{ item.name }}"
              type="{{ item.type }}"
              placeholder="{{ item.placeholder }}"
              class="w-full px-4 py-3 bg-white/50 rounded-md border border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/50 outline-none text-gray-900 transition-all duration-600 ease-out"
              {%
              if
              item.required
              %}required{%
              endif
              %}
            />
            {% endif %}
          </div>
          {% endfor %}
          <button
            type="submit"
            class="px-8 py-3 bg-indigo-500 text-white font-medium rounded-md hover:bg-indigo-600 transition-all duration-600 ease-out hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          >
            {{ sections.contact.form.submitText }}
          </button>
        </form>
      </div>
      <div
        class="absolute top-0 left-0 bg-white/20 backdrop-blur-md p-6 rounded-xl shadow-md max-w-sm border border-white/20 hover:-translate-y-2 transition-all duration-600 ease-out"
      >
        <h3 class="text-lg font-bold text-gray-900 mb-4">
          Contact Information
        </h3>
        <div class="space-y-4">
          <div class="flex items-center space-x-3">
            <i class="ri-map-pin-line text-xl text-indigo-500"></i>
            <p class="text-gray-900 text-sm">{{ sections.contact.address }}</p>
          </div>
          <div class="flex items-center space-x-3">
            <i class="ri-phone-line text-xl text-indigo-500"></i>
            <p class="text-gray-900 text-sm">{{ sections.contact.phone }}</p>
          </div>
          <div class="flex items-center space-x-3">
            <i class="ri-mail-line text-xl text-indigo-500"></i>
            <p class="text-gray-900 text-sm">{{ sections.contact.email }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    id="successDialog"
    class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center"
    aria-live="polite"
  >
    <div
      class="bg-white/90 backdrop-blur-md p-8 rounded-xl shadow-lg max-w-md w-full mx-4 border border-white/20"
    >
      <h3 class="text-2xl font-bold text-gray-900 mb-4">Message Sent!</h3>
      <p class="text-gray-500 mb-6">
        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-indigo-500 text-white font-medium rounded-md hover:bg-indigo-600 transition-all duration-600 ease-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
      >
        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>
