<section data-component-type="Content" class="bg-white py-16 lg:py-24" data-component-slug="ss-interior-kitchen-why_choose">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-16 lg:mb-20">
      <span data-node="why_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="WHY CHOOSE US" class="inline-block py-2 px-4 bg-gray-100 rounded-full border border-gray-200 text-xs font-semibold tracking-wider text-gray-500 mb-6 uppercase">
        {{why_badge}}
      </span>
      <h2 data-node="why_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Your Kitchen Deserves Design, Durability, and Everyday Ease" class="text-4xl sm:text-5xl font-bold text-gray-900 mb-6 leading-tight">
        {{why_heading}}
      </h2>
      <p data-node="why_description" data-node-type="textarea" data-node-label="Description" data-node-default="We combine innovation, craftsmanship, and long-lasting quality to bring you appliances that transform how you cook, clean, and live." class="text-lg text-[#717C8C] leading-relaxed">
        {{why_description}}
      </p>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
      <div class="containercard">
        <div class="card">
          <div class="card-inner" style="--clr: #fff">
            <div class="box">
              <div class="imgBox bg-black relative">
                <div class="absolute bottom-[20px] w-[100%] text-white px-[20px]">
                  <h3 data-node="card_1_count" data-node-type="text" data-node-label="Stat 1 Count" data-node-default="90K+" class="text-5xl font-bold mb-4 tracking-tight">
                    {{card_1_count}}
                  </h3>
                  <p data-node="card_1_detail" data-node-type="textarea" data-node-label="Stat 1 Detail" data-node-default="Products Sold - A trusted choice for homeowners upgrading to modern, effortless living." class="text-[#9C9C9C] leading-relaxed text-sm font-medium pr-4">
                    {{card_1_detail}}
                  </p>
                </div>
              </div>
              <div class="icon">
                <a class="iconBox"> <span class="material-symbols-outlined"> </span></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="containercard">
        <div class="card">
          <div class="card-inner" style="--clr: #fff">
            <div class="box">
              <div class="imgBox bg-black relative">
                <div class="absolute bottom-[20px] w-[100%] text-white px-[20px]">
                  <h3 data-node="card_2_count" data-node-type="text" data-node-label="Stat 2 Count" data-node-default="15+" class="text-5xl font-bold mb-4 tracking-tight">
                    {{card_2_count}}
                  </h3>
                  <p data-node="card_2_detail" data-node-type="textarea" data-node-label="Stat 2 Detail" data-node-default="Years of Expertise, reliability and performance into everyday kitchens." class="text-[#9C9C9C] leading-relaxed text-sm font-medium pr-4">
                    {{card_2_detail}}
                  </p>
                </div>
              </div>
              <div class="icon">
                <a class="iconBox"> <span class="material-symbols-outlined"> </span></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="containercard">
        <div class="card">
          <div class="card-inner" style="--clr: #fff">
            <div class="box">
              <div class="imgBox bg-black relative">
                <div class="absolute bottom-[20px] w-[100%] text-white px-[20px]">
                  <h3 data-node="card_3_count" data-node-type="text" data-node-label="Stat 3 Count" data-node-default="12+" class="text-5xl font-bold mb-4 tracking-tight">
                    {{card_3_count}}
                  </h3>
                  <p data-node="card_3_detail" data-node-type="textarea" data-node-label="Stat 3 Detail" data-node-default="Design Awards for aesthetic innovation and interiors that blend beauty with function." class="text-[#9C9C9C] leading-relaxed text-sm font-medium pr-4">
                    {{card_3_detail}}
                  </p>
                </div>
              </div>
              <div class="icon">
                <a class="iconBox"> <span class="material-symbols-outlined"> </span></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="containercard">
        <div class="card">
          <div class="card-inner" style="--clr: #fff">
            <div class="box">
              <div class="imgBox bg-black relative">
                <div class="absolute bottom-[20px] w-[100%] text-white px-[20px]">
                  <h3 data-node="card_4_count" data-node-type="text" data-node-label="Stat 4 Count" data-node-default="24/7" class="text-5xl font-bold mb-4 tracking-tight">
                    {{card_4_count}}
                  </h3>
                  <p data-node="card_4_detail" data-node-type="textarea" data-node-label="Stat 4 Detail" data-node-default="Premium Support - Dedicated assistance that continues long after installation." class="text-[#9C9C9C] leading-relaxed text-sm font-medium pr-4">
                    {{card_4_detail}}
                  </p>
                </div>
              </div>
              <div class="icon">
                <a class="iconBox"> <span class="material-symbols-outlined"> </span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>