<section id="team" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-indigo-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="team-dots" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="1" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#team-dots)" />
      </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.team.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
        {{ sections.team.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.team.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.team.subtitle }}
      </p>
    </div>
    
    <!-- Team members grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
      {% for member in sections.team.members %}
      <div 
        class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition-all duration-300 hover:shadow-lg hover:border-indigo-200 group"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 50 }}"
      >
        <!-- Member image -->
        <div class="aspect-[3/4] w-full relative overflow-hidden">
          <img 
            src="{{ member.image }}" 
            alt="{{ member.name }}" 
            class="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
            loading="lazy"
          >
          
          <!-- Social links overlay -->
          {% if member.social_links %}
          <div class="absolute inset-0 bg-gradient-to-t from-indigo-900/80 via-indigo-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
            <div class="flex gap-4">
              {% for social in member.social_links %}
              <a 
                href="{{ social.url }}" 
                class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white hover:bg-white/40 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 %}
        </div>
        
        <!-- Member info -->
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 mb-1">{{ member.name }}</h3>
          <p class="text-indigo-600 mb-3">{{ member.position }}</p>
          {% if member.bio %}
          <p class="text-gray-600 text-sm">{{ member.bio }}</p>
          {% endif %}
          
          <!-- Skills tags if available -->
          {% if member.skills %}
          <div class="mt-4 flex flex-wrap gap-2">
            {% for skill in member.skills %}
            <span class="inline-block px-3 py-1 text-xs font-medium bg-indigo-100 text-indigo-700 rounded-full">
              {{ skill }}
            </span>
            {% endfor %}
          </div>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Team values if available -->
    {% if sections.team.values %}
    <div class="mt-24" data-aos="fade-up" data-aos-delay="300">
      <div class="text-center max-w-3xl mx-auto mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-4">{{ sections.team.values.title }}</h3>
        <p class="text-lg text-gray-600">{{ sections.team.values.subtitle }}</p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8">
        {% for value in sections.team.values.items %}
        <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="w-16 h-16 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600 mb-6">
            <i class="{{ value.icon }}" aria-hidden="true"></i>
          </div>
          <h4 class="text-xl font-semibold text-gray-900 mb-3">{{ value.title }}</h4>
          <p class="text-gray-600">{{ value.description }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    
    <!-- Join the team CTA if available -->
    {% if sections.team.join_cta %}
    <div class="mt-24 bg-indigo-600 rounded-2xl shadow-xl overflow-hidden" data-aos="fade-up" data-aos-delay="400">
      <div class="grid md:grid-cols-2 items-center">
        <div class="p-8 md:p-12">
          <h3 class="text-3xl font-bold text-white mb-4">{{ sections.team.join_cta.title }}</h3>
          <p class="text-indigo-100 mb-8">{{ sections.team.join_cta.description }}</p>
          
          <div class="flex flex-col sm:flex-row gap-4">
            {% for button in sections.team.join_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-white text-indigo-600 hover:bg-indigo-50{% else %}bg-indigo-700 text-white border border-indigo-500 hover:bg-indigo-800{% endif %}"
            >
              {% if button.icon %}
              <i class="{{ button.icon }} mr-2" aria-hidden="true"></i>
              {% endif %}
              {{ button.label }}
            </a>
            {% endfor %}
          </div>
        </div>
        
        {% if sections.team.join_cta.image %}
        <div class="aspect-[4/3] w-full h-full">
          <img 
            src="{{ sections.team.join_cta.image }}" 
            alt="Join our team" 
            class="w-full h-full object-cover"
            loading="lazy"
          >
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}
  </div>
</section>
