<section data-component-type="Content" class="py-20 max-w-[90%] mx-auto" data-component-slug="saas-template-customer-retention">
  <!-- Image -->
  <div class="w-full">
    <img data-node="stats_image" data-node-type="file" data-node-label="Customer Stats Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868955/seltrix/templates/saas-template/customer-retention/image.png" src="{{stats_image}}" alt="Team working" class="w-full rounded-2xl object-cover">
  </div>

  <!-- Stats -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mt-12 text-start">
    <!-- Stat 1 -->
    <div>
      <h3 data-node="stat_1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="98%" class="text-3xl font-semibold text-[#151515]">
        {{stat_1_value}}
      </h3>
      <p data-node="stat_1_desc" data-node-type="textarea" data-node-label="Stat 1 Description" data-node-default="Customer retention powered by exceptional support." class="text-[#4A6673] mt-2">
        {{stat_1_desc}}
      </p>
    </div>

    <!-- Stat 2 -->
    <div>
      <h3 data-node="stat_2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="532" class="text-3xl font-semibold text-[#151515]">
        {{stat_2_value}}
      </h3>
      <p data-node="stat_2_desc" data-node-type="textarea" data-node-label="Stat 2 Description" data-node-default="Businesses scaling daily with our tools." class="text-[#4A6673] mt-2">
        {{stat_2_desc}}
      </p>
    </div>

    <!-- Stat 3 -->
    <div>
      <h3 data-node="stat_3_value" data-node-type="text" data-node-label="Stat 3 Value" data-node-default="12m" class="text-3xl font-semibold text-[#151515]">
        {{stat_3_value}}
      </h3>
      <p data-node="stat_3_desc" data-node-type="textarea" data-node-label="Stat 3 Description" data-node-default="Tasks automated across global teams." class="text-[#4A6673] mt-2">
        {{stat_3_desc}}
      </p>
    </div>

    <!-- Stat 4 -->
    <div>
      <h3 data-node="stat_4_value" data-node-type="text" data-node-label="Stat 4 Value" data-node-default="34+" class="text-3xl font-semibold text-[#151515]">
        {{stat_4_value}}
      </h3>
      <p data-node="stat_4_desc" data-node-type="textarea" data-node-label="Stat 4 Description" data-node-default="Product updates shipped every year." class="text-[#4A6673] mt-2">
        {{stat_4_desc}}
      </p>
    </div>
  </div>
</section>