<section data-component-type="Content" class="py-16 md:py-24" data-component-slug="ss-sports-running-members-stats">
  <div class="container mx-auto px-4">
    <!-- Header Section -->
    <div class="mb-8 md:mb-12">
      <span data-node="members_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="THE MEMBERS" class="text-red-600 text-sm font-semibold uppercase tracking-wider mb-4 block">{{members_tagline}}</span>

      <h2 data-node="members_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-bold text-black">
        {{members_title}}
      </h2>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 md:mb-12">
      <!-- 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" class="text-gray-600" data-node-default="Sessions designed for all speeds and schedules.">
          {{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 Runners" 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" class="text-gray-600" data-node-default="A lively group that keeps the energy high.">
          {{stat2_desc}}
        </p>
      </div>

      <!-- Description -->
      <div class="flex items-center">
        <p data-node="members_description" data-node-type="textarea" data-node-label="Description" data-node-default="From beginners finding their rhythm to athletes chasing personal bests, our club thrives on diversity, dedication, and constant encouragement." class="text-gray-600 text-base md:text-lg leading-relaxed">
          {{members_description}}
        </p>
      </div>
    </div>

    <!-- Hero Image -->
    <div class="w-full">
      <img data-node="members_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527012/seltrix/templates/ss-sports-running/club-members-hero.png" src="{{members_image}}" alt="Club members" class="w-full h-auto object-cover">
    </div>
  </div>
</section>