<section class="bg-[#F6F6F6] pt-[20px] pb-[30px]" data-component-type="Content">
  <div class="max-w-[90%] mx-auto px-6 lg:px-10">
    <!-- Stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 ">

      <div class="bg-white rounded-3xl py-10 text-center">
        <h4 class="text-4xl font-bold text-black"
          data-node="stat_1_value"
          data-node-type="text"
          data-node-label="Stat 1 Value"
          data-node-default="300+">
          {{stat_1_value}}
        </h4>
        <p class="mt-2 text-gray-600 text-sm"
          data-node="stat_1_label"
          data-node-type="text"
          data-node-label="Stat 1 Label"
          data-node-default="Completed Lessons">
          {{stat_1_label}}
        </p>
      </div>

      <div class="bg-white rounded-3xl py-10 text-center">
        <h4 class="text-4xl font-bold text-black"
          data-node="stat_2_value"
          data-node-type="text"
          data-node-label="Stat 2 Value"
          data-node-default="12+">
          {{stat_2_value}}
        </h4>
        <p class="mt-2 text-gray-600 text-sm"
          data-node="stat_2_label"
          data-node-type="text"
          data-node-label="Stat 2 Label"
          data-node-default="Expert Mentors">
          {{stat_2_label}}
        </p>
      </div>

      <div class="bg-white rounded-3xl py-10 text-center">
        <h4 class="text-4xl font-bold text-black"
          data-node="stat_3_value"
          data-node-type="text"
          data-node-label="Stat 3 Value"
          data-node-default="134+">
          {{stat_3_value}}
        </h4>
        <p class="mt-2 text-gray-600 text-sm"
          data-node="stat_3_label"
          data-node-type="text"
          data-node-label="Stat 3 Label"
          data-node-default="Active Courses">
          {{stat_3_label}}
        </p>
      </div>

      <div class="bg-white rounded-3xl py-10 text-center">
        <h4 class="text-4xl font-bold text-black"
          data-node="stat_4_value"
          data-node-type="text"
          data-node-label="Stat 4 Value"
          data-node-default="98%">
          {{stat_4_value}}
        </h4>
        <p class="mt-2 text-gray-600 text-sm"
          data-node="stat_4_label"
          data-node-type="text"
          data-node-label="Stat 4 Label"
          data-node-default="Student Satisfaction">
          {{stat_4_label}}
        </p>
      </div>

    </div>
  </div>
</section>
