<section id="partners" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-blue-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="partners-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(#partners-grid)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section header -->
    <div class="text-center max-w-3xl mx-auto mb-16" data-aos="fade-up">
      {% if sections.partners.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
        {{ sections.partners.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.partners.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.partners.subtitle }}
      </p>
    </div>
    
    <!-- Partners logos grid -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 items-center justify-items-center mb-16" data-aos="fade-up" data-aos-delay="100">
      {% for partner in sections.partners.logos %}
      <div class="w-full h-24 flex items-center justify-center px-6 py-4 grayscale hover:grayscale-0 opacity-70 hover:opacity-100 transition-all duration-300">
        <img 
          src="{{ partner.logo }}" 
          alt="{{ partner.name }}" 
          class="max-h-full max-w-full object-contain"
          loading="lazy"
        >
      </div>
      {% endfor %}
    </div>
    
    <!-- Partners layout options -->
    {% if sections.partners.layout == 'featured' and sections.partners.featured_partners %}
    <!-- Featured partners layout -->
    <div class="mt-24 space-y-16" data-aos="fade-up" data-aos-delay="200">
      <h3 class="text-3xl font-bold text-gray-900 text-center mb-12">{{ sections.partners.featured_title }}</h3>
      
      {% for partner in sections.partners.featured_partners %}
      <div class="grid lg:grid-cols-2 gap-12 items-center {% if loop.index is even %}lg:flex-row-reverse{% endif %}">
        <!-- Content column -->
        <div class="space-y-6">
          <div class="h-16 flex items-center">
            <img 
              src="{{ partner.logo }}" 
              alt="{{ partner.name }}" 
              class="max-h-full object-contain"
            >
          </div>
          <h4 class="text-2xl font-bold text-gray-900">{{ partner.name }}</h4>
          <p class="text-lg text-gray-600">{{ partner.description }}</p>
          
          <!-- Partner benefits if available -->
          {% if partner.benefits %}
          <ul class="space-y-4 mt-6">
            {% for benefit in partner.benefits %}
            <li class="flex items-start">
              <div class="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <div>
                <p class="text-gray-600">{{ benefit }}</p>
              </div>
            </li>
            {% endfor %}
          </ul>
          {% endif %}
          
          <!-- CTA button if available -->
          {% if partner.cta_url and partner.cta_text %}
          <div class="mt-8">
            <a 
              href="{{ partner.cta_url }}" 
              class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors duration-300"
              target="_blank"
              rel="noopener"
            >
              {{ partner.cta_text }}
              <svg class="w-4 h-4 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>
            </a>
          </div>
          {% endif %}
        </div>
        
        <!-- Media column -->
        <div class="relative">
          {% if partner.image %}
          <div class="rounded-2xl overflow-hidden shadow-xl">
            <img 
              src="{{ partner.image }}" 
              alt="{{ partner.name }}" 
              class="w-full h-auto"
              loading="lazy"
            >
          </div>
          
          <!-- Decorative elements -->
          <div class="absolute -top-6 -right-6 w-32 h-32 bg-indigo-200 rounded-full opacity-70 -z-10"></div>
          <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-blue-200 rounded-full opacity-70 -z-10"></div>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
    
    {% elif sections.partners.layout == 'cards' %}
    <!-- Cards layout -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" data-aos="fade-up" data-aos-delay="200">
      {% for partner in sections.partners.partners_list %}
      <div class="bg-white rounded-xl shadow-md p-8 border border-gray-100 transition-all duration-300 hover:shadow-lg hover:border-indigo-200">
        <div class="h-16 flex items-center mb-6">
          <img 
            src="{{ partner.logo }}" 
            alt="{{ partner.name }}" 
            class="max-h-full object-contain"
          >
        </div>
        <h4 class="text-xl font-semibold text-gray-900 mb-3">{{ partner.name }}</h4>
        <p class="text-gray-600 mb-6">{{ partner.description }}</p>
        
        {% if partner.cta_url and partner.cta_text %}
        <div class="mt-auto">
          <a href="{{ partner.cta_url }}" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center" target="_blank" rel="noopener">
            {{ partner.cta_text }}
            <svg class="w-4 h-4 ml-1" 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>
          </a>
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% endif %}
    
    <!-- Testimonial from partner if available -->
    {% if sections.partners.testimonial %}
    <div class="mt-24 bg-indigo-600 rounded-2xl shadow-xl overflow-hidden" data-aos="fade-up" data-aos-delay="300">
      <div class="grid md:grid-cols-2 items-center">
        <div class="p-8 md:p-12">
          <div class="text-indigo-200 mb-4">
            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
              <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
            </svg>
          </div>
          <p class="text-xl text-white mb-6">{{ sections.partners.testimonial.quote }}</p>
          <div class="flex items-center">
            {% if sections.partners.testimonial.logo %}
            <img 
              src="{{ sections.partners.testimonial.logo }}" 
              alt="{{ sections.partners.testimonial.company }}" 
              class="h-8 mr-4 object-contain"
            >
            {% endif %}
            <div>
              <div class="text-white font-medium">{{ sections.partners.testimonial.name }}</div>
              <div class="text-indigo-200">{{ sections.partners.testimonial.position }}, {{ sections.partners.testimonial.company }}</div>
            </div>
          </div>
        </div>
        
        {% if sections.partners.testimonial.image %}
        <div class="aspect-[4/3] w-full h-full">
          <img 
            src="{{ sections.partners.testimonial.image }}" 
            alt="Partnership testimonial" 
            class="w-full h-full object-cover"
            loading="lazy"
          >
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}
    
    <!-- Partnership CTA if available -->
    {% if sections.partners.cta %}
    <div class="mt-24 text-center" data-aos="fade-up" data-aos-delay="300">
      <h3 class="text-3xl font-bold text-gray-900 mb-4">{{ sections.partners.cta.title }}</h3>
      <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">{{ sections.partners.cta.description }}</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        {% for button in sections.partners.cta.buttons %}
        <a 
          href="{{ button.url }}" 
          class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-300 {% if button.style == 'primary' %}bg-indigo-600 text-white hover:bg-indigo-700{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}"
        >
          {% if button.icon %}
          <i class="{{ button.icon }} mr-2" aria-hidden="true"></i>
          {% endif %}
          {{ button.label }}
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
</section>
