<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[: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>
            {% endfor %}
            {% for info in sections.contact.info[: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>
            {% 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>