<section data-component-type="Content" class="flex justify-center relative bg-white">
  <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>
        <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="Learn more about how our system works and what it can do for your agency."
          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 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-[22px] 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"
            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-[22px] 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"
          >
            {{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-[22px] 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"
          >
            {{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-[22px] 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"
          >
            {{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-[22px] 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"
          >
            {{accordion_5_content}}
          </div>
        </div>
      </div>
    </section>
  </section>
</section>

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

    if (item.classList.contains("open")) {
      content.style.maxHeight = content.scrollHeight + "px";
      icon.classList.add("rotate-180");
    }

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

      // Close all accordions and reset icons
      document.querySelectorAll(".accordion").forEach((i) => {
        i.classList.remove("open", "bg-[#F8FAFB]");
        i.querySelector(".accordion-content").style.maxHeight = "0px";
        i.querySelector(".accordion-toggle svg").classList.remove("rotate-180");
      });

      // Open clicked accordion if it wasn't already open
      if (!open) {
        item.classList.add("open", "bg-[#F8FAFB]");
        content.style.maxHeight = content.scrollHeight + "px";
        icon.classList.add("rotate-180");
      }
    });
  });
</script>
