<section id="contact" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-30"></div>
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.03]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="contact-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M0 0h40v40H0z" fill="none" />
            <path d="M0 0h1v40H0zm40 0v1H0V0zm0 40h-1V0h1zM0 40v-1h40v1z" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#contact-grid)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-16 items-start">
      <!-- Left content column -->
      <div class="space-y-8" data-aos="fade-up">
        <!-- Section header -->
        <div class="max-w-lg">
          {% if sections.contact.badge %}
          <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
            {{ sections.contact.badge }}
          </span>
          {% endif %}
          <h2 class="text-4xl font-bold text-gray-900 mb-4">
            {{ sections.contact.title }}
          </h2>
          <p class="text-lg text-gray-600">
            {{ sections.contact.subtitle }}
          </p>
        </div>
        
        <!-- Contact info cards -->
        <div class="grid sm:grid-cols-2 gap-6">
          {% for info in sections.contact.info %}
          <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transition-all duration-300 hover:shadow-md hover:border-indigo-200">
            <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mb-4">
              <i class="{{ info.icon }}" aria-hidden="true"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">{{ info.title }}</h3>
            <p class="text-gray-600">{{ info.value }}</p>
            {% if info.link_url and info.link_text %}
            <a href="{{ info.link_url }}" class="mt-3 inline-block text-indigo-600 font-medium hover:text-indigo-700">
              {{ info.link_text }}
            </a>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        
        <!-- Social links if available -->
        {% if sections.contact.social_links %}
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-4">{{ sections.contact.social_links.title }}</h3>
          <div class="flex gap-4">
            {% for social in sections.contact.social_links.platforms %}
            <a 
              href="{{ social.url }}" 
              class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-indigo-100 hover:text-indigo-600 transition-colors duration-300"
              aria-label="{{ social.platform }}"
              target="_blank"
              rel="noopener"
            >
              <i class="{{ social.icon }}" aria-hidden="true"></i>
            </a>
            {% endfor %}
          </div>
        </div>
        {% endif %}
        
        <!-- Office hours if available -->
        {% if sections.contact.office_hours %}
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-4">{{ sections.contact.office_hours.title }}</h3>
          <div class="space-y-2">
            {% for schedule in sections.contact.office_hours.schedule %}
            <div class="flex justify-between">
              <span class="text-gray-600">{{ schedule.days }}</span>
              <span class="font-medium text-gray-900">{{ schedule.hours }}</span>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endif %}
      </div>
      
      <!-- Right form column -->
      <div data-aos="fade-up" data-aos-delay="200">
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-8">
          <h3 class="text-2xl font-semibold text-gray-900 mb-6">{{ sections.contact.form.title }}</h3>
          
          <form id="contact-form" class="space-y-6">
            <!-- Form fields -->
            {% for field in sections.contact.form.fields %}
            <div>
              <label for="{{ field.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ field.label }}{% if field.required %} <span class="text-red-500">*</span>{% endif %}
              </label>
              
              {% if field.type == 'textarea' %}
              <textarea 
                id="{{ field.id }}" 
                name="{{ field.id }}" 
                rows="4" 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-300"
                placeholder="{{ field.placeholder }}"
                {% if field.required %}required{% endif %}
              ></textarea>
              
              {% elif field.type == 'select' %}
              <select 
                id="{{ field.id }}" 
                name="{{ field.id }}" 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-300"
                {% if field.required %}required{% endif %}
              >
                <option value="">{{ field.placeholder }}</option>
                {% for option in field.options %}
                <option value="{{ option.value }}">{{ option.label }}</option>
                {% endfor %}
              </select>
              
              {% else %}
              <input 
                type="{{ field.type }}" 
                id="{{ field.id }}" 
                name="{{ field.id }}" 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-300"
                placeholder="{{ field.placeholder }}"
                {% if field.required %}required{% endif %}
              >
              {% endif %}
            </div>
            {% endfor %}
            
            <!-- Privacy policy checkbox if available -->
            {% if sections.contact.form.privacy_policy %}
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input 
                  id="privacy-policy" 
                  name="privacy-policy" 
                  type="checkbox" 
                  class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                  required
                >
              </div>
              <div class="ml-3 text-sm">
                <label for="privacy-policy" class="text-gray-600">
                  {{ sections.contact.form.privacy_policy.text }}
                  <a href="{{ sections.contact.form.privacy_policy.url }}" class="text-indigo-600 hover:text-indigo-700">
                    {{ sections.contact.form.privacy_policy.link_text }}
                  </a>
                </label>
              </div>
            </div>
            {% endif %}
            
            <!-- Submit button -->
            <div>
              <button 
                type="submit" 
                class="w-full px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors duration-300 flex items-center justify-center"
              >
                {{ sections.contact.form.submit_button }}
                <svg class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- Map section if available -->
    {% if sections.contact.map %}
    <div class="mt-24" data-aos="fade-up" data-aos-delay="300">
      <div class="rounded-2xl overflow-hidden shadow-lg h-96">
        <div class="w-full h-full bg-gray-200">
          <!-- Map iframe or placeholder -->
          {% if sections.contact.map.embed_url %}
          <iframe 
            src="{{ sections.contact.map.embed_url }}" 
            width="100%" 
            height="100%" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade"
            title="{{ sections.contact.map.title }}"
          ></iframe>
          {% else %}
          <div class="w-full h-full flex items-center justify-center bg-gray-100">
            <div class="text-center">
              <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mx-auto mb-4">
                <i class="ri-map-pin-line text-2xl" aria-hidden="true"></i>
              </div>
              <h3 class="text-lg font-medium text-gray-900">{{ sections.contact.map.title }}</h3>
              <p class="text-gray-600">{{ sections.contact.map.address }}</p>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</section>
