<section data-component-type="Content" class="py-16 lg:py-24 bg-white" data-component-slug="ss-dental-services-stats">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Header -->
    <div class="mb-10">
      <!-- Badge -->
      <span data-node="services_stats_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Specialties" class="inline-block px-4 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-700 mb-6">{{services_stats_badge}}</span>

      <!-- Title -->
      <h2 data-node="services_stats_title" data-node-type="textarea" data-node-label="Title" data-node-default="Multispecialty Care Across Essential Medical Fields" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight max-w-2xl">
        {{services_stats_title}}
      </h2>
    </div>

    <!-- Tag Buttons Grid -->
    <div class="flex flex-wrap gap-3 mb-16">
      <span data-node="services_tag_1" data-node-type="text" data-node-label="Tag 1" data-node-default="General Medicine" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_1}}</span>
      <span data-node="services_tag_2" data-node-type="text" data-node-label="Tag 2" data-node-default="Cardiology" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_2}}</span>
      <span data-node="services_tag_3" data-node-type="text" data-node-label="Tag 3" data-node-default="Orthopedics" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_3}}</span>
      <span data-node="services_tag_4" data-node-type="text" data-node-label="Tag 4" data-node-default="Neurology" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_4}}</span>
      <span data-node="services_tag_5" data-node-type="text" data-node-label="Tag 5" data-node-default="Pediatrics" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_5}}</span>
      <span data-node="services_tag_6" data-node-type="text" data-node-label="Tag 6" data-node-default="Gynecology" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_6}}</span>
      <span data-node="services_tag_7" data-node-type="text" data-node-label="Tag 7" data-node-default="General Surgery" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_7}}</span>
      <span data-node="services_tag_8" data-node-type="text" data-node-label="Tag 8" data-node-default="ENT" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_8}}</span>
      <span data-node="services_tag_9" data-node-type="text" data-node-label="Tag 9" data-node-default="Ophthalmology" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_9}}</span>
      <span data-node="services_tag_10" data-node-type="text" data-node-label="Tag 10" data-node-default="Dermatology" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_10}}</span>
      <span data-node="services_tag_11" data-node-type="text" data-node-label="Tag 11" data-node-default="Diagnostic Services" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_11}}</span>
      <span data-node="services_tag_12" data-node-type="text" data-node-label="Tag 12" data-node-default="Emergency & Critical Care" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">{{services_tag_12}}</span>
    </div>

    <!-- Stats Counters -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
      <!-- Stat 1 -->
      <div>
        <div class="flex items-baseline gap-0">
          <span data-counter="1" data-node="services_counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="2500" class="text-4xl md:text-5xl font-bold text-gray-900">0</span>
          <span data-node="services_counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="+" class="text-4xl md:text-5xl font-bold text-gray-900">{{services_counter_1_suffix}}</span>
        </div>
        <p data-node="services_counter_1_label" data-node-type="textarea" data-node-label="Counter 1 Label" data-node-default="Successful Treatments: Through reliable medical care." class="text-[#575757] text-base mt-3 leading-relaxed">
          {{services_counter_1_label}}
        </p>
      </div>

      <!-- Stat 2 -->
      <div>
        <div class="flex items-baseline gap-0">
          <span data-counter="2" data-node="services_counter_2_value" data-node-type="number" data-node-label="Counter 2 Value" data-node-default="96" class="text-4xl md:text-5xl font-bold text-gray-900">0</span>
          <span data-node="services_counter_2_suffix" data-node-type="text" data-node-label="Counter 2 Suffix" data-node-default="%" class="text-4xl md:text-5xl font-bold text-gray-900">{{services_counter_2_suffix}}</span>
        </div>
        <p data-node="services_counter_2_label" data-node-type="textarea" data-node-label="Counter 2 Label" data-node-default="Care Satisfaction: Recognized for service quality" class="text-[#575757] text-base mt-3 leading-relaxed">
          {{services_counter_2_label}}
        </p>
      </div>

      <!-- Stat 3 -->
      <div>
        <div class="flex items-baseline gap-0">
          <span data-counter="3" data-node="services_counter_3_value" data-node-type="number" data-node-label="Counter 3 Value" data-node-default="350" class="text-4xl md:text-5xl font-bold text-gray-900">0</span>
          <span data-node="services_counter_3_suffix" data-node-type="text" data-node-label="Counter 3 Suffix" data-node-default="+" class="text-4xl md:text-5xl font-bold text-gray-900">{{services_counter_3_suffix}}</span>
        </div>
        <p data-node="services_counter_3_label" data-node-type="textarea" data-node-label="Counter 3 Label" data-node-default="Healthcare Experts: A multidisciplinary team" class="text-[#575757] text-base mt-3 leading-relaxed">
          {{services_counter_3_label}}
        </p>
      </div>

      <!-- Stat 4 -->
      <div>
        <div class="flex items-baseline gap-0">
          <span data-counter="4" data-node="services_counter_4_value" data-node-type="number" data-node-label="Counter 4 Value" data-node-default="18" class="text-4xl md:text-5xl font-bold text-gray-900">0</span>
          <span data-node="services_counter_4_suffix" data-node-type="text" data-node-label="Counter 4 Suffix" data-node-default="+" class="text-4xl md:text-5xl font-bold text-gray-900">{{services_counter_4_suffix}}</span>
        </div>
        <p data-node="services_counter_4_label" data-node-type="textarea" data-node-label="Counter 4 Label" data-node-default="Years of Service: A proven history of healthcare." class="text-[#575757] text-base mt-3 leading-relaxed">
          {{services_counter_4_label}}
        </p>
      </div>
    </div>
  </div>
</section>