<section class="bg-[#FBF7F3] px-6 py-12 lg:px-16 lg:py-16"
  data-component-type="Content">

  <!-- Header -->
  <div class="max-w-[90%] mx-auto flex flex-col sm:flex-row sm:items-center sm:justify-between mb-10">

    <h2
      class="text-3xl lg:text-4xl font-serif text-[#000000]"
      data-node="team_section_title"
      data-node-type="text"
      data-node-label="Team Section Title"
      data-node-default="Meet our Team">
      {{team_section_title}}
    </h2>

    <a
      href="{{team_button_link}}"
      data-node="team_button_link"
      data-node-type="page_links"
      data-node-label="Team Button Link"
      data-node-default="#"
      class="mt-4 sm:mt-0 inline-block bg-[#143C40] text-white px-6 py-3 text-sm hover:bg-[#0F3134] transition"
    >
      <span
        data-node="team_button_text"
        data-node-type="text"
        data-node-label="Team Button Text"
        data-node-default="Explore Sessions">
        {{team_button_text}}
      </span>
    </a>
  </div>

  <!-- Team Grid -->
  <div class="max-w-[90%] mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 border-b pb-[50px]">

    <!-- Team Member 1 -->
    <div class="space-y-4">
      <img
        src="{{team_1_image}}"
        data-node="team_1_image"
        data-node-type="file"
        data-node-label="Team Member 1 Image"
        data-node-default="../assets/team1.png"
        alt="Team Member 1"
        class="w-full h-[360px] object-cover"
      />
      <div>
        <h4
          class="font-semibold text-#000000"
          data-node="team_1_role"
          data-node-type="text"
          data-node-label="Team Member 1 Role"
          data-node-default="Destination Expert">
          {{team_1_role}}
        </h4>
        <p
          class="text-sm text-gray-600"
          data-node="team_1_name"
          data-node-type="text"
          data-node-label="Team Member 1 Name"
          data-node-default="Aiko Tanaka">
          {{team_1_name}}
        </p>
      </div>
    </div>

    <!-- Team Member 2 -->
    <div class="space-y-4">
      <img
        src="{{team_2_image}}"
        data-node="team_2_image"
        data-node-type="file"
        data-node-label="Team Member 2 Image"
        data-node-default="../assets/team2.png"
        alt="Team Member 2"
        class="w-full h-[360px] object-cover"
      />
      <div>
        <h4
          class="font-semibold text-#000000"
          data-node="team_2_role"
          data-node-type="text"
          data-node-label="Team Member 2 Role"
          data-node-default="Experience Curator">
          {{team_2_role}}
        </h4>
        <p
          class="text-sm text-gray-600"
          data-node="team_2_name"
          data-node-type="text"
          data-node-label="Team Member 2 Name"
          data-node-default="Daniel Brooks">
          {{team_2_name}}
        </p>
      </div>
    </div>

    <!-- Team Member 3 -->
    <div class="space-y-4">
      <img
        src="{{team_3_image}}"
        data-node="team_3_image"
        data-node-type="file"
        data-node-label="Team Member 3 Image"
        data-node-default="../assets/team3.png"
        alt="Team Member 3"
        class="w-full h-[360px] object-cover"
      />
      <div>
        <h4
          class="font-semibold text-#000000"
          data-node="team_3_role"
          data-node-type="text"
          data-node-label="Team Member 3 Role"
          data-node-default="Guest Support Lead">
          {{team_3_role}}
        </h4>
        <p
          class="text-sm text-gray-600"
          data-node="team_3_name"
          data-node-type="text"
          data-node-label="Team Member 3 Name"
          data-node-default="Haru Nakamura">
          {{team_3_name}}
        </p>
      </div>
    </div>

    <!-- Team Member 4 -->
    <div class="space-y-4">
      <img
        src="{{team_4_image}}"
        data-node="team_4_image"
        data-node-type="file"
        data-node-label="Team Member 4 Image"
        data-node-default="../assets/team4.png"
        alt="Team Member 4"
        class="w-full h-[360px] object-cover"
      />
      <div>
        <h4
          class="font-semibold text-#000000"
          data-node="team_4_role"
          data-node-type="text"
          data-node-label="Team Member 4 Role"
          data-node-default="Culinary Guide">
          {{team_4_role}}
        </h4>
        <p
          class="text-sm text-gray-600"
          data-node="team_4_name"
          data-node-type="text"
          data-node-label="Team Member 4 Name"
          data-node-default="Sarah Bennett">
          {{team_4_name}}
        </p>
      </div>
    </div>

  </div>
</section>
