<x-front-layout>
    <x-front.page-hero
      eyebrow="Resources"
      title="Frequently Asked Questions"
      description="Everything you need to know about our global mobility services, investment routes, and advisory process."
      image="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1600&q=80"
      imageAlt="Questions and answers workspace"
      :meta="['Application Process', 'Family Eligibility', 'Program Requirements']" />

    <section class="section-shell py-24 bg-[linear-gradient(180deg,#edf3fa_0%,#f8fbff_100%)] dark:bg-slate-900/50">
      <div class="max-w-4xl mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-black text-secondary dark:text-white mb-4">Frequently Asked
            Questions</h2>
          <p class="text-slate-500 dark:text-slate-400">Everything you need to know about our global mobility
            services</p>
        </div>
        <div class="space-y-4" id="faq-accordion">
          <div class="navy-card rounded-xl overflow-hidden">
            <button type="button"
              class="faq-trigger w-full accent-cta flex items-center justify-between p-6 text-left text-white transition-colors"
              data-faq-trigger aria-expanded="false">
              <span class="font-bold">What is Citizenship by Investment?</span>
              <span class="material-symbols-outlined" data-faq-icon>add</span>
            </button>
            <div
              class="faq-panel hidden p-6 text-slate-600 dark:text-slate-300 bg-white dark:bg-secondary text-sm leading-relaxed border-t border-slate-100 dark:border-slate-800"
              data-faq-panel>
              Citizenship by investment is a legal pathway that allows qualified applicants to obtain a second
              passport through approved contributions such as national funds, government bonds, or real estate.
            </div>
          </div>
          <div class="navy-card rounded-xl overflow-hidden">
            <button type="button"
              class="faq-trigger w-full accent-cta flex items-center justify-between p-6 text-left text-white transition-colors"
              data-faq-trigger aria-expanded="true">
              <span class="font-bold">How long does the application process take?</span>
              <span class="material-symbols-outlined" data-faq-icon>remove</span>
            </button>
            <div
              class="faq-panel p-6 text-slate-600 dark:text-slate-300 bg-white dark:bg-secondary text-sm leading-relaxed border-t border-slate-100 dark:border-slate-800"
              data-faq-panel>
              The timeline varies by program. Some programs like Vanuatu can take as little as 1 month,
              while European programs or specific Caribbean nations can take between 3 to 6 months. Our
              experts handle all documentation to ensure the fastest possible processing.
            </div>
          </div>
          <div class="navy-card rounded-xl overflow-hidden">
            <button type="button"
              class="faq-trigger w-full accent-cta flex items-center justify-between p-6 text-left text-white transition-colors"
              data-faq-trigger aria-expanded="false">
              <span class="font-bold">Can I include my family in the application?</span>
              <span class="material-symbols-outlined" data-faq-icon>add</span>
            </button>
            <div
              class="faq-panel hidden p-6 text-slate-600 dark:text-slate-300 bg-white dark:bg-secondary text-sm leading-relaxed border-t border-slate-100 dark:border-slate-800"
              data-faq-panel>
              Yes. Most programs allow you to include a spouse, dependent children, and in some cases parents,
              with requirements varying depending on the jurisdiction and investment route.
            </div>
          </div>
          <div class="navy-card rounded-xl overflow-hidden">
            <button type="button"
              class="faq-trigger w-full accent-cta flex items-center justify-between p-6 text-left text-white transition-colors"
              data-faq-trigger aria-expanded="false">
              <span class="font-bold">Are there language requirements?</span>
              <span class="material-symbols-outlined" data-faq-icon>add</span>
            </button>
            <div
              class="faq-panel hidden p-6 text-slate-600 dark:text-slate-300 bg-white dark:bg-secondary text-sm leading-relaxed border-t border-slate-100 dark:border-slate-800"
              data-faq-panel>
              Many investment programs do not require formal language exams, but some residency pathways may
              include integration, language, or minimum-stay conditions before long-term status is granted.
            </div>
          </div>
        </div>
        <script>
          (() => {
            const faqTriggers = document.querySelectorAll("[data-faq-trigger]");

            if (!faqTriggers.length) {
              return;
            }

            const setFaqState = (trigger, isOpen) => {
              const panel = trigger.nextElementSibling;
              const icon = trigger.querySelector("[data-faq-icon]");

              if (!panel || !icon) {
                return;
              }

              trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");
              panel.classList.toggle("hidden", !isOpen);
              icon.textContent = isOpen ? "remove" : "add";
            };

            faqTriggers.forEach((trigger) => {
              trigger.addEventListener("click", () => {
                const isCurrentlyOpen = trigger.getAttribute("aria-expanded") === "true";

                faqTriggers.forEach((item) => setFaqState(item, false));
                setFaqState(trigger, !isCurrentlyOpen);
              });
            });
          })();
        </script>
      </div>
    </section>
</x-front-layout>
