<section class="w-full bg-black px-4 md:px-12 lg:px-24 py-24 md:py-36 lg:py-40" data-component-type="Content">
  <!-- Hidden dynamic icons -->
  <img
    src="{{faq_icon_down}}"
    data-node="faq_icon_down"
    data-node-type="file"
    data-node-label="FAQ Arrow Down Icon"
    data-node-default="./assets/arrow-down.svg"
    style="display: none"
  />

  <img
    src="{{faq_icon_up}}"
    data-node="faq_icon_up"
    data-node-type="file"
    data-node-label="FAQ Arrow Up Icon"
    data-node-default="./assets/arrow-up.svg"
    style="display: none"
  />

  <!-- Heading -->
  <h2
    class="font-['Cabin'] text-[42px] md:text-[56px] font-medium text-white text-center"
    data-node="faq_title"
    data-node-type="text"
    data-node-label="FAQ Title"
    data-node-default="Frequently asked Question"
  >
    {{faq_title}}
  </h2>

  <p
    class="mt-4 font-['Cabin'] text-[24px] font-normal text-center text-[#7E7E7E] max-w-[700px] mx-auto"
    data-node="faq_subtitle"
    data-node-type="text"
    data-node-label="FAQ Subtitle"
    data-node-default="Questions worth asking. answers, no sales spin."
  >
    {{faq_subtitle}}
  </p>

  <!-- FAQ LIST -->
  <div class="w-full max-w-[900px] mx-auto mt-16 space-y-6">
    <!-- FAQ 1 -->
    <div
      class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]"
    >
      <div class="flex justify-between items-center">
        <div
          class="font-['Cabin'] text-[24px] md:text-[32px] font-normal text-white"
          data-node="faq_1_question"
          data-node-type="text"
          data-node-label="FAQ 1 Question"
          data-node-default="Do you work with specific industries?"
        >
          {{faq_1_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300" />
      </div>

      <p
        class="faq-answer mt-4 font-['Cabin'] text-[20px] text-[#7E7E7E] leading-[130%] hidden max-w-[900px]"
        data-node="faq_1_answer"
        data-node-type="textarea"
        data-node-label="FAQ 1 Answer"
        data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius."
      >
        {{faq_1_answer}}
      </p>
    </div>

    <!-- FAQ 2 -->
    <div
      class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]"
    >
      <div class="flex justify-between items-center">
        <div
          class="font-['Cabin'] text-[24px] md:text-[32px] font-normal text-white"
          data-node="faq_2_question"
          data-node-type="text"
          data-node-label="FAQ 2 Question"
          data-node-default="How long before we see results?"
        >
          {{faq_2_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300" />
      </div>

      <p
        class="faq-answer mt-4 font-['Cabin'] text-[20px] text-[#7E7E7E] leading-[130%] hidden max-w-[900px]"
        data-node="faq_2_answer"
        data-node-type="textarea"
        data-node-label="FAQ 2 Answer"
        data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius."
      >
        {{faq_2_answer}}
      </p>
    </div>

    <!-- FAQ 3 -->
    <div
      class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]"
    >
      <div class="flex justify-between items-center">
        <div
          class="font-['Cabin'] text-[24px] md:text-[32px] font-normal text-white"
          data-node="faq_3_question"
          data-node-type="text"
          data-node-label="FAQ 3 Question"
          data-node-default="Do you offer only strategy or execution too?"
        >
          {{faq_3_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300" />
      </div>

      <p
        class="faq-answer mt-4 font-['Cabin'] text-[20px] text-[#7E7E7E] leading-[130%] hidden max-w-[900px]"
        data-node="faq_3_answer"
        data-node-type="textarea"
        data-node-label="FAQ 3 Answer"
        data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius."
      >
        {{faq_3_answer}}
      </p>
    </div>

    <!-- FAQ 4 -->
    <div
      class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]"
    >
      <div class="flex justify-between items-center">
        <div
          class="font-['Cabin'] text-[24px] md:text-[32px] font-normal text-white"
          data-node="faq_4_question"
          data-node-type="text"
          data-node-label="FAQ 4 Question"
          data-node-default="How do you measure success?"
        >
          {{faq_4_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300" />
      </div>

      <p
        class="faq-answer mt-4 font-['Cabin'] text-[20px] text-[#7E7E7E] leading-[130%] hidden max-w-[900px]"
        data-node="faq_4_answer"
        data-node-type="textarea"
        data-node-label="FAQ 4 Answer"
        data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius."
      >
        {{faq_4_answer}}
      </p>
    </div>

    <!-- FAQ 5 -->
    <div
      class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]"
    >
      <div class="flex justify-between items-center">
        <div
          class="font-['Cabin'] text-[24px] md:text-[32px] font-normal text-white"
          data-node="faq_5_question"
          data-node-type="text"
          data-node-label="FAQ 5 Question"
          data-node-default="Can you work with in-house teams?"
        >
          {{faq_5_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300" />
      </div>

      <p
        class="faq-answer mt-4 font-['Cabin'] text-[20px] text-[#7E7E7E] leading-[130%] hidden max-w-[900px]"
        data-node="faq_5_answer"
        data-node-type="textarea"
        data-node-label="FAQ 5 Answer"
        data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius."
      >
        {{faq_5_answer}}
      </p>
    </div>
  </div>

  <!-- FAQ SCRIPT -->
  <script>
    document.querySelectorAll(".faq-item").forEach((item) => {
      item.addEventListener("click", () => {
        // Close any open FAQ
        if (!item.classList.contains("open")) {
          document.querySelectorAll(".faq-item.open").forEach((openItem) => {
            openItem.classList.remove("open");
            openItem.querySelector(".faq-arrow").classList.remove("rotate-180");
            openItem.querySelector(".faq-answer").classList.add("hidden");
          });
        }

        // Toggle current FAQ
        item.classList.toggle("open");
        const arrow = item.querySelector(".faq-arrow");
        const answer = item.querySelector(".faq-answer");

        if (item.classList.contains("open")) {
          arrow.classList.add("rotate-180");
          answer.classList.remove("hidden");
        } else {
          arrow.classList.remove("rotate-180");
          answer.classList.add("hidden");
        }
      });
    });
  </script>
</section>
