<!-- 
  Values Section Component
  "WHAT WE STAND FOR" 3-column cards
-->
<section data-component-type="Features" class="py-16 md:py-24 lg:py-32">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="text-center mb-12 md:mb-16">
      <span
        data-node="values_tagline"
        data-node-type="text"
        data-node-label="Tagline"
        data-node-default="WHAT WE STAND FOR"
        class="text-red-600 font-semibold text-sm uppercase tracking-wider"
      >
        {{values_tagline}}
      </span>

      <h2
        data-node="values_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="Values That Keep our Club Moving Forward"
        class="text-3xl md:text-4xl lg:text-5xl font-semibold text-black mt-4 mb-8"
      >
        {{values_title}}
      </h2>

      <a
        data-node="values_cta_link"
        data-node-type="url"
        data-node-label="CTA Link"
        data-node-default="#"
        href="{{values_cta_link}}"
        class="inline-block bg-red-600 text-white px-10 py-4 font-medium hover:bg-red-700 transition-colors"
      >
        <span
          data-node="values_cta_text"
          data-node-type="text"
          data-node-label="CTA Text"
          data-node-default="Join the Club"
          >{{values_cta_text}}</span
        >
      </a>
    </div>

    <!-- Values Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
      <!-- Card 1 - Wellness -->
      <div class="group">
        <img
          data-node="value1_image"
          data-node-type="file"
          data-node-label="Value 1 Image"
          data-node-default="../assets/value-wellness.png"
          src="{{value1_image}}"
          alt="Wellness"
          class="w-full h-64 md:h-80 lg:h-[400px] object-cover mb-4"
        />
        <h3
          data-node="value1_title"
          data-node-type="text"
          data-node-label="Value 1 Title"
          data-node-default="Wellness"
          class="text-xl md:text-2xl font-medium text-black mb-2"
        >
          {{value1_title}}
        </h3>
        <p
          data-node="value1_desc"
          data-node-type="text"
          data-node-label="Value 1 Description"
          data-node-default="Movement that strengthens the body and refreshes the mind."
          class="text-gray-600 text-lg mb-3"
        >
          {{value1_desc}}
        </p>
        <a
          data-node="value1_link"
          data-node-type="url"
          data-node-label="Value 1 Link"
          data-node-default="#"
          href="{{value1_link}}"
          class="text-red-600 font-medium hover:text-red-700 inline-flex items-center gap-2"
        >
          <span
            data-node="value1_link_text"
            data-node-type="text"
            data-node-default="Explore Now"
            data-node-label="Value 1 Link Text"
            >{{value1_link_text}}</span
          >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </a>
      </div>

      <!-- Card 2 - Progress -->
      <div class="group">
        <img
          data-node="value2_image"
          data-node-type="file"
          data-node-label="Value 2 Image"
          data-node-default="../assets/value-progress.png"
          src="{{value2_image}}"
          alt="Progress"
          class="w-full h-64 md:h-80 lg:h-[400px] object-cover mb-4"
        />
        <h3
          data-node="value2_title"
          data-node-type="text"
          data-node-label="Value 2 Title"
          data-node-default="Progress"
          class="text-xl md:text-2xl font-medium text-black mb-2"
        >
          {{value2_title}}
        </h3>
        <p
          data-node="value2_desc"
          data-node-type="text"
          data-node-label="Value 2 Description"
          data-node-default="Small steps, sharp discipline, steady growth."
          class="text-gray-600 text-lg mb-3"
        >
          {{value2_desc}}
        </p>
        <a
          data-node="value2_link"
          data-node-type="url"
          data-node-label="Value 2 Link"
          data-node-default="#"
          href="{{value2_link}}"
          class="text-red-600 font-medium hover:text-red-700 inline-flex items-center gap-2"
        >
          <span
            data-node="value2_link_text"
            data-node-type="text"
            data-node-label="Value 2 Link Text"
            data-node-default="Explore Now"
            >{{value2_link_text}}</span
          >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </a>
      </div>

      <!-- Card 3 - Community -->
      <div class="group md:col-span-2 lg:col-span-1">
        <img
          data-node="value3_image"
          data-node-type="file"
          data-node-label="Value 3 Image"
          data-node-default="../assets/value-community.png"
          src="{{value3_image}}"
          alt="Community"
          class="w-full h-64 md:h-80 lg:h-[400px] object-cover mb-4"
        />
        <h3
          data-node="value3_title"
          data-node-type="text"
          data-node-label="Value 3 Title"
          data-node-default="Community"
          class="text-xl md:text-2xl font-medium text-black mb-2"
        >
          {{value3_title}}
        </h3>
        <p
          data-node="value3_desc"
          data-node-type="text"
          data-node-label="Value 3 Description"
          data-node-default="Everyone runs together. Everyone wins together."
          class="text-gray-600 text-lg mb-3"
        >
          {{value3_desc}}
        </p>
        <a
          data-node="value3_link"
          data-node-type="url"
          data-node-label="Value 3 Link"
          data-node-default="#"
          href="{{value3_link}}"
          class="text-red-600 font-medium hover:text-red-700 inline-flex items-center gap-2"
        >
          <span
            data-node="value3_link_text"
            data-node-type="text"
            data-node-default="Explore Now"
            data-node-label="Value 3 Link Text"
            >{{value3_link_text}}</span
          >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>
