<section data-component-type="Content">
  <div class="bg-[#F6F6F6] py-14 px-4 sm:px-6 lg:px-16">
    <div class="max-w-[90%] mx-auto">

      <!-- HEADER -->
      <div class="flex flex-col lg:flex-row justify-between gap-6 mb-12">
        <h2
          class="text-3xl sm:text-4xl font-bold max-w-xl"
          data-node="team_heading"
          data-node-type="text"
          data-node-label="Team Section Heading"
          data-node-default="The Team Behind Your Learning Journey"
        >
          {{team_heading}}
        </h2>

        <p
          class="text-[#4A6673] max-w-md text-sm sm:text-base"
          data-node="team_description"
          data-node-type="text"
          data-node-label="Team Section Description"
          data-node-default="A passionate group of educators, strategists, and creators. Dedicated to helping you build skills that last."
        >
          {{team_description}}
        </p>
      </div>

      <!-- TEAM LIST -->
      <div class="space-y-6">

        <!-- CARD 01 -->
        <div class="bg-white rounded-xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6">

          <div class="flex items-start gap-6 max-w-xl">
            <span
              class="text-2xl font-bold text-black"
              data-node="team_1_index"
              data-node-type="text"
              data-node-label="Team Member 1 Index"
              data-node-default="01"
            >
              {{team_1_index}}
            </span>

            <div>
              <h3
                class="text-lg sm:text-xl font-semibold mb-2"
                data-node="team_1_name"
                data-node-type="text"
                data-node-label="Team Member 1 Name"
                data-node-default="Elena Richter – Lead Academic Instructor"
              >
                {{team_1_name}}
              </h3>

              <p
                class="text-[#3D3D3D] text-sm leading-relaxed"
                data-node="team_1_bio"
                data-node-type="text"
                data-node-label="Team Member 1 Description"
                data-node-default="Designs curriculum that blends clarity, depth, and real-world application."
              >
                {{team_1_bio}}
              </p>
            </div>
          </div>

          <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/img1.png"
            class="w-full sm:w-[260px] h-[180px] object-cover rounded-lg"
            alt=""
          />
        </div>

        <!-- CARD 02 -->
        <div class="bg-white rounded-xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6">

          <div class="flex items-start gap-6 max-w-xl">
            <span
              class="text-2xl font-bold text-black"
              data-node="team_2_index"
              data-node-type="text"
              data-node-label="Team Member 2 Index"
              data-node-default="02"
            >
              {{team_2_index}}
            </span>

            <div>
              <h3
                class="text-lg sm:text-xl font-semibold mb-2"
                data-node="team_2_name"
                data-node-type="text"
                data-node-label="Team Member 2 Name"
                data-node-default="Sofia Mendes – Curriculum Strategist"
              >
                {{team_2_name}}
              </h3>

              <p
                class="text-[#3D3D3D] text-sm leading-relaxed"
                data-node="team_2_bio"
                data-node-type="text"
                data-node-label="Team Member 2 Description"
                data-node-default="Transforms ideas into seamless learning pathways that motivate progress."
              >
                {{team_2_bio}}
              </p>
            </div>
          </div>

          <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/img2.png"
            class="w-full sm:w-[260px] h-[180px] object-cover rounded-lg"
            alt=""
          />
        </div>

        <!-- CARD 03 -->
        <div class="bg-white rounded-xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6">

          <div class="flex items-start gap-6 max-w-xl">
            <span
              class="text-2xl font-bold text-black"
              data-node="team_3_index"
              data-node-type="text"
              data-node-label="Team Member 3 Index"
              data-node-default="03"
            >
              {{team_3_index}}
            </span>

            <div>
              <h3
                class="text-lg sm:text-xl font-semibold mb-2"
                data-node="team_3_name"
                data-node-type="text"
                data-node-label="Team Member 3 Name"
                data-node-default="Lena Ash – Student Community Director"
              >
                {{team_3_name}}
              </h3>

              <p
                class="text-[#3D3D3D] text-sm leading-relaxed"
                data-node="team_3_bio"
                data-node-type="text"
                data-node-label="Team Member 3 Description"
                data-node-default="Builds a vibrant learner ecosystem across all channels."
              >
                {{team_3_bio}}
              </p>
            </div>
          </div>

          <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/img3.png"
            class="w-full sm:w-[260px] h-[180px] object-cover rounded-lg"
            alt=""
          />
        </div>

        <!-- CARD 04 -->
        <div class="bg-white rounded-xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6">

          <div class="flex items-start gap-6 max-w-xl">
            <span
              class="text-2xl font-bold text-black"
              data-node="team_4_index"
              data-node-type="text"
              data-node-label="Team Member 4 Index"
              data-node-default="04"
            >
              {{team_4_index}}
            </span>

            <div>
              <h3
                class="text-lg sm:text-xl font-semibold mb-2"
                data-node="team_4_name"
                data-node-type="text"
                data-node-label="Team Member 4 Name"
                data-node-default="Amara Ray – Learning Systems Designer"
              >
                {{team_4_name}}
              </h3>

              <p
                class="text-[#3D3D3D] text-sm leading-relaxed"
                data-node="team_4_bio"
                data-node-type="text"
                data-node-label="Team Member 4 Description"
                data-node-default="Crafts intuitive interfaces that enhance every step of the journey."
              >
                {{team_4_bio}}
              </p>
            </div>
          </div>

          <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/img4.png"
            class="w-full sm:w-[260px] h-[180px] object-cover rounded-lg"
            alt=""
          />
        </div>

      </div>
    </div>
  </div>
</section>
