<section data-component-type="Content" >
<section class="flex justify-center relative bg-[#F6F6F6]">
  <section class="w-[90%]">
    <section class="px-6 lg:px-10 py-10 grid lg:grid-cols-2 gap-12 items-center">

      <!-- LEFT -->
      <div class="max-w-[70%]">
        <h2 class="lg:text-[50px] text-[25px] font-bold text-dark"
         data-node="Faq" data-node-type="text"
         data-node-default="Frequently Asked Questions">
          {{Faq}}
        </h2>
        <p class="text-[#6C6C6C] mt-4 lg:text-[20px]"
         data-node="Faq_desc" data-node-type="text"
         data-node-default="Find everything you need to know about course access, certifications,
          learning pace, and support in one easy-to-navigate place.">
          {{Faq_desc}}
        </p>
      </div>

      <!-- RIGHT -->
      <div class="accordion-group">

        <!-- ITEM -->
        <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
          <button class="accordion-toggle flex justify-between w-full py-2">
            <h5 class="text-[22px] font-bold text-dark"
             data-node="Question1" data-node-type="text"
             data-node-default=" How does automation help my agency?">
             {{Question1}}
            </h5>
            <img src="../assets/arrow-down.png"
              class="accordion-arrow w-5 h-5 transition-transform duration-300" />
          </button>
          <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]"
            data-node="Answer1" data-node-type="text"
            data-node-default="Automation eliminates repetitive work, reduces errors, and helps your team deliver faster." >
           {{Answer1}}
          </div>
        </div>

        <!-- ITEM -->
        <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
          <button class="accordion-toggle flex justify-between w-full py-2">
             <h5 class="text-[22px] font-bold text-dark"
             data-node="Question2" data-node-type="text"
             data-node-default="What is a CRM Platform?">
             {{Question2}}
            </h5>
            <img src="../assets/arrow-down.png"
            class="accordion-arrow w-5 h-5 transition-transform duration-300" />
            </button>
          <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]"
           data-node="Answer2" data-node-type="text"
           data-node-default="We ensure transparency with secure & user-friendly content management." >   
           {{Answer2}}  
          </div>
        </div>

        <!-- ITEM -->
        <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
          <button class="accordion-toggle flex justify-between w-full py-2">
             <h5 class="text-[22px] font-bold text-dark"
              data-node="Question3" data-node-type="text"
              data-node-default="Is this tool suitable for small agencies?">
             {{Question3}}
            </h5>
            <img src="../assets/arrow-down.png"
              class="accordion-arrow w-5 h-5 transition-transform duration-300" />
          </button>
          <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]"
              data-node="Answer3" data-node-type="text"
              data-node-default=" Yes, it is suitable for agencies of all sizes.">{{Answer3}}
          </div>
        </div>

        <!-- ITEM -->
        <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
          <button class="accordion-toggle flex justify-between w-full py-2">
            <h5 class="text-[22px] font-bold text-dark"
              data-node="Question4" data-node-type="text"
              data-node-default="Do you offer onboarding support?">
             {{Question4}}
            </h5>
            <img src="../assets/arrow-down.png"
              class="accordion-arrow w-5 h-5 transition-transform duration-300" />
          </button>
          <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]"
              data-node="Answer4" data-node-type="text"
              data-node-default="  Yes! We provide live onboarding and training sessions.">
            {{Answer4}}
          </div>
        </div>

        <!-- ITEM -->
        <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
          <button class="accordion-toggle flex justify-between w-full py-2">
             <h5 class="text-[22px] font-bold text-dark"
              data-node="Question5" data-node-type="text"
              data-node-default="Can I integrate it with my existing tools?">
             {{Question5}}
            </h5>
            <img src="../assets/arrow-down.png"
              class="accordion-arrow w-5 h-5 transition-transform duration-300" />
          </button>
           <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]"
              data-node="Answer5" data-node-type="text"
              data-node-default="Yes — supports CRM, automation tools & third-party apps.">
            {{Answer5}}
          </div>
        </div>

      </div>
    </section>
  </section>
</section>
</section>


<script>
  document.querySelectorAll(".accordion").forEach((item) => {
    const btn = item.querySelector(".accordion-toggle");
    const content = item.querySelector(".accordion-content");
    const arrow = item.querySelector(".accordion-arrow");

    btn.addEventListener("click", () => {
      const isOpen = item.classList.contains("open");

      // Close all
      document.querySelectorAll(".accordion").forEach((acc) => {
        acc.classList.remove("open", "bg-[#F8FAFB]");
        acc.querySelector(".accordion-content").style.maxHeight = "0px";
        acc.querySelector(".accordion-arrow").classList.remove("rotate-180");
      });

      // Open clicked
      if (!isOpen) {
        item.classList.add("open", "bg-[#F8FAFB]");
        content.style.maxHeight = content.scrollHeight + "px";
        arrow.classList.add("rotate-180");
      }
    });
  });
</script>
