<section data-component-type="Content" class="bg-white" data-component-slug="ss-dental-stats">
  <div class="max-w-[1920px] mx-auto">
    <!-- Full Width Image -->
    <div class="w-full px-8 lg:px-16 xl:px-24">
      <img data-node="stats_image" data-node-type="file" data-node-label="Stats Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053609/seltrix/templates/ss-dental-template/stats-image.png" src="{{stats_image}}" alt="Healthcare professionals" class="w-full h-auto rounded-2xl object-cover aspect-[1728/912]">
    </div>

    <!-- Content Section -->
    <div class="px-8 lg:px-16 xl:px-24 py-16 lg:py-20">
      <!-- Two Column Layout -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 mb-16">
        <!-- Left Column -->
        <div>
          <!-- Badge -->
          <div class="flex items-center gap-2 mb-6">
            <span data-node="stats_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Excellence" class="inline-block px-5 py-2 border border-gray-200 rounded-lg text-sm text-gray-500 mb-6">{{stats_badge}}</span>
          </div>
          <!-- Title -->
          <h2 data-node="stats_title" data-node-type="textarea" data-node-label="Title" data-node-default="Healthcare Built on Experience and Trust" class="text-3xl md:text-4xl lg:text-[42px] font-medium text-gray-900 leading-tight">
            {{stats_title}}
          </h2>
        </div>

        <!-- Right Column -->
        <div class="lg:pt-8">
          <!-- Description -->
          <p data-node="stats_description" data-node-type="textarea" data-node-label="Description" data-node-default="We combine medical expertise with compassionate care to deliver reliable outcomes. Our focus remains on safety, accuracy, and long-term patient wellness." class="text-[#575757] text-base leading-relaxed mb-6">
            {{stats_description}}
          </p>
          <!-- Feature Tags -->
          <div class="flex flex-wrap gap-4">
            <div class="flex items-center gap-2">
              <img data-node="feature_tag_1_icon" data-node-type="file" data-node-label="Feature Tag 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053605/seltrix/templates/ss-dental-template/stats-icon-1.svg" src="{{feature_tag_1_icon}}" alt="Check icon" class="w-14 h-14">
              <span data-node="feature_tag_1" data-node-type="text" data-node-label="Feature Tag 1" data-node-default="Patient-Centric Care" class="text-[#575757] text-sm font-medium">{{feature_tag_1}}</span>
            </div>
            <div class="flex items-center gap-2">
              <img data-node="feature_tag_2_icon" data-node-type="file" data-node-label="Feature Tag 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053607/seltrix/templates/ss-dental-template/stats-icon-2.svg" src="{{feature_tag_2_icon}}" alt="Check icon" class="w-14 h-14">
              <span data-node="feature_tag_2" data-node-type="text" data-node-label="Feature Tag 2" data-node-default="Advanced Technology" class="text-[#575757] text-sm font-medium">{{feature_tag_2}}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Stats Counters -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 pt-8">
        <!-- Stat 1 -->
        <div>
          <div class="flex items-baseline gap-0">
            <span data-counter="1" data-node="counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="3000" class="text-4xl md:text-5xl font-bold text-gray-900">0</span>
            <span data-node="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">{{counter_1_suffix}}</span>
          </div>
          <p data-node="counter_1_label" data-node-type="textarea" data-node-label="Counter 1 Label" data-node-default="Patients Treated: Trusted by thousands for consistent medical results and care quality." class="text-[#575757] text-base mt-3 leading-relaxed">
            {{counter_1_label}}
          </p>
        </div>

        <!-- Stat 2 -->
        <div>
          <div class="flex items-baseline gap-0">
            <span data-counter="2" data-node="counter_2_value" data-node-type="number" data-node-label="Counter 2 Value" data-node-default="95" class="text-4xl md:text-5xl font-bold text-gray-900">0</span>
            <span data-node="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">{{counter_2_suffix}}</span>
          </div>
          <p data-node="counter_2_label" data-node-type="textarea" data-node-label="Counter 2 Label" data-node-default="Patient Satisfaction: Rated highly for treatment outcomes and service experience." class="text-[#575757] text-base mt-3 leading-relaxed">
            {{counter_2_label}}
          </p>
        </div>

        <!-- Stat 3 -->
        <div>
          <div class="flex items-baseline gap-0">
            <span data-counter="3" data-node="counter_3_value" data-node-type="number" data-node-label="Counter 3 Value" data-node-default="300" class="text-4xl md:text-5xl font-bold text-gray-900">0</span>
            <span data-node="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">{{counter_3_suffix}}</span>
          </div>
          <p data-node="counter_3_label" data-node-type="textarea" data-node-label="Counter 3 Label" data-node-default="Successful Procedures: Handled by experienced specialists with proven expertise." class="text-[#575757] text-base mt-3 leading-relaxed">
            {{counter_3_label}}
          </p>
        </div>

        <!-- Stat 4 -->
        <div>
          <div class="flex items-baseline gap-0">
            <span data-counter="4" data-node="counter_4_value" data-node-type="number" data-node-label="Counter 4 Value" data-node-default="50" class="text-4xl md:text-5xl font-bold text-gray-900">0</span>
            <span data-node="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">{{counter_4_suffix}}</span>
          </div>
          <p data-node="counter_4_label" data-node-type="textarea" data-node-label="Counter 4 Label" data-node-default="Medical Experts: A multidisciplinary team delivering comprehensive care." class="text-[#575757] text-base mt-3 leading-relaxed">
            {{counter_4_label}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>