<section data-component-type="Content" class="py-16 md:py-24 lg:py-32" data-component-slug="ss-sports-running-stats">
  <div class="container mx-auto px-4">
    <div class="flex flex-col lg:flex-row gap-12 lg:gap-24">
      <!-- Left Image -->
      <div class="lg:w-1/2">
        <img data-node="stats_image" data-node-type="file" data-node-label="Stats Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527169/seltrix/templates/ss-sports-running/stats-image.png" src="{{stats_image}}" alt="Runner in action" class="w-full h-64 md:h-96 lg:h-full object-cover">
      </div>

      <!-- Right Content -->
      <div class="lg:w-1/2">
        <span data-node="stats_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="CLUB IN NUMBERS" class="text-red-600 font-semibold text-sm uppercase tracking-wider">
          {{stats_tagline}}
        </span>

        <h2 data-node="stats_title" data-node-type="text" data-node-label="Title" data-node-default="Stronger Together, Mile After Mile" class="text-3xl md:text-4xl lg:text-5xl font-semibold text-black mt-4 mb-4">
          {{stats_title}}
        </h2>

        <p data-node="stats_description" data-node-type="textarea" data-node-label="Description" data-node-default="Every run, every member, every milestone, our community grows with the energy of people who show up and push forward." class="text-gray-600 text-lg mb-10">
          {{stats_description}}
        </p>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <!-- Stat 1 -->
          <div class="border border-gray-300 p-6">
            <div class="flex justify-between items-start mb-3">
              <span data-node="stat1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="30+" class="text-4xl md:text-5xl font-medium text-red-600">{{stat1_value}}</span>
              <div class="flex items-center gap-1">
                <div class="w-1 h-4 bg-red-600"></div>
                <div class="w-4 h-4 bg-black rounded-full"></div>
                <div class="w-1 h-4 bg-red-600"></div>
              </div>
            </div>
            <h3 data-node="stat1_title" data-node-type="text" data-node-label="Stat 1 Title" data-node-default="Weekly Sessions" class="text-xl font-medium text-black mb-2">
              {{stat1_title}}
            </h3>
            <p data-node="stat1_desc" data-node-type="text" data-node-label="Stat 1 Description" data-node-default="Weekly Sessions" class="text-gray-600">
              {{stat1_desc}}
            </p>
          </div>

          <!-- Stat 2 -->
          <div class="border border-gray-300 p-6">
            <div class="flex justify-between items-start mb-3">
              <span data-node="stat2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="160+" class="text-4xl md:text-5xl font-medium text-red-600">{{stat2_value}}</span>
              <div class="flex items-center gap-1">
                <div class="w-1 h-4 bg-red-600"></div>
                <div class="w-4 h-4 bg-black rounded-full"></div>
                <div class="w-1 h-4 bg-red-600"></div>
              </div>
            </div>
            <h3 data-node="stat2_title" data-node-type="text" data-node-label="Stat 2 Title" data-node-default="Active Members" class="text-xl font-medium text-black mb-2">
              {{stat2_title}}
            </h3>
            <p data-node="stat2_desc" data-node-type="text" data-node-label="Stat 2 Description" data-node-default="Active Members" class="text-gray-600">
              {{stat2_desc}}
            </p>
          </div>

          <!-- Stat 3 -->
          <div class="border border-gray-300 p-6">
            <div class="flex justify-between items-start mb-3">
              <span data-node="stat3_value" data-node-type="text" data-node-label="Stat 3 Value" data-node-default="7+" class="text-4xl md:text-5xl font-medium text-red-600">{{stat3_value}}</span>
              <div class="flex items-center gap-1">
                <div class="w-1 h-4 bg-red-600"></div>
                <div class="w-4 h-4 bg-black rounded-full"></div>
                <div class="w-1 h-4 bg-red-600"></div>
              </div>
            </div>
            <h3 data-node="stat3_title" data-node-type="text" data-node-label="Stat 3 Title" data-node-default="Annual Events" class="text-xl font-medium text-black mb-2">
              {{stat3_title}}
            </h3>
            <p data-node="stat3_desc" data-node-type="text" data-node-label="Stat 3 Description" data-node-default="Annual Events" class="text-gray-600">
              {{stat3_desc}}
            </p>
          </div>

          <!-- Stat 4 -->
          <div class="border border-gray-300 p-6">
            <div class="flex justify-between items-start mb-3">
              <span data-node="stat4_value" data-node-type="text" data-node-label="Stat 4 Value" data-node-default="86+" class="text-4xl md:text-5xl font-medium text-red-600">{{stat4_value}}</span>
              <div class="flex items-center gap-1">
                <div class="w-1 h-4 bg-red-600"></div>
                <div class="w-4 h-4 bg-black rounded-full"></div>
                <div class="w-1 h-4 bg-red-600"></div>
              </div>
            </div>
            <h3 data-node="stat4_title" data-node-type="text" data-node-label="Stat 4 Title" data-node-default="Community Initiatives" class="text-xl font-medium text-black mb-2">
              {{stat4_title}}
            </h3>
            <p data-node="stat4_desc" data-node-type="text" data-node-label="Stat 4 Description" data-node-default="Community Initiatives" class="text-gray-600">
              {{stat4_desc}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>