<!-- 
  About Stats Row Component
  Inline horizontal stats display
-->
<section data-component-type="Content" class="py-8 md:py-12 border-y border-gray-200">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-16 lg:gap-24 text-center md:text-left">
      <!-- Stat 1 -->
      <div>
        <span
          data-node="stat1_value"
          data-node-type="text"
          data-node-label="Stat 1 Value"
          data-node-default="700+"
          class="block text-4xl md:text-5xl font-semibold text-black"
          >{{stat1_value}}
        </span>
        <span
          data-node="stat1_label"
          data-node-type="text"
          data-node-label="Stat 1 Label"
          data-node-default="Runners On Board"
          class="text-gray-600 text-lg md:text-xl"
          >{{stat1_label}}</span
        >
      </div>

      <!-- Stat 2 -->
      <div>
        <span
          data-node="stat2_value"
          data-node-type="text"
          data-node-label="Stat 2 Value"
          data-node-default="37+"
          class="block text-4xl md:text-5xl font-semibold text-black"
          >{{stat2_value}}</span
        >
        <span
          data-node="stat2_label"
          data-node-type="text"
          data-node-label="Stat 2 Label"
          data-node-default="Sessions Every Week"
          class="text-gray-600 text-lg md:text-xl"
          >{{stat2_label}}</span
        >
      </div>

      <!-- Stat 3 -->
      <div>
        <span
          data-node="stat3_value"
          data-node-type="text"
          data-node-label="Stat 3 Value"
          data-node-default="345+"
          class="block text-4xl md:text-5xl font-semibold text-black"
          >{{stat3_value}}</span
        >
        <span
          data-node="stat3_label"
          data-node-type="text"
          data-node-label="Stat 3 Label"
          data-node-default="Races & Events"
          class="text-gray-600 text-lg md:text-xl"
          >{{stat3_label}}</span
        >
      </div>

      <!-- Stat 4 -->
      <div>
        <span
          data-node="stat4_value"
          data-node-type="text"
          data-node-label="Stat 4 Value"
          data-node-default="12"
          class="block text-4xl md:text-5xl font-semibold text-black"
          >{{stat4_value}}</span
        >
        <span
          data-node="stat4_label"
          data-node-type="text"
          data-node-label="Stat 4 Label"
          data-node-default="Expert Coaches"
          class="text-gray-600 text-lg md:text-xl"
          >{{stat4_label}}</span
        >
      </div>
    </div>
  </div>
</section>
