<!-- 
  Team Section Component
  "MEET THE TEAM" 4-column grid
-->
<section data-component-type="Content" class="py-16 md:py-24 lg:py-32">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="text-center mb-12 md:mb-16">
      <span
        data-node="team_tagline"
        data-node-type="text"
        data-node-label="Tagline"
        data-node-default="MEET THE TEAM"
        class="text-red-600 font-semibold text-sm uppercase tracking-wider"
      >
        {{team_tagline}}
      </span>

      <h2
        data-node="team_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="Expert Coaches Who Run With You"
        class="text-3xl md:text-4xl lg:text-5xl font-semibold text-black mt-4 mb-8"
      >
        {{team_title}}
      </h2>

      <a
        data-node="team_cta_link"
        data-node-type="url"
        data-node-label="CTA Link"
        data-node-default="#"
        href="{{team_cta_link}}"
        class="inline-block bg-red-600 text-white px-10 py-4 font-medium hover:bg-red-700 transition-colors"
      >
        <span
          data-node="team_cta_text"
          data-node-type="text"
          data-node-label="CTA Text"
          data-node-default="Explore Sessions"
          >{{team_cta_text}}</span
        >
      </a>
    </div>

    <!-- Team Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
      <!-- Member 1 -->
      <div class="text-center">
        <img
          data-node="member1_image"
          data-node-type="file"
          data-node-label="Member 1 Image"
          data-node-default="../assets/team-1.png"
          src="{{member1_image}}"
          alt="Team member"
          class="w-full h-64 md:h-80 lg:h-96 object-cover mb-4"
        />
        <h3
          data-node="member1_name"
          data-node-type="text"
          data-node-label="Member 1 Name"
          data-node-default="Daniel Hartmann"
          class="text-xl md:text-2xl font-medium text-black mb-1"
        >
          {{member1_name}}
        </h3>
        <span
          data-node="member1_role"
          data-node-type="text"
          data-node-label="Member 1 Role"
          data-node-default="Head Running Coach"
          class="text-red-600 text-lg"
        >
          {{member1_role}}
        </span>
      </div>

      <!-- Member 2 -->
      <div class="text-center">
        <img
          data-node="member2_image"
          data-node-type="file"
          data-node-label="Member 2 Image"
          data-node-default="../assets/team-2.png"
          src="{{member2_image}}"
          alt="Team member"
          class="w-full h-64 md:h-80 lg:h-96 object-cover mb-4"
        />
        <h3
          data-node="member2_name"
          data-node-type="text"
          data-node-label="Member 2 Name"
          data-node-default="Luca Moretti"
          class="text-xl md:text-2xl font-medium text-black mb-1"
        >
          {{member2_name}}
        </h3>
        <span
          data-node="member2_role"
          data-node-type="text"
          data-node-label="Member 2 Role"
          data-node-default="Strength & Conditioning Lead"
          class="text-red-600 text-lg"
        >
          {{member2_role}}
        </span>
      </div>

      <!-- Member 3 -->
      <div class="text-center">
        <img
          data-node="member3_image"
          data-node-type="file"
          data-node-label="Member 3 Image"
          data-node-default="../assets/team-3.png"
          src="{{member3_image}}"
          alt="Team member"
          class="w-full h-64 md:h-80 lg:h-96 object-cover mb-4"
        />
        <h3
          data-node="member3_name"
          data-node-type="text"
          data-node-label="Member 3 Name"
          data-node-default="Aaron Wells"
          class="text-xl md:text-2xl font-medium text-black mb-1"
        >
          {{member3_name}}
        </h3>
        <span
          data-node="member3_role"
          data-node-type="text"
          data-node-label="Member 3 Role"
          data-node-default="Endurance & Marathon Specialist"
          class="text-red-600 text-lg"
        >
          {{member3_role}}
        </span>
      </div>

      <!-- Member 4 -->
      <div class="text-center">
        <img
          data-node="member4_image"
          data-node-type="file"
          data-node-label="Member 4 Image"
          data-node-default="../assets/team-4.png"
          src="{{member4_image}}"
          alt="Team member"
          class="w-full h-64 md:h-80 lg:h-96 object-cover mb-4"
        />
        <h3
          data-node="member4_name"
          data-node-type="text"
          data-node-label="Member 4 Name"
          data-node-default="Mikael Sørensen"
          class="text-xl md:text-2xl font-medium text-black mb-1"
        >
          {{member4_name}}
        </h3>
        <span
          data-node="member4_role"
          data-node-type="text"
          data-node-label="Member 4 Role"
          class="text-red-600 text-lg"
          data-node-default="Speed & Technique Coach"
        >
          {{member4_role}}
        </span>
      </div>
    </div>
  </div>
</section>
