<!-- 
  Members Stats Component
  Stats section with 2 stat cards, description text, and large hero image
-->
<section data-component-type="Content" class="py-16 md:py-24">
  <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="../assets/club-members-hero.png"
        src="{{members_image}}"
        alt="Club members"
        class="w-full h-auto object-cover"
      />
    </div>
  </div>
</section>
