<!-- 
  Stats Section Component
  Responsive grid showing club statistics
-->
<section data-component-type="Content" class="py-16 md:py-24 lg:py-32">
  <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="../assets/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>
