<section data-component-type="FAQ" class="py-16 md:py-24 lg:py-32" data-component-slug="ss-sports-running-faq">
  <div class="container mx-auto px-4">
    <div class="flex flex-col lg:flex-row gap-12 lg:gap-24">
      <!-- Left Column - Title -->
      <div class="lg:w-2/5">
        <h2 data-node="faq_title" data-node-type="text" data-node-default="Frequently Asked Questions" data-node-label="FAQ Title" class="text-3xl md:text-4xl lg:text-5xl font-normal text-black leading-tight">
          {{faq_title}}
        </h2>
        <p data-node="faq_subtitle" data-node-type="textarea" data-node-label="FAQ Subtitle" data-node-default="Our top questions, answered clearly, so you can step onto the track with confidence." class="text-gray-500 text-lg md:text-xl mt-5">
          {{faq_subtitle}}
        </p>
      </div>

      <!-- Right Column - FAQ Items -->
      <div class="lg:w-3/5 space-y-4">
        <!-- FAQ Item 1 - Expanded -->
        <div class="border border-gray-200 bg-gray-50">
          <button class="w-full px-6 py-5 flex justify-between items-center text-left">
            <span data-node="faq_q1" data-node-type="text" data-node-default="Do I need prior running experience?" data-node-label="Question 1" class="text-xl md:text-2xl text-black">{{faq_q1}}</span>
            <svg class="w-6 h-6 text-gray-500 transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <div class="px-6 pb-5">
            <p data-node="faq_a1" data-node-type="textarea" data-node-label="Answer 1" data-node-default="Not at all, beginners, casual joggers, and pros are all welcome." class="text-gray-500 text-lg">
              {{faq_a1}}
            </p>
          </div>
        </div>

        <!-- FAQ Item 2 -->
        <div class="border border-gray-200 bg-white">
          <button class="w-full px-6 py-5 flex justify-between items-center text-left">
            <span data-node="faq_q2" data-node-type="text" data-node-default="How often are the sessions?" data-node-label="Question 2" class="text-xl md:text-2xl text-black">{{faq_q2}}</span>
            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <div class="px-6 pb-5">
            <p data-node="faq_a2" data-node-type="textarea" data-node-label="Answer 2" data-node-default="Not at all, beginners, casual joggers, and pros are all welcome." class="text-gray-500 text-lg">
              {{faq_a2}}
            </p>
          </div>
        </div>

        <!-- FAQ Item 3 -->
        <div class="border border-gray-200 bg-white">
          <button class="w-full px-6 py-5 flex justify-between items-center text-left">
            <span data-node="faq_q3" data-node-type="text" data-node-default="What should I bring on day one?" data-node-label="Question 3" class="text-xl md:text-2xl text-black">{{faq_q3}}</span>
            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <div class="px-6 pb-5">
            <p data-node="faq_a3" data-node-type="textarea" data-node-label="Answer 3" data-node-default="Not at all, beginners, casual joggers, and pros are all welcome." class="text-gray-500 text-lg">
              {{faq_a3}}
            </p>
          </div>
        </div>

        <!-- FAQ Item 4 -->
        <div class="border border-gray-200 bg-white">
          <button class="w-full px-6 py-5 flex justify-between items-center text-left">
            <span data-node="faq_q4" data-node-type="text" data-node-default="Is it suitable for all ages?" data-node-label="Question 4" class="text-xl md:text-2xl text-black">{{faq_q4}}</span>
            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <div class="px-6 pb-5">
            <p data-node="faq_a4" data-node-type="textarea" data-node-label="Answer 4" data-node-default="Not at all, beginners, casual joggers, and pros are all welcome." class="text-gray-500 text-lg">
              {{faq_a4}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>