<section class="bg-[#FBF8F3] py-16 sm:py-20"
data-component-type="Content">
    <div class="max-w-[90%] mx-auto px-4 ">

        <!-- Section Label -->
        <div class="flex items-center justify-start gap-3 ">
            <p class="text-sm uppercase tracking-wide text-[#193A3F] flex items-center gap-2"
         data-node="section_label"
         data-node-type="text"
         data-node-label="Section Label"
         data-node-default="Essential Travel Information">
        <b>{{section_label}}</b>
      </p>
            <img src="../assets/travel_info.png" class="w-[5%] md:w-[35%]" />
        </div>
        <!-- Accordion -->
         <!-- Accordion -->
    <div class="divide-y divide-[#C7D2D1]">

      <!-- Accordion Item 1 -->
      <div class="accordion-item">
        <button class="accordion-header w-full flex justify-between items-center py-6 text-left">

          <h3 class="font-serif text-xl sm:text-2xl text-[#193A3F] max-w-[230px] md:max-w-full"
              data-node="faq_1_question"
              data-node-type="text"
              data-node-label="FAQ 1 Question"
              data-node-default="What is the best time to visit Japan?">
            {{faq_1_question}}
          </h3>

          <span class="accordion-icon w-10 h-10 flex items-center justify-center text-xl text-[#292D32] border-2 border-[#292D32] rounded-full">
            +
          </span>
        </button>

        <div class="accordion-content hidden pb-6 text-[#7E7E7E] max-w-3xl"
             data-node="faq_1_answer"
             data-node-type="textarea"
             data-node-label="FAQ 1 Answer"
             data-node-default="Spring (March–May) and Autumn (September–November) are ideal for pleasant weather, cherry blossoms, and autumn foliage.">
          {{faq_1_answer}}
        </div>
      </div>

      <!-- Accordion Item 2 -->
      <div class="accordion-item">
        <button class="accordion-header w-full flex justify-between items-center py-6 text-left">

          <h3 class="font-serif text-xl sm:text-2xl text-[#193A3F] max-w-[230px] md:max-w-full"
              data-node="faq_2_question"
              data-node-type="text"
              data-node-label="FAQ 2 Question"
              data-node-default="Do you provide customized itineraries?">
            {{faq_2_question}}
          </h3>

          <span class="accordion-icon w-10 h-10 flex items-center justify-center text-xl text-[#292D32] border-2 border-[#292D32] rounded-full">
            +
          </span>
        </button>

        <div class="accordion-content hidden pb-6 text-[#7E7E7E] max-w-3xl"
             data-node="faq_2_answer"
             data-node-type="textarea"
             data-node-label="FAQ 2 Answer"
             data-node-default="Yes, all our itineraries are fully customized based on your interests, travel style, schedule, and budget.">
          {{faq_2_answer}}
        </div>
      </div>

      <!-- Accordion Item 3 -->
      <div class="accordion-item">
        <button class="accordion-header w-full flex justify-between items-center py-6 text-left">

          <h3 class="font-serif text-xl sm:text-2xl text-[#193A3F] max-w-[230px] md:max-w-full"
              data-node="faq_3_question"
              data-node-type="text"
              data-node-label="FAQ 3 Question"
              data-node-default="Is Japan family-friendly?">
            {{faq_3_question}}
          </h3>

          <span class="accordion-icon w-10 h-10 flex items-center justify-center text-xl text-[#292D32] border-2 border-[#292D32] rounded-full">
            +
          </span>
        </button>

        <div class="accordion-content hidden pb-6 text-[#7E7E7E] max-w-3xl"
             data-node="faq_3_answer"
             data-node-type="textarea"
             data-node-label="FAQ 3 Answer"
             data-node-default="Absolutely. Japan is safe, clean, and offers many attractions suitable for families, including theme parks and cultural experiences.">
          {{faq_3_answer}}
        </div>
      </div>

      <!-- Accordion Item 4 -->
      <div class="accordion-item">
        <button class="accordion-header w-full flex justify-between items-center py-6 text-left">

          <h3 class="font-serif text-xl sm:text-2xl text-[#193A3F] max-w-[230px] md:max-w-full"
              data-node="faq_4_question"
              data-node-type="text"
              data-node-label="FAQ 4 Question"
              data-node-default="Do you assist with visa support?">
            {{faq_4_question}}
          </h3>

          <span class="accordion-icon w-10 h-10 flex items-center justify-center text-xl text-[#292D32] border-2 border-[#292D32] rounded-full">
            +
          </span>
        </button>

        <div class="accordion-content hidden pb-6 text-[#7E7E7E] max-w-3xl"
             data-node="faq_4_answer"
             data-node-type="textarea"
             data-node-label="FAQ 4 Answer"
             data-node-default="Yes, we guide you through visa requirements and documentation to make the process smooth and stress-free.">
          {{faq_4_answer}}
        </div>
      </div>

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


<script>
    document.querySelectorAll(".accordion-header").forEach(button => {
        button.addEventListener("click", () => {
            const item = button.parentElement;
            const content = item.querySelector(".accordion-content");
            const icon = button.querySelector(".accordion-icon");

            document.querySelectorAll(".accordion-content").forEach(el => {
                if (el !== content) {
                    el.classList.add("hidden");
                    el.previousElementSibling.querySelector(".accordion-icon").textContent = "+";
                }
            });

            content.classList.toggle("hidden");
            icon.textContent = content.classList.contains("hidden") ? "+" : "−";
        });
    });
</script>