<!-- 
  Our People Section Component
  Team member cards
-->
<section data-component-type="Content" class="py-20">
  <div class="max-w-[90%] mx-auto text-center">
    <!-- Top Label -->
    <span
      data-node="people_tag"
      data-node-type="text"
      data-node-label="People Section Tag"
      data-node-default="Our People"
      class="px-4 py-2 rounded-[10px] bg-[#5F4BE233] text-[#5F4BE2] text-sm font-medium"
    >
      {{people_tag}}
    </span>

    <!-- Heading -->
    <h2
      data-node="people_heading"
      data-node-type="text"
      data-node-label="People Section Heading"
      data-node-default="A team committed to crafting smarter digital workflows"
      class="mt-6 text-3xl md:text-4xl font-bold text-[#151515]"
    >
      {{people_heading}}
    </h2>

    <!-- Subtext -->
    <p
      data-node="people_subtext"
      data-node-type="textarea"
      data-node-label="People Section Subtext"
      data-node-default="Our experts, designers, and engineers bring experience and passion to every update, feature, and solution we deliver."
      class="mt-4 text-[#4A6673] max-w-2xl mx-auto"
    >
      {{people_subtext}}
    </p>
  </div>

  <!-- Team Grid -->
  <div class="mt-16 max-w-[90%] mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10">
    <!-- Card 1 -->
    <div class="text-start mt-[40px] md:mt-[0px]">
      <div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden">
        <img
          data-node="team_member_1_image"
          data-node-type="file"
          data-node-label="Team Member 1 Image"
          data-node-default="../assets/our-people/Frame1.png"
          src="{{team_member_1_image}}"
          class="w-full h-full object-cover"
          alt="Team member"
        />
      </div>
      <h3
        data-node="team_member_1_name"
        data-node-type="text"
        data-node-label="Team Member 1 Name"
        data-node-default="Evan Mitchell"
        class="mt-4 font-semibold text-[#000000]"
      >
        {{team_member_1_name}}
      </h3>
      <p
        data-node="team_member_1_role"
        data-node-type="text"
        data-node-label="Team Member 1 Role"
        data-node-default="Product Director"
        class="text-sm text-[#5F4BE2] mt-1"
      >
        {{team_member_1_role}}
      </p>
    </div>

    <!-- Card 2 -->
    <div class="text-start mt-[40px] md:mt-[0px]">
      <div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden">
        <img
          data-node="team_member_2_image"
          data-node-type="file"
          data-node-label="Team Member 2 Image"
          data-node-default="../assets/our-people/Frame2.png"
          src="{{team_member_2_image}}"
          class="w-full h-full object-cover"
          alt="Team member"
        />
      </div>
      <h3
        data-node="team_member_2_name"
        data-node-type="text"
        data-node-label="Team Member 2 Name"
        data-node-default="Max Crawford"
        class="mt-4 font-semibold text-[#000000]"
      >
        {{team_member_2_name}}
      </h3>
      <p
        data-node="team_member_2_role"
        data-node-type="text"
        data-node-label="Team Member 2 Role"
        data-node-default="Lead UX Architect"
        class="text-sm text-[#5F4BE2] mt-1"
      >
        {{team_member_2_role}}
      </p>
    </div>

    <!-- Card 3 -->
    <div class="text-start mt-[40px] md:mt-[0px]">
      <div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden">
        <img
          data-node="team_member_3_image"
          data-node-type="file"
          data-node-label="Team Member 3 Image"
          data-node-default="../assets/our-people/Frame3.png"
          src="{{team_member_3_image}}"
          class="w-full h-full object-cover"
          alt="Team member"
        />
      </div>
      <h3
        data-node="team_member_3_name"
        data-node-type="text"
        data-node-label="Team Member 3 Name"
        data-node-default="Marco Reyes"
        class="mt-4 font-semibold text-[#000000]"
      >
        {{team_member_3_name}}
      </h3>
      <p
        data-node="team_member_3_role"
        data-node-type="text"
        data-node-label="Team Member 3 Role"
        data-node-default="Engineering Head"
        class="text-sm text-[#5F4BE2] mt-1"
      >
        {{team_member_3_role}}
      </p>
    </div>

    <!-- Card 4 -->
    <div class="text-start mt-[40px] md:mt-[0px]">
      <div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden">
        <img
          data-node="team_member_4_image"
          data-node-type="file"
          data-node-label="Team Member 4 Image"
          data-node-default="../assets/our-people/Frame4.png"
          src="{{team_member_4_image}}"
          class="w-full h-full object-cover"
          alt="Team member"
        />
      </div>
      <h3
        data-node="team_member_4_name"
        data-node-type="text"
        data-node-label="Team Member 4 Name"
        data-node-default="Richard Bloom"
        class="mt-4 font-semibold text-[#000000]"
      >
        {{team_member_4_name}}
      </h3>
      <p
        data-node="team_member_4_role"
        data-node-type="text"
        data-node-label="Team Member 4 Role"
        data-node-default="Customer Success Lead"
        class="text-sm text-[#5F4BE2] mt-1"
      >
        {{team_member_4_role}}
      </p>
    </div>
  </div>
</section>
