<section data-component-type="Content" class="bg-white py-16 lg:py-24" data-component-slug="ss-interior-kitchen-people_behind">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 data-node="people_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="The People Behind the Brand" class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-6 font-mono leading-tight">
        {{people_heading}}
      </h2>
      <p data-node="people_subtitle" data-node-type="textarea" data-node-label="Subtitle" data-node-default="A team of experienced professionals driving innovation and quality." class="text-lg text-[#5C6B7F] max-w-2xl mx-auto font-mono">
        {{people_subtitle}}
      </p>
    </div>

    <!-- Team Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
      
      <!-- Member 1 -->
      <div class="group">
        <div class="aspect-square overflow-hidden mb-6">
            <img data-node="member_1_image" data-node-type="file" data-node-label="Member 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779874/seltrix/templates/ss-interior-kitchen/team1.png" src="{{member_1_image}}" alt="Team Member" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
        </div>
        <div class="flex justify-between items-start">
            <div>
                <h3 data-node="member_1_name" data-node-type="text" data-node-label="Member 1 Name" data-node-default="Daniel Moore" class="text-xl font-bold text-gray-900 font-mono mb-1">
                  {{member_1_name}}
                </h3>
                <p data-node="member_1_role" data-node-type="text" data-node-label="Member 1 Role" data-node-default="Product Director" class="text-[#5C6B7F] font-mono">
                  {{member_1_role}}
                </p>
            </div>
            <a data-node="member_1_social" data-node-type="text" data-node-label="Member 1 Social Link" data-node-default="#" href="{{member_1_social}}" class="text-gray-400 hover:text-gray-900 transition-colors">
            <img data-node="member_1_social_image" data-node-type="file" data-node-label="Member 1 Social Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779853/seltrix/templates/ss-interior-kitchen/instagram.png" src="{{member_1_social_image}}" alt="Social" class="w-5 h-5">
            
            </a>
        </div>
      </div>

      <!-- Member 2 -->
      <div class="group">
        <div class="aspect-square overflow-hidden mb-6">
            <img data-node="member_2_image" data-node-type="file" data-node-label="Member 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779875/seltrix/templates/ss-interior-kitchen/team2.png" src="{{member_2_image}}" alt="Team Member" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
        </div>
        <div class="flex justify-between items-start">
            <div>
                <h3 data-node="member_2_name" data-node-type="text" data-node-label="Member 2 Name" data-node-default="Lucas Bennett" class="text-xl font-bold text-gray-900 font-mono mb-1">
                  {{member_2_name}}
                </h3>
                <p data-node="member_2_role" data-node-type="text" data-node-label="Member 2 Role" data-node-default="Head of Engineering" class="text-[#5C6B7F] font-mono">
                  {{member_2_role}}
                </p>
            </div>
             <a data-node="member_2_social" data-node-type="text" data-node-label="Member 2 Social Link" data-node-default="#" href="{{member_2_social}}" class="text-gray-400 hover:text-gray-900 transition-colors">
            <img data-node="member_2_social_image" data-node-type="file" data-node-label="Member 2 Social Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779853/seltrix/templates/ss-interior-kitchen/instagram.png" src="{{member_2_social_image}}" alt="Social" class="w-5 h-5">
            </a>
        </div>
      </div>

      <!-- Member 3 -->
      <div class="group">
        <div class="aspect-square overflow-hidden mb-6">
            <img data-node="member_3_image" data-node-type="file" data-node-label="Member 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779876/seltrix/templates/ss-interior-kitchen/team3.png" src="{{member_3_image}}" alt="Team Member" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
        </div>
        <div class="flex justify-between items-start">
            <div>
                <h3 data-node="member_3_name" data-node-type="text" data-node-label="Member 3 Name" data-node-default="Ethan Walker" class="text-xl font-bold text-gray-900 font-mono mb-1">
                  {{member_3_name}}
                </h3>
                <p data-node="member_3_role" data-node-type="text" data-node-label="Member 3 Role" data-node-default="Design Lead" class="text-[#5C6B7F] font-mono">
                  {{member_3_role}}
                </p>
            </div>
             <a data-node="member_3_social" data-node-type="text" data-node-label="Member 3 Social Link" data-node-default="#" href="{{member_3_social}}" class="text-gray-400 hover:text-gray-900 transition-colors">
                  <img data-node="member_3_social_image" data-node-type="file" data-node-label="Member 3 Social Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779853/seltrix/templates/ss-interior-kitchen/instagram.png" src="{{member_3_social_image}}" alt="Social" class="w-5 h-5">
            </a>
        </div>
      </div>

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