<!-- 
  Customer Stats Section Component
  Stats grid with image
-->
<section data-component-type="Content" class="py-20 max-w-[90%] mx-auto">
  <!-- Image -->
  <div class="w-full">
    <img
      data-node="stats_image"
      data-node-type="file"
      data-node-label="Customer Stats Image"
      data-node-default="../assets/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>
