<section class="py-24 bg-gray-50" id="contact">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-3xl sm:text-4xl font-cinzel font-bold text-gray-900 mb-4">
        {{ sections.contact.title }}
      </h2>
      <p
        class="text-base sm:text-lg text-gray-600 max-w-2xl mx-auto font-cinzel"
      >
        {{ sections.contact.subtitle }}
      </p>
    </div>
    <div class="grid md:grid-cols-2 gap-16">
      <div>
        <div class="bg-white p-8 rounded-lg shadow-sm">
          <h3 class="text-2xl font-cinzel font-bold text-gray-900 mb-6">
            Contact Information
          </h3>
          <div class="space-y-6">
            {% for method in sections.contact.contactMethods %} {% if loop.index
            <= 2 %}
            <div class="flex items-start space-x-4">
              <div
                class="w-10 h-10 flex items-center justify-center bg-primary/10 rounded-full"
              >
                <i class="{{ method.icon }} text-xl text-primary"></i>
              </div>
              <div>
                <h4 class="font-bold text-gray-900 font-cinzel">
                  {{ method.title }}
                </h4>
                <p class="text-gray-600 font-cinzel">{{ method.value }}</p>
                {% if method.description %}
                <p class="text-sm text-gray-500 font-cinzel">
                  {{ method.description }}
                </p>
                {% endif %}
              </div>
            </div>
            {% endif %} {% endfor %} {% for info in sections.contact.info %} {%
            if loop.index <= 2 %}
            <div class="flex items-start space-x-4">
              <div
                class="w-10 h-10 flex items-center justify-center bg-primary/10 rounded-full"
              >
                <i class="{{ info.icon }} text-xl text-primary"></i>
              </div>
              <div>
                <h4 class="font-bold text-gray-900 font-cinzel">
                  {{ info.title }}
                </h4>
                {% for detail in info.details %}
                <p class="text-gray-600 font-cinzel">{{ detail }}</p>
                {% endfor %}
              </div>
            </div>
            {% endif %} {% endfor %}
          </div>
        </div>
      </div>
      <div>
        <form
          class="bg-white p-8 rounded-lg shadow-sm"
          id="contactForm"
          action="{{ sections.contact.form.action }}"
          method="{{ sections.contact.form.method }}"
        >
          {% for field in sections.contact.form.fields %}
          <div class="mb-6">
            <label
              class="block text-sm font-medium text-gray-700 mb-2 font-cinzel"
              >{{ field.label }}</label
            >
            {% if field.type == 'textarea' %}
            <textarea
              name="{{ field.name }}"
              rows="4"
              placeholder="{{ field.placeholder }}"
              class="w-full px-4 py-2 border-none bg-gray-50 !rounded-button font-cinzel"
              {%
              if
              field.required
              %}required{%
              endif
              %}
              {%
              if
              field.maxLength
              %}maxlength="{{ field.maxLength }}"
              {%
              endif
              %}
            ></textarea>
            {% elif field.type == 'select' %}
            <select
              name="{{ field.name }}"
              class="w-full px-4 py-2 border-none bg-gray-50 !rounded-button font-cinzel"
              {%
              if
              field.required
              %}required{%
              endif
              %}
            >
              {% for option in field.options %}
              <option value="{{ option.value }}">{{ option.label }}</option>
              {% endfor %}
            </select>
            {% else %}
            <input
              type="{{ field.type }}"
              name="{{ field.name }}"
              placeholder="{{ field.placeholder }}"
              class="w-full px-4 py-2 border-none bg-gray-50 !rounded-button font-cinzel"
              {%
              if
              field.required
              %}required{%
              endif
              %}
            />
            {% endif %}
          </div>
          {% endfor %}
          <button
            type="submit"
            class="w-full px-8 py-3 bg-primary text-white font-cinzel font-medium rounded-lg shadow-md hover:bg-primary/90 transition duration-300 ease-in-out"
            aria-label="{{ sections.contact.form.submitText }}"
          >
            {{ 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-lg shadow-xl max-w-md w-full mx-4">
        <h3 class="text-2xl font-cinzel font-bold text-gray-900 mb-4">
          Message Sent!
        </h3>
        <p class="text-gray-600 mb-6 font-cinzel">
          Thank you for reaching out. Our team will get back to you soon.
        </p>
        <button
          onclick="document.getElementById('successDialog').classList.add('hidden')"
          class="inline-block px-8 py-3 bg-primary text-white font-cinzel font-medium rounded-lg shadow-md hover:bg-primary/90 transition duration-300 ease-in-out"
          aria-label="Close Dialog"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</section>
