{#
/**
 * @file
 * Template for Team Page.
 *
 * Available variables:
 * - team_members: Array of team member items with 'name', 'position', 'image_url', 'gradient_class', 'url'.
 */
#}
<div class="team-page py-12 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    {# Header #}
    <div class="text-center mb-12 lg:mb-16">
      <span class="text-sm font-medium text-blue-500 uppercase tracking-wider mb-4 block">{{ 'Meet the Team'|t }}</span>
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
        {{ 'Our Team'|t }}
      </h1>
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        {{ 'Meet the talented people behind our success. We are a diverse team of professionals dedicated to excellence.'|t }}
      </p>
    </div>

    {# Team Grid #}
    {% if team_members|length > 0 %}
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-8">
        {% for member in team_members %}
          <a href="{{ member.url }}" class="team-card group relative rounded-2xl overflow-hidden aspect-[3/4] block transform hover:scale-[1.02] transition-all duration-300 {{ member.gradient_class }}">
            {# Photo #}
            {% if member.image_uri %}
              {{ responsive_image(member.image_uri, 'team', member.name, 'absolute inset-0 w-full h-full object-cover object-top') }}
            {% else %}
              <img
                src="{{ member.image_url }}"
                alt="{{ member.name }}"
                class="absolute inset-0 w-full h-full object-cover object-top"
                loading="lazy"
              >
            {% endif %}

            {# Overlay with name and position #}
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-100 transition-opacity"></div>
            <div class="absolute bottom-0 left-0 right-0 p-6">
              <h3 class="text-white font-semibold text-xl mb-1 group-hover:text-blue-300 transition-colors">
                {{ member.name }}
              </h3>
              <p class="text-white/80 text-sm">{{ member.position }}</p>
            </div>
          </a>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center py-16">
        <svg class="w-20 h-20 text-gray-300 dark:text-gray-600 mx-auto mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
        </svg>
        <p class="text-gray-500 dark:text-gray-400 text-lg mb-6">{{ 'No team members available yet.'|t }}</p>
      </div>
    {% endif %}

    {# Join CTA #}
    <div class="mt-16 text-center bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl p-8 lg:p-12">
      <h3 class="text-2xl lg:text-3xl font-bold text-white mb-4">
        {{ "Want to join our team?"|t }}
      </h3>
      <p class="text-blue-100 mb-6 max-w-xl mx-auto">
        {{ "We're always looking for talented individuals to join our growing team. Get in touch with us today."|t }}
      </p>
      <a href="{{ lang_path('/contact') }}" class="inline-flex items-center justify-center px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors shadow-lg">
        {{ 'Contact Us'|t }}
        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
        </svg>
      </a>
    </div>
  </div>
</div>
