<section
  id="contact"
  class="py-24 bg-gray-100 font-inter"
  aria-labelledby="contact-heading"
>
  <div class="max-w-4xl 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 relative"
      >
        {{ sections.contact.title }}
        <span
          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-gradient-to-r from-indigo-500 to-indigo-300 rounded-full"
        ></span>
      </h2>
      <p class="text-lg text-gray-500 max-w-2xl mx-auto">
        {{ sections.contact.subtitle }}
      </p>
    </div>
    <div class="bg-white rounded-xl shadow-sm p-8">
      <div class="flex justify-center mb-6">
        <button
          id="infoTab"
          class="px-4 py-2 text-indigo-500 font-medium border-b-2 border-indigo-500 focus:outline-none"
        >
          Contact Info
        </button>
        <button
          id="formTab"
          class="px-4 py-2 text-gray-500 font-medium hover:text-indigo-500 focus:outline-none"
        >
          Send Message
        </button>
      </div>
      <div id="infoContent" class="space-y-6">
        <div class="flex items-center space-x-3">
          <i class="ri-map-pin-line text-xl text-indigo-500"></i>
          <div>
            <h4 class="font-bold text-gray-900">Address</h4>
            <p class="text-gray-500">{{ sections.contact.address }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-3">
          <i class="ri-phone-line text-xl text-indigo-500"></i>
          <div>
            <h4 class="font-bold text-gray-900">Phone</h4>
            <p class="text-gray-500">{{ sections.contact.phone }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-3">
          <i class="ri-mail-line text-xl text-indigo-500"></i>
          <div>
            <h4 class="font-bold text-gray-900">Email</h4>
            <p class="text-gray-500">{{ sections.contact.email }}</p>
          </div>
        </div>
        {% if sections.contact.socialLinks %}
        <div class="flex space-x-4 mt-6">
          {% for social in sections.contact.socialLinks %}
          <a
            href="{{ social.url }}"
            class="w-8 h-8 flex items-center justify-center bg-indigo-100 rounded-full hover:bg-indigo-200 transition-all duration-600 ease-out"
            aria-label="{{ social.platform }}"
          >
            <i
              class="ri-{{ social.platform }}-line text-lg text-indigo-500"
            ></i>
          </a>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      <form id="contactForm" class="grid gap-6 hidden">
        {% 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-gray-50 rounded-md border-0 focus:ring-2 focus:ring-indigo-500/50 focus:shadow-[0_0_10px_rgba(99,102,241,0.3)] 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-gray-50 rounded-md border-0 focus:ring-2 focus:ring-indigo-500/50 focus:shadow-[0_0_10px_rgba(99,102,241,0.3)] 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>
  <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 p-8 rounded-xl shadow-lg max-w-md w-full mx-4">
      <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>
    const infoTab = document.getElementById("infoTab");
    const formTab = document.getElementById("formTab");
    const infoContent = document.getElementById("infoContent");
    const contactForm = document.getElementById("contactForm");
    infoTab.addEventListener("click", () => {
      infoContent.classList.remove("hidden");
      contactForm.classList.add("hidden");
      infoTab.classList.add("text-indigo-500", "border-indigo-500");
      infoTab.classList.remove("text-gray-500");
      formTab.classList.add("text-gray-500");
      formTab.classList.remove("text-indigo-500", "border-indigo-500");
    });
    formTab.addEventListener("click", () => {
      infoContent.classList.add("hidden");
      contactForm.classList.remove("hidden");
      formTab.classList.add("text-indigo-500", "border-indigo-500");
      formTab.classList.remove("text-gray-500");
      infoTab.classList.add("text-gray-500");
      infoTab.classList.remove("text-indigo-500", "border-indigo-500");
    });
    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>
