<section data-section data-component-type="Content" class="py-16 md:py-24 bg-white" data-component-slug="marathon-faq">
  <div class="px-6 lg:px-16 xl:px-[95px]">
    <div class="grid lg:grid-cols-[35%_1fr] gap-12 lg:gap-16 items-start">
      <!-- Left Column - Image with Overlay -->
      <div class="relative">
        <img data-node="faq_image" data-node-type="file" data-node-label="FAQ Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024168/seltrix/templates/marathon-template/faq-runner.png" src="{{faq_image}}" alt="Runner" class="w-full object-cover aspect-[3/4]">

        <!-- Overlay Card -->
        <div class="absolute bottom-5 -left-5 p-6 max-w-[280px] shadow-lg bg-gradient-to-r from-white to-white/70">
          <h3 data-node="faq_card_title" data-node-type="text" data-node-label="Card Title" data-node-default="Race Day Guide" class="text-lg leading-tight font-['Racing_Sans_One'] text-black mb-6">
            {{faq_card_title}}
          </h3>
          <p data-node="faq_card_description" data-node-type="textarea" data-node-label="Card Description" data-node-default="All essentials you need for a smooth running experience." class="text-base font-medium text-[#656A74] mb-4">
            {{faq_card_description}}
          </p>
          <a data-node="faq_card_link" data-node-type="page_links" data-node-label="Card Link" data-node-default="#" href="{{faq_card_link}}" class="inline-flex items-center gap-2 text-[#26C0FD] text-base font-semibold uppercase hover:underline">
            <span data-node="faq_card_link_text" data-node-type="text" data-node-label="Card Link Text" data-node-default="CONTACT US">{{faq_card_link_text}}</span>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.81655 -3.72529e-06C15.2396 -3.72529e-06 19.6334 4.39383 19.6334 9.81685C19.6334 15.2399 15.2396 19.6337 9.81655 19.6337C4.39353 19.6337 -0.000301033 15.2399 -0.000301033 9.81685C-0.000301033 4.39383 4.39353 -3.72529e-06 9.81655 -3.72529e-06ZM14.2896 9.14392L8.9457 3.80007C8.58944 3.44381 7.9561 3.44381 7.59984 3.80007L6.92691 4.473C6.57066 4.82925 6.57066 5.4626 6.92691 5.81886L10.9645 9.81685L6.92691 13.8544C6.57066 14.2107 6.57066 14.844 6.92691 15.2003L7.59984 15.8732C7.9561 16.2295 8.58944 16.2295 8.9457 15.8732L14.2896 10.4898C14.6854 10.1335 14.6854 9.53976 14.2896 9.14392Z" fill="#26C0FD"/>
            </svg>
          </a>
        </div>
      </div>

      <!-- Right Column - FAQ Accordion -->
      <div class="pl-1">
        <!-- Section Header -->
        <p data-node="faq_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="F. A. Q" class="text-base tracking-[0.3em] font-bold text-black uppercase mb-4">
          {{faq_tagline}}
        </p>
        <h2 data-node="faq_title" data-node-type="text" data-node-label="Title" data-node-default="Most Popular Questions" class="text-3xl md:text-4xl text-black mb-4 font-['Racing_Sans_One']">
          {{faq_title}}
        </h2>
        <p data-node="faq_description" data-node-type="textarea" data-node-label="Description" data-node-default="We've compiled helpful insights to ensure you feel fully prepared, informed, and confident long before race day arrives." class="text-[#656A74] mb-8">
          {{faq_description}}
        </p>

        <!-- Accordion Items -->
        <div class="space-y-3" data-accordion>
          <!-- FAQ Item 1 (Default Open) -->
          <div class="border border-[#DCFC62] overflow-hidden" data-accordion-item>
            <button type="button" class="w-full flex items-center justify-between p-5 text-left bg-[#CBEB4F] transition-colors" data-accordion-trigger aria-expanded="true">
              <span data-node="faq_1_question" data-node-type="text" data-node-label="FAQ 1 Question" data-node-default="How do I register for the marathon?" class="text-md font-['Racing_Sans_One']">{{faq_1_question}}</span>
              <svg class="w-5 h-5 text-[#131416] flex-shrink-0 transition-transform accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
            <div class="px-5 pb-5 bg-[#DCFC62]" data-accordion-content>
              <p data-node="faq_1_answer" data-node-type="textarea" data-node-label="FAQ 1 Answer" data-node-default="You can easily sign up through our official online portal. Simply select your preferred race category, fill in your details, and complete the quick registration process to secure your spot. We'll guide you through every step along the way." class="text-[#131416] text-base leading-relaxed">
                {{faq_1_answer}}
              </p>
            </div>
          </div>

          <!-- FAQ Item 2 -->
          <div class="border border-gray-200 overflow-hidden" data-accordion-item>
            <button type="button" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors" data-accordion-trigger aria-expanded="false">
              <span data-node="faq_2_question" data-node-type="text" data-node-label="FAQ 2 Question" data-node-default="Do I need prior running experience?" class="text-md font-['Racing_Sans_One']">{{faq_2_question}}</span>
              <svg class="w-5 h-5 text-[#131416] flex-shrink-0 transition-transform accordion-icon" 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="hidden px-5 pb-5 bg-[#DCFC62]" data-accordion-content>
              <p data-node="faq_2_answer" data-node-type="textarea" data-node-label="FAQ 2 Answer" data-node-default="Not at all! Our marathon welcomes participants of all fitness levels. Whether you're a seasoned runner or just starting out, we have categories and support systems designed to help everyone cross the finish line." class="text-[#131416] text-base leading-relaxed">
                {{faq_2_answer}}
              </p>
            </div>
          </div>

          <!-- FAQ Item 3 -->
          <div class="border border-gray-200 overflow-hidden" data-accordion-item>
            <button type="button" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors" data-accordion-trigger aria-expanded="false">
              <span data-node="faq_3_question" data-node-type="text" data-node-label="FAQ 3 Question" data-node-default="What should I bring on race day?" class="text-md font-['Racing_Sans_One']">{{faq_3_question}}</span>
              <svg class="w-5 h-5 text-[#131416] flex-shrink-0 transition-transform accordion-icon" 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="hidden px-5 pb-5 bg-[#DCFC62]" data-accordion-content>
              <p data-node="faq_3_answer" data-node-type="textarea" data-node-label="FAQ 3 Answer" data-node-default="Bring your registration confirmation, a valid ID, comfortable running attire, and proper footwear. We recommend arriving early to collect your race kit and warm up properly before the start." class="text-[#131416] text-base leading-relaxed">
                {{faq_3_answer}}
              </p>
            </div>
          </div>

          <!-- FAQ Item 4 -->
          <div class="border border-gray-200 overflow-hidden" data-accordion-item>
            <button type="button" class="w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors" data-accordion-trigger aria-expanded="false">
              <span data-node="faq_4_question" data-node-type="text" data-node-label="FAQ 4 Question" data-node-default="Are there medical facilities available?" class="text-md font-['Racing_Sans_One']">{{faq_4_question}}</span>
              <svg class="w-5 h-5 text-[#131416] flex-shrink-0 transition-transform accordion-icon" 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="hidden px-5 pb-5 bg-[#DCFC62]" data-accordion-content>
              <p data-node="faq_4_answer" data-node-type="textarea" data-node-label="FAQ 4 Answer" data-node-default="Yes! We have fully equipped medical stations positioned throughout the course, with trained medical personnel and first-aid resources available at all times to ensure your safety and well-being." class="text-[#131416] text-base leading-relaxed">
                {{faq_4_answer}}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>