<!-- 
  Event Highlights Component
  4 numbered feature cards with images showing event benefits
-->
<section data-component-type="Features" class="py-16 md:py-24">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="text-center mb-12">
      <span
        data-node="highlights_tagline"
        data-node-type="text"
        data-node-label="Tagline"
        data-node-default="EVENT HIGHLIGHTS"
        class="text-red-600 text-sm font-semibold uppercase tracking-wider mb-4 block"
        >{{highlights_tagline}}</span
      >

      <h2
        data-node="highlights_title"
        data-node-type="text"
        data-node-label="Title"
        data-node-default="Designed for Runners, Driven by Passion"
        class="text-3xl md:text-4xl lg:text-5xl font-bold text-black"
      >
        {{highlights_title}}
      </h2>
    </div>

    <!-- Feature Cards -->
    <div class="space-y-4">
      <!-- Feature 1 -->
      <div class="bg-gray-100 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
        <div class="text-5xl md:text-6xl font-light text-gray-300 md:w-24 shrink-0">01</div>
        <div class="flex-1">
          <h3
            data-node="feature1_title"
            data-node-type="text"
            data-node-label="Feature 1 Title"
            data-node-default="Scenic Routes"
            class="text-xl md:text-2xl font-bold text-black mb-2"
          >
            {{feature1_title}}
          </h3>
          <p
            data-node="feature1_desc"
            data-node-type="textarea"
            data-node-label="Feature 1 Description"
            data-node-default="Beautifully mapped paths that turn every mile into a rewarding, visually inspiring experience."
            class="text-gray-600"
          >
            {{feature1_desc}}
          </p>
        </div>
        <img
          data-node="feature1_image"
          data-node-type="file"
          data-node-label="Feature 1 Image"
          data-node-default="../assets/event-feature-1.png"
          src="{{feature1_image}}"
          alt="Scenic routes"
          class="w-full md:w-64 h-48 object-cover"
        />
      </div>

      <!-- Feature 2 -->
      <div class="bg-gray-100 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
        <div class="text-5xl md:text-6xl font-light text-gray-300 md:w-24 shrink-0">02</div>
        <div class="flex-1">
          <h3
            data-node="feature2_title"
            data-node-type="text"
            data-node-label="Feature 2 Title"
            data-node-default="All-Level Categories"
            class="text-xl md:text-2xl font-bold text-black mb-2"
          >
            {{feature2_title}}
          </h3>
          <p
            data-node="feature2_desc"
            data-node-type="textarea"
            data-node-label="Feature 2 Description"
            data-node-default="Walk, jog, or sprint, choose the distance that fits your style and keeps your pace feeling natural."
            class="text-gray-600"
          >
            {{feature2_desc}}
          </p>
        </div>
        <img
          data-node="feature2_image"
          data-node-type="file"
          data-node-label="Feature 2 Image"
          data-node-default="../assets/event-feature-2.png"
          src="{{feature2_image}}"
          alt="All-level categories"
          class="w-full md:w-64 h-48 object-cover"
        />
      </div>

      <!-- Feature 3 -->
      <div class="bg-gray-100 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
        <div class="text-5xl md:text-6xl font-light text-gray-300 md:w-24 shrink-0">03</div>
        <div class="flex-1">
          <h3
            data-node="feature3_title"
            data-node-type="text"
            data-node-label="Feature 3 Title"
            data-node-default="Community Energy"
            class="text-xl md:text-2xl font-bold text-black mb-2"
          >
            {{feature3_title}}
          </h3>
          <p
            data-node="feature3_desc"
            data-node-type="textarea"
            data-node-label="Feature 3 Description"
            data-node-default="Experience unmatched motivation with runners who uplift every step and fuel your momentum forward."
            class="text-gray-600"
          >
            {{feature3_desc}}
          </p>
        </div>
        <img
          data-node="feature3_image"
          data-node-type="file"
          data-node-label="Feature 3 Image"
          data-node-default="../assets/event-feature-3.png"
          src="{{feature3_image}}"
          alt="Community energy"
          class="w-full md:w-64 h-48 object-cover"
        />
      </div>

      <!-- Feature 4 -->
      <div class="bg-gray-100 p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
        <div class="text-5xl md:text-6xl font-light text-gray-300 md:w-24 shrink-0">04</div>
        <div class="flex-1">
          <h3
            data-node="feature4_title"
            data-node-type="text"
            data-node-label="Feature 4 Title"
            data-node-default="Pro-Led Warmups"
            class="text-xl md:text-2xl font-bold text-black mb-2"
          >
            {{feature4_title}}
          </h3>
          <p
            data-node="feature4_desc"
            data-node-type="textarea"
            data-node-label="Feature 4 Description"
            data-node-default="Guided sessions from certified coaches designed to prepare your mind and muscles for a stronger start."
            class="text-gray-600"
          >
            {{feature4_desc}}
          </p>
        </div>
        <img
          data-node="feature4_image"
          data-node-type="file"
          data-node-label="Feature 4 Image"
          data-node-default="../assets/event-feature-4.png"
          src="{{feature4_image}}"
          alt="Pro-led warmups"
          class="w-full md:w-64 h-48 object-cover"
        />
      </div>
    </div>
  </div>
</section>
