<section data-component-type="Content" class="max-w-[90%] mx-auto py-16" data-component-slug="saas-template-contactfaq">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 place-items-center">
    <!-- LEFT IMAGE -->
    <div class="w-full flex justify-center">
      <img data-node="contactFaq_image" data-node-type="file" data-node-label="Contact FAQ Left Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868952/seltrix/templates/saas-template/contact-faq/contact.png" src="{{contactFaq_image}}" alt="Support Agent" class="rounded-xl w-full max-w-[550px] object-cover">
    </div>

    <!-- FAQ SECTION -->
    <div class="accordion-group" data-accordion="default-accordion">
      <!-- Accordion Item 1 -->
      <div class="accordion border p-4 my-5 rounded-[20px] open bg-[#F8FAFB]">
        <button class="accordion-toggle group flex justify-between w-full font-medium py-2">
          <h5 data-node="faq_q1" data-node-type="text" data-node-label="FAQ Question 1" data-node-default="How does automation help my agency?" class="text-dark text-[22px] font-bold">
            {{faq_q1}}
          </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 class="accordion-content overflow-hidden transition-all duration-300" style="max-height: 200px">
          <p data-node="faq_a1" data-node-type="textarea" data-node-label="FAQ Answer 1" data-node-default="Automation eliminates repetitive work, reduces errors, and helps your team deliver faster." class="text-[#4A6673] mt-3">
            {{faq_a1}}
          </p>
        </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="faq_q2" data-node-type="text" data-node-label="FAQ Question 2" data-node-default="What is a CRM Platform?" class="text-dark text-[22px] font-bold">
            {{faq_q2}}
          </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 class="accordion-content max-h-0 overflow-hidden transition-all duration-300">
          <p data-node="faq_a2" data-node-type="textarea" data-node-label="FAQ Answer 2" data-node-default="We ensure transparency with secure & user-friendly content management." class="text-[#4A6673] mt-3">
            {{faq_a2}}
          </p>
        </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="faq_q3" data-node-type="text" data-node-label="FAQ Question 3" data-node-default="Is this tool suitable for small agencies?" class="text-dark text-[22px] font-bold">
            {{faq_q3}}
          </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 class="accordion-content max-h-0 overflow-hidden transition-all duration-300">
          <p data-node="faq_a3" data-node-type="textarea" data-node-label="FAQ Answer 3" data-node-default="Yes, it is suitable for all sizes of agencies from small to large." class="text-[#4A6673] mt-3">
            {{faq_a3}}
          </p>
        </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="faq_q4" data-node-type="text" data-node-label="FAQ Question 4" data-node-default="Do you offer onboarding support?" class="text-dark text-[22px] font-bold">
            {{faq_q4}}
          </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 class="accordion-content max-h-0 overflow-hidden transition-all duration-300">
          <p data-node="faq_a4" data-node-type="textarea" data-node-label="FAQ Answer 4" data-node-default="Yes! We provide live onboarding and training sessions." class="text-[#4A6673] mt-3">
            {{faq_a4}}
          </p>
        </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="faq_q5" data-node-type="text" data-node-label="FAQ Question 5" data-node-default="Can I integrate it with my existing tools?" class="text-dark text-[22px] font-bold">
            {{faq_q5}}
          </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 class="accordion-content max-h-0 overflow-hidden transition-all duration-300">
          <p data-node="faq_a5" data-node-type="textarea" data-node-label="FAQ Answer 5" data-node-default="Yes — supports integration with CRM, automation tools & third-party apps." class="text-[#4A6673] mt-3">
            {{faq_a5}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>