<section data-component-type="Content" class="py-16 md:py-[20px] bg-white" data-component-slug="ss-interior-kitchen-counter">
  <div class="max-w-[90%] mx-auto">
    <!-- Counters Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
      <!-- Counter 1 -->
      <div class="text-start p-6 bg-white/5 rounded-xl backdrop-blur-sm hover:bg-white/10 transition-all">
        <div class="flex items-center justify-start gap-1">
          <span data-counter="1" class="text-4xl md:text-5xl font-bold text-primary-500">0</span>
          <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="+" data-suffix="1" class="text-2xl md:text-3xl font-bold text-primary-500">{{counter_1_suffix}}</span>
        </div>
        <p data-node="counter_1_label" data-node-type="text" data-node-label="Counter 1 Label" data-node-default="Products" class="text-[#6C6C6C] mt-2 font-medium">
          {{counter_1_label}}
        </p>
      </div>

      <!-- Counter 2 -->
      <div class="text-center p-6 bg-white/5 rounded-xl backdrop-blur-sm hover:bg-white/10 transition-all">
        <div class="flex items-center justify-center gap-1">
          <span data-counter="2" class="text-4xl md:text-5xl font-bold text-primary-500">0</span>
          <span data-node="counter_2_suffix" data-node-type="text" data-node-label="Counter 2 Suffix" data-node-default="+" data-suffix="2" class="text-2xl md:text-3xl font-bold text-primary-500">{{counter_2_suffix}}</span>
        </div>
        <p data-node="counter_2_label" data-node-type="text" data-node-label="Counter 2 Label" data-node-default="Years" class="text-[#6C6C6C] mt-2 font-medium">
          {{counter_2_label}}
        </p>
      </div>

      <!-- Counter 3 -->
      <div class="text-center p-6 bg-white/5 rounded-xl backdrop-blur-sm hover:bg-white/10 transition-all">
        <div class="flex items-center justify-center gap-1">
          <span data-counter="3" class="text-4xl md:text-5xl font-bold text-primary-500">0</span>
          <span data-node="counter_3_suffix" data-node-type="text" data-node-label="Counter 3 Suffix" data-node-default="+" data-suffix="3" class="text-2xl md:text-3xl font-bold text-primary-500">{{counter_3_suffix}}</span>
        </div>
        <p data-node="counter_3_label" data-node-type="text" data-node-label="Counter 3 Label" data-node-default="Partners" class="text-[#6C6C6C] mt-2 font-medium">
          {{counter_3_label}}
        </p>
      </div>

      <!-- Counter 4 -->
      <div class="text-center p-6 bg-white/5 rounded-xl backdrop-blur-sm hover:bg-white/10 transition-all">
        <div class="flex items-center justify-center gap-1">
          <span data-counter="4" class="text-4xl md:text-5xl font-bold text-primary-500">0</span>
          <span data-node="counter_4_suffix" data-node-type="text" data-node-label="Counter 4 Suffix" data-node-default="%" data-suffix="4" class="text-2xl md:text-3xl font-bold text-primary-500">{{counter_4_suffix}}</span>
        </div>
        <p data-node="counter_4_label" data-node-type="text" data-node-label="Counter 4 Label" data-node-default="Satisfaction" class="text-[#6C6C6C] mt-2 font-medium">
          {{counter_4_label}}
        </p>
      </div>
    </div>
  </div>
</section>