<section id="contact" class="py-24 bg-gray-50">
  <div class="max-w-4xl mx-auto px-4">
    <h2 class="text-4xl font-light text-gray-900 text-center mb-16" data-aos="fade-up">
      {{ sections.contact.title }}
    </h2>
    
    <div class="grid lg:grid-cols-2 gap-16">
      <div data-aos="fade-right">
        {% if sections.contact.contactMethods %}
        <div class="space-y-6">
          {% for method in sections.contact.contactMethods %}
          <div>
            <h3 class="font-medium text-gray-900 mb-1">{{ method.title }}</h3>
            <p class="text-gray-600">{{ method.value }}</p>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      
      <div data-aos="fade-left">
        {% if sections.contact.form %}
        <form class="space-y-6">
          {% for field in sections.contact.form.fields %}
          <div>
            <label for="{{ field.name }}" class="block text-sm font-medium text-gray-900 mb-2">
              {{ field.label }}
            </label>
            
            {% if field.type == 'textarea' %}
            <textarea 
              id="{{ field.name }}" 
              name="{{ field.name }}" 
              rows="4" 
              class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:border-gray-900 focus:outline-none"
              {% if field.required %}required{% endif %}></textarea>
            {% else %}
            <input 
              type="{{ field.type }}" 
              id="{{ field.name }}" 
              name="{{ field.name }}" 
              class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:border-gray-900 focus:outline-none"
              {% if field.required %}required{% endif %}>
            {% endif %}
          </div>
          {% endfor %}
          
          <button type="submit" 
                  class="bg-gray-900 text-white px-8 py-3 text-sm font-medium hover:opacity-80 transition-opacity">
            {{ sections.contact.form.submitText }}
          </button>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</section>