<section class="py-16 bg-white overflow-hidden" data-component-type="Content" data-component-slug="home-appliances-template-our_client">
  <div class="max-w-[90%] mx-auto px-4">
    <!-- Top Section: Title & Logos -->
    <div class="text-center mb-20">
      <h2 class="text-3xl font-bold text-gray-900 mb-12" data-node="title" data-node-type="text" data-node-default="Our Clients">
        {{title}}
      </h2>
      <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
        <img src="{{c1_logo}}" alt="Client 1" class="h-8 md:h-10 object-contain opacity-80 hover:opacity-100 transition" data-node="c1_logo" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046200/seltrix/templates/home-appliances-template/OmegaMillion.png">
        <img src="{{c2_logo}}" alt="Client 2" class="h-8 md:h-10 object-contain opacity-80 hover:opacity-100 transition" data-node="c2_logo" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046150/seltrix/templates/home-appliances-template/Harvest.png">
        <img src="{{c3_logo}}" alt="Client 3" class="h-8 md:h-10 object-contain opacity-80 hover:opacity-100 transition" data-node="c3_logo" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046142/seltrix/templates/home-appliances-template/EdgeKart.png">
        <img src="{{c4_logo}}" alt="Client 4" class="h-8 md:h-10 object-contain opacity-80 hover:opacity-100 transition" data-node="c4_logo" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768049806/seltrix/templates/home-appliances-template/Pastel_Co.png">
        <img src="{{c5_logo}}" alt="Client 5" class="h-8 md:h-10 object-contain opacity-80 hover:opacity-100 transition" data-node="c5_logo" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046167/seltrix/templates/home-appliances-template/InfinityParker.png">
      </div>
    </div>

    <!-- Bottom Section: Split Content -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <!-- Left: Text Info -->
      <div class="space-y-6">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900" data-node="info_title" data-node-type="text" data-node-default="Built for Modern Homes Everywhere">
          {{info_title}}
        </h2>
        <p class="text-gray-600 leading-relaxed" data-node="info_desc" data-node-type="textarea" data-node-default="Our curated appliance collection ensures every home, big or small, gets access to advanced, reliable, and stylish solutions.">
          {{info_desc}}
        </p>
      </div>

      <!-- Right: Two Boxes -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Box 1 -->
        <div class="bg-[#F5D828]/20 p-8 border border-dashed border-blue-900/30 rounded-sm">
          <h3 class="font-bold text-center text-gray-900 mb-3" data-node="box1_title" data-node-type="text" data-node-default="Trusted by Many">
            {{box1_title}}
          </h3>
          <p class="text-sm text-center text-gray-600 leading-relaxed" data-node="box1_desc" data-node-type="textarea" data-node-default="Chosen by thousands of households for quality and reliability. Designed to exceed expectations in every category.">
            {{box1_desc}}
          </p>
        </div>

        <!-- Box 2 -->
        <div class="bg-[#F5D828]/20 p-8 border border-dashed border-blue-900/30 rounded-sm">
          <h3 class="font-bold text-center text-gray-900 mb-3" data-node="box2_title" data-node-type="text" data-node-default="Service That Cares">
            {{box2_title}}
          </h3>
          <p class="text-sm text-center text-gray-600 leading-relaxed" data-node="box2_desc" data-node-type="textarea" data-node-default="Expert support from purchase to setup and beyond. We stay committed to making your experience effortless.">
            {{box2_desc}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>