<section data-component-type="Content" class="py-12 bg-white" data-component-slug="ss-dental-faq">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
      <!-- Left: Title & Description -->
      <div class="lg:max-w-md flex flex-col justify-center">
        <h2 data-node="faq_title" data-node-type="textarea" data-node-label="Title" data-node-default="Common Patient Questions" class="text-3xl md:text-4xl lg:text-[42px] xl:text-5xl font-medium text-gray-900 leading-tight mb-6">
          {{faq_title}}
        </h2>
        <p data-node="faq_description" data-node-type="textarea" data-node-label="Description" data-node-default="Quick answers to help you plan your visit with confidence." class="text-[#575757] text-base leading-relaxed">
          {{faq_description}}
        </p>
      </div>

      <!-- Right: FAQ Accordion -->
      <div class="space-y-4">
        <!-- FAQ Item 1 -->
        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
          <button class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors">
            <span data-node="faq_1_question" data-node-type="text" data-node-label="FAQ 1 Question" data-node-default="How do I book an appointment?" class="text-gray-900 font-medium pr-4 text-xl">{{faq_1_question}}</span>
            <svg class="faq-icon w-5 h-5 text-gray-500 flex-shrink-0 transition-transform" 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="faq-content hidden px-6 pb-4">
            <p data-node="faq_1_answer" data-node-type="textarea" data-node-label="FAQ 1 Answer" data-node-default="You can book an appointment through our website, by calling our reception, or by visiting our clinic in person. We offer online booking for your convenience." class="text-[#575757] text-base leading-relaxed">
              {{faq_1_answer}}
            </p>
          </div>
        </div>

        <!-- FAQ Item 2 -->
        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
          <button class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors">
            <span data-node="faq_2_question" data-node-type="text" data-node-label="FAQ 2 Question" data-node-default="Do you accept insurance and cashless claims?" class="text-gray-900 font-medium pr-4 text-xl">{{faq_2_question}}</span>
            <svg class="faq-icon w-5 h-5 text-gray-500 flex-shrink-0 transition-transform" 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="faq-content hidden px-6 pb-4">
            <p data-node="faq_2_answer" data-node-type="textarea" data-node-label="FAQ 2 Answer" data-node-default="Yes, we accept most major insurance providers and offer cashless claim processing for your convenience." class="text-[#575757] text-base leading-relaxed">
              {{faq_2_answer}}
            </p>
          </div>
        </div>

        <!-- FAQ Item 3 -->
        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
          <button class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors">
            <span data-node="faq_3_question" data-node-type="text" data-node-label="FAQ 3 Question" data-node-default="Are emergency services available 24/7?" class="text-gray-900 font-medium pr-4 text-xl">{{faq_3_question}}</span>
            <svg class="faq-icon w-5 h-5 text-gray-500 flex-shrink-0 transition-transform" 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="faq-content hidden px-6 pb-4">
            <p data-node="faq_3_answer" data-node-type="textarea" data-node-label="FAQ 3 Answer" data-node-default="Yes, our emergency department is open 24/7 with experienced staff ready to handle any urgent medical needs." class="text-[#575757] text-base leading-relaxed">
              {{faq_3_answer}}
            </p>
          </div>
        </div>

        <!-- FAQ Item 4 -->
        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
          <button class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors">
            <span data-node="faq_4_question" data-node-type="text" data-node-label="FAQ 4 Question" data-node-default="How can I access medical reports?" class="text-gray-900 font-medium pr-4 text-xl">{{faq_4_question}}</span>
            <svg class="faq-icon w-5 h-5 text-gray-500 flex-shrink-0 transition-transform" 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="faq-content hidden px-6 pb-4">
            <p data-node="faq_4_answer" data-node-type="textarea" data-node-label="FAQ 4 Answer" data-node-default="Medical reports can be accessed through our patient portal or collected from our reception during working hours." class="text-[#575757] text-base leading-relaxed">
              {{faq_4_answer}}
            </p>
          </div>
        </div>

        <!-- FAQ Item 5 -->
        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
          <button class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left hover:bg-gray-50 transition-colors">
            <span data-node="faq_5_question" data-node-type="text" data-node-label="FAQ 5 Question" data-node-default="Do you offer preventive health checkups?" class="text-gray-900 font-medium pr-4 text-xl">{{faq_5_question}}</span>
            <svg class="faq-icon w-5 h-5 text-gray-500 flex-shrink-0 transition-transform" 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="faq-content hidden px-6 pb-4">
            <p data-node="faq_5_answer" data-node-type="textarea" data-node-label="FAQ 5 Answer" data-node-default="Yes, we offer comprehensive health checkup packages tailored to different age groups and health needs." class="text-[#575757] text-base leading-relaxed">
              {{faq_5_answer}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>