<section data-component-type="Content" class="bg-white py-16 lg:py-24 border-t border-gray-100" data-component-slug="ss-interior-kitchen-our_approach">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Badge -->
    <div class="mb-8">
      <span data-node="approach_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Our Approach" class="inline-block py-2 px-6 rounded-full border border-gray-200 text-xs sm:text-sm text-[#666666] bg-[#F9FAFB] tracking-wide">
        {{approach_badge}}
      </span>
    </div>

    <div class="flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-20">
      
      <!-- Left: Heading and Features -->
      <div class="w-full lg:w-1/2">
        <h2 data-node="approach_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Built on Design and Reliability" class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-12 font-mono leading-tight">
          {{approach_heading}}
        </h2>

        <!-- Features List -->
        <div class="flex flex-wrap gap-8">
            <!-- Feature 1 -->
            <div class="flex items-center gap-3">
                <div class="w-6 h-6 rounded-full bg-[#7C3AED] flex items-center justify-center flex-shrink-0">
                  <img data-node="feature_1_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768025075/seltrix/templates/ss-interior-kitchen/feature_1_icon.png" src="{{feature_1_icon}}" alt="Feature 1 Icon" class="w-3 h-3 text-white">
                </div>
                <span data-node="feature_1" data-node-type="text" data-node-label="Feature 1" data-node-default="Smart Technology" class="text-[#636363] font-medium text-lg">
                  {{feature_1}}
                </span>
            </div>

            <!-- Feature 2 -->
             <div class="flex items-center gap-3">
                <div class="w-6 h-6 rounded-full bg-[#7C3AED] flex items-center justify-center flex-shrink-0">
                  <img data-node="feature_2_icon" data-node-type="file" data-node-label="Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768025075/seltrix/templates/ss-interior-kitchen/feature_1_icon.png" src="{{feature_2_icon}}" alt="Feature 2 Icon" class="w-3 h-3 text-white">
                </div>
                <span data-node="feature_2" data-node-type="text" data-node-label="Feature 2" data-node-default="Clean Finishes" class="text-[#636363] font-medium text-lg">
                  {{feature_2}}
                </span>
            </div>

            <!-- Feature 3 -->
             <div class="flex items-center gap-3">
                <div class="w-6 h-6 rounded-full bg-[#7C3AED] flex items-center justify-center flex-shrink-0">
                  <img data-node="feature_3_icon" data-node-type="file" data-node-label="Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768025075/seltrix/templates/ss-interior-kitchen/feature_1_icon.png" src="{{feature_3_icon}}" alt="Feature 3 Icon" class="w-3 h-3 text-white">
                </div>
                <span data-node="feature_3" data-node-type="text" data-node-label="Feature 3" data-node-default="Durable Quality" class="text-[#636363] font-medium text-lg">
                  {{feature_3}}
                </span>
            </div>
        </div>
      </div>

      <!-- Right: Description -->
      <div class="w-full lg:w-1/2 lg:pt-4">
        <p data-node="approach_description" data-node-type="textarea" data-node-label="Description" data-node-default="A focus on thoughtful design ensures every appliance blends effortlessly into modern kitchens. Advanced engineering delivers consistent performance across daily use. Premium materials and careful craftsmanship support durability and long-term value." class="text-lg leading-relaxed text-[#4A6673] font-mono">
          {{approach_description}}
        </p>
      </div>

    </div>

  </div>
</section>