Interactive FAQ Accordion Section with CTA

<section id="faq" class="max-w-7xl sm:px-6 sm:mt-20 mr-auto mb-24 ml-auto pr-4 pl-4 edit-mode-selected">
  <div class="relative overflow-hidden rounded-3xl ring-1 ring-white/10 bg-white/5 backdrop-blur">
    <div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
      <div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
        <!-- Intro -->
        <div class="md:col-span-5">
          <h2 class="text-[56px] sm:text-[80px] leading-none font-semibold text-white tracking-tighter font-geist">
            Questions.</h2>
          <p class="mt-3 text-sm sm:text-base text-white/80 font-geist">
            Find answers to common questions about NomadIQ, our adaptive trip planning, and how we can help craft your perfect journey.
          </p>
          <a href="#contact" class="mt-5 inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium tracking-tight text-white/90 bg-white/10 hover:bg-white/15 ring-1 ring-white/15 backdrop-blur">
            <span class="font-geist">Get in touch</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-circle" class="lucide lucide-message-circle w-4 h-4 stroke-1.5"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg>
          </a>
        </div>

        <!-- Accordion -->
        <div class="md:col-span-7">
          <div class="space-y-3">
            <!-- Item 1 (open) -->
            <div class="rounded-2xl ring-1 ring-white/10 bg-white/5 backdrop-blur" data-accordion-item="" data-open="true">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="true" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-white font-geist">How does NomadIQ learn my travel preferences?</span>
                <span class="shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5 text-white/70 hidden"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 text-white/70"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-white/70 font-geist" data-qa="a">
                NomadIQ analyzes your pace, interests, and past choices to understand your travel rhythm. It starts with a brief onboarding questionnaire, then refines suggestions based on your feedback and interactions. The more you use it, the better it gets at matching your vibe.
              </div>
            </div>

            <!-- Item 2 -->
            <div class="rounded-2xl ring-1 ring-white/10 bg-white/5 backdrop-blur" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-white font-geist">Can I use NomadIQ for group trips?</span>
                <span class="shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5 text-white/70"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 text-white/70 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-white/70 font-geist hidden" data-qa="a">
                Absolutely. NomadIQ can balance different group preferences and find activities that work for everyone. You can share planning responsibilities, vote on options, and create itineraries that keep the whole group happy without the usual coordination headaches.
              </div>
            </div>

            <!-- Item 3 -->
            <div class="rounded-2xl ring-1 ring-white/10 bg-white/5 backdrop-blur" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-white font-geist">What happens if my plans change during travel?</span>
                <span class="shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5 text-white/70"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 text-white/70 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-white/70 font-geist hidden" data-qa="a">
                That's where NomadIQ shines. It adapts in real-time to weather changes, crowds, closures, or simply if you're feeling spontaneous. Tap "replan" and it'll instantly suggest alternatives that fit your current mood and location. Flexibility is built into every suggestion.
              </div>
            </div>

            <!-- Item 4 -->
            <div class="rounded-2xl ring-1 ring-white/10 bg-white/5 backdrop-blur" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-white font-geist">Does NomadIQ work offline?</span>
                <span class="shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5 text-white/70"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 text-white/70 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-white/70 font-geist hidden" data-qa="a">
                Core features work offline once your trip is downloaded. You'll have access to your itinerary, maps, saved places, and emergency contacts. Real-time updates and new suggestions require connection, but you won't be stranded without your plans.
              </div>
            </div>

            <!-- Item 5 -->
            <div class="rounded-2xl ring-1 ring-white/10 bg-white/5 backdrop-blur" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-white font-geist">How does budget optimization work?</span>
                <span class="shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5 text-white/70"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 text-white/70 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-white/70 font-geist hidden" data-qa="a">
                Set your budget range and NomadIQ finds the sweet spots—great experiences that won't break the bank. It tracks pricing patterns, suggests optimal timing for bookings, and balances splurges with savings so you get maximum value from every trip dollar.
              </div>
            </div>

            <!-- Item 6 -->
            <div class="rounded-2xl ring-1 ring-white/10 bg-white/5 backdrop-blur" data-accordion-item="">
              <button type="button" class="w-full flex items-center justify-between gap-4 p-5 text-left" aria-expanded="false" data-accordion="faq">
                <span class="text-base sm:text-lg font-semibold tracking-tight text-white font-geist">What makes NomadIQ different from other trip planners?</span>
                <span class="shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" data-icon="plus" class="lucide lucide-plus w-5 h-5 stroke-1.5 text-white/70"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" data-icon="minus" class="lucide lucide-minus w-5 h-5 stroke-1.5 text-white/70 hidden"><path d="M5 12h14"></path></svg>
                </span>
              </button>
              <div class="px-5 pb-5 text-sm text-white/70 font-geist hidden" data-qa="a">
                Most planners give you lists and leave you to figure it out. NomadIQ understands your personal travel rhythm and creates experiences that feel natural to you. It's adaptive, intuitive, and privacy-focused—your data never leaves your device unless you choose to share it.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Initialize open states
      document.querySelectorAll('#faq [data-accordion-item]').forEach(item => {
        const open = item.hasAttribute('data-open');
        const btn = item.querySelector('[data-accordion="faq"]');
        const a = item.querySelector('[data-qa="a"]');
        const plus = item.querySelector('[data-icon="plus"]');
        const minus = item.querySelector('[data-icon="minus"]');
        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
        a.classList.toggle('hidden', !open);
        plus.classList.toggle('hidden', open);
        minus.classList.toggle('hidden', !open);
      });

      // Toggle behavior
      document.querySelectorAll('#faq [data-accordion="faq"]').forEach(btn => {
        btn.addEventListener('click', () => {
          const item = btn.closest('[data-accordion-item]');
          const content = item.querySelector('[data-qa="a"]');
          const plus = item.querySelector('[data-icon="plus"]');
          const minus = item.querySelector('[data-icon="minus"]');
          const expanded = btn.getAttribute('aria-expanded') === 'true';
          btn.setAttribute('aria-expanded', String(!expanded));
          content.classList.toggle('hidden');
          plus.classList.toggle('hidden');
          minus.classList.toggle('hidden');
        });
      });

      // Render icons (safe to call multiple times)
      if (window.lucide && typeof lucide.createIcons === 'function') {
        lucide.createIcons();
      }
    });
  </script>
</section>