<section id="contact" class="h-screen w-full bg-white flex items-center">
  <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-8">
          {% for method in sections.contact.contactMethods %}
          <div class="border-b border-gray-100 pb-6">
            <h3 class="text-lg font-light text-gray-900 mb-2">{{ method.title }}</h3>
            <p class="text-gray-600 font-light mb-2">{{ method.description }}</p>
            <div class="font-light text-gray-900">{{ method.value }}</div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
        
        {% if sections.contact.info %}
        <div class="space-y-8 mt-12">
          {% for info in sections.contact.info %}
          <div class="border-b border-gray-100 pb-6">
            <h3 class="font-light text-gray-900 mb-2">{{ info.title }}</h3>
            {% for detail in info.details %}
            <p class="text-gray-600 font-light">{{ detail }}</p>
            {% endfor %}
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      
      <div data-aos="fade-left">
        <div class="bg-gray-50 p-8 border border-gray-100">
          <h3 class="text-2xl font-light text-gray-900 mb-8">Get in Touch</h3>
          
          {% 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-light text-gray-700 mb-2">
                {{ field.label }}{% if field.required %} *{% endif %}
              </label>
              
              {% if field.type == 'textarea' %}
              <textarea 
                id="{{ field.name }}" 
                name="{{ field.name }}" 
                rows="4" 
                class="w-full px-4 py-3 border border-gray-300 text-gray-900 focus:border-gray-900 focus:outline-none font-light"
                placeholder="{{ field.placeholder }}"
                {% if field.required %}required{% endif %}
                {% if field.maxLength %}maxlength="{{ field.maxLength }}"{% endif %}></textarea>
              
              {% elif field.type == 'select' %}
              <select 
                id="{{ field.name }}" 
                name="{{ field.name }}" 
                class="w-full px-4 py-3 border border-gray-300 text-gray-900 focus:border-gray-900 focus:outline-none font-light"
                {% if field.required %}required{% endif %}>
                {% for option in field.options %}
                <option value="{{ option.value }}">{{ option.label }}</option>
                {% endfor %}
              </select>
              
              {% else %}
              <input 
                type="{{ field.type }}" 
                id="{{ field.name }}" 
                name="{{ field.name }}" 
                class="w-full px-4 py-3 border border-gray-300 text-gray-900 focus:border-gray-900 focus:outline-none font-light"
                placeholder="{{ field.placeholder }}"
                {% if field.required %}required{% endif %}>
              {% endif %}
            </div>
            {% endfor %}
            
            <button type="submit" 
                    class="w-full bg-gray-900 text-white py-3 text-sm font-light tracking-widest uppercase hover:bg-gray-800 transition-colors duration-300">
              {{ sections.contact.form.submitText }}
            </button>
          </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
