<section data-component-type="Content" class="flex justify-center relative bg-white" data-component-slug="saas-template-Faq">
  <section class="w-[90%]">
    <!-- FAQ -->
    <section class="px-6 lg:px-10 py-10 grid lg:grid-cols-2 gap-12 bg-white ">
      <!-- Left: FAQ Heading -->
      <div class>
        <h2 data-node="faq_heading" data-node-type="text" data-node-label="FAQ Section Heading" data-node-default="Frequently Asked Questions" class="lg:text-[50px] text-dark text-[25px] font-bold ">
          {{faq_heading}}
        </h2>
        <p data-node="faq_subtitle" data-node-type="textarea" data-node-label="FAQ Section Subtitle" data-node-default="Find everything you need to know about course access, certifications, learning pace, and support in one easy-to-navigate place." class="text-[#4A6673] mt-4 lg:text-[20px]">
          {{faq_subtitle}}
        </p>
      </div>

      <!-- Right: Accordion Group -->
      <div class="accordion-group" data-accordion="default-accordion">
        <!-- Accordion Item 1 (OPEN DEFAULT + BG) -->
        <div class="accordion border p-4 my-5 rounded-[20px] open bg-[#F8FAFB]">
          <button class="accordion-toggle group flex justify-between items-center gap-[20px] w-full font-medium py-2">
            <h5 data-node="accordion_1_title" data-node-type="text" data-node-label="Accordion Item 1 Title" data-node-default="How does automation help my agency?" class="text-dark text-start md:text-[22px] text-[19px] font-bold">
              {{accordion_1_title}}
            </h5>
            <svg class="w-5 h-5 transition-transform duration-300 rotate-180" viewBox="0 0 22 22">
              <path d="M16.5 8.25L11 13.75L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
          </button>
          <div data-node="accordion_1_content" data-node-type="textarea" data-node-label="Accordion Item 1 Content" data-node-default="Automation eliminates repetitive work, reduces errors, and helps your team deliver faster." class="accordion-content overflow-hidden transition-all duration-300 text-[#6C6C6C]" style="max-height: 200px">
            {{accordion_1_content}}
          </div>
        </div>

        <!-- Accordion Item 2 -->
        <div class="accordion border p-4 my-5 rounded-[20px]">
          <button class="accordion-toggle group flex justify-between w-full font-medium py-2">
            <h5 data-node="accordion_2_title" data-node-type="text" data-node-label="Accordion Item 2 Title" data-node-default="What is a CRM Platform?" class="text-dark text-start md:text-[22px] text-[19px] font-bold">
              {{accordion_2_title}}
            </h5>
            <svg class="w-5 h-5 transition-transform duration-300" viewBox="0 0 22 22">
              <path d="M16.5 8.25L11 13.75L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
          </button>
          <div data-node="accordion_2_content" data-node-type="textarea" data-node-label="Accordion Item 2 Content" data-node-default="We ensure transparency with secure & user-friendly content management." class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
            {{accordion_2_content}}
          </div>
        </div>

        <!-- Accordion Item 3 -->
        <div class="accordion border p-4 my-5 rounded-[20px]">
          <button class="accordion-toggle group flex justify-between w-full font-medium py-2">
            <h5 data-node="accordion_3_title" data-node-type="text" data-node-label="Accordion Item 3 Title" data-node-default="Is this tool suitable for small agencies?" class="text-dark text-start md:text-[22px] text-[19px] font-bold">
              {{accordion_3_title}}
            </h5>
            <svg class="w-5 h-5 transition-transform duration-300" viewBox="0 0 22 22">
              <path d="M16.5 8.25L11 13.75L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
          </button>
          <div data-node="accordion_3_content" data-node-type="textarea" data-node-label="Accordion Item 3 Content" data-node-default="Yes, it is suitable for all sizes of agencies from small to large." class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
            {{accordion_3_content}}
          </div>
        </div>

        <!-- Accordion Item 4 -->
        <div class="accordion border p-4 my-5 rounded-[20px]">
          <button class="accordion-toggle group flex justify-between w-full font-medium py-2">
            <h5 data-node="accordion_4_title" data-node-type="text" data-node-label="Accordion Item 4 Title" data-node-default="Do you offer onboarding support?" class="text-dark text-start md:text-[22px] text-[19px] font-bold">
              {{accordion_4_title}}
            </h5>
            <svg class="w-5 h-5 transition-transform duration-300" viewBox="0 0 22 22">
              <path d="M16.5 8.25L11 13.75L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
          </button>
          <div data-node="accordion_4_content" data-node-type="textarea" data-node-label="Accordion Item 4 Content" data-node-default="Yes! We provide live onboarding and training sessions." class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
            {{accordion_4_content}}
          </div>
        </div>

        <!-- Accordion Item 5 -->
        <div class="accordion border p-4 my-5 rounded-[20px]">
          <button class="accordion-toggle group flex justify-between w-full font-medium py-2">
            <h5 data-node="accordion_5_title" data-node-type="text" data-node-label="Accordion Item 5 Title" data-node-default="Can I integrate it with my existing tools?" class="text-dark text-start md:text-[22px] text-[19px] font-bold">
              {{accordion_5_title}}
            </h5>
            <svg class="w-5 h-5 transition-transform duration-300" viewBox="0 0 22 22">
              <path d="M16.5 8.25L11 13.75L5.5 8.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
          </button>
          <div data-node="accordion_5_content" data-node-type="textarea" data-node-label="Accordion Item 5 Content" data-node-default="Yes — supports integration with CRM, automation tools & third-party apps." class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
            {{accordion_5_content}}
          </div>
        </div>
      </div>
    </section>
  </section>
</section>