{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="page-canvas flex-1">
  {{template "page_header" (pageHeader .View "pages.faq.title" "pages.faq.description" "/static/images/pages/guide.jpg")}}

  <div class="page-container py-8 pb-16">
    <div class="notice-banner mb-6">
      <div class="flex items-start gap-3">
        <svg class="mt-0.5 h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <p>{{t .View "common.confirmBeforeTravel"}}</p>
      </div>
    </div>

    <div id="faq-accordion" class="reveal-stagger space-y-3">
      {{range .Items}}
      <details class="faq-item group">
        <summary class="faq-item__summary">
          <span class="pr-4 font-display text-base font-semibold text-slate-900 group-hover:text-brand-700 dark:text-white dark:group-hover:text-brand-300">{{index . "question"}}</span>
          <span class="faq-item__chevron" aria-hidden="true">
            <svg class="h-5 w-5 text-slate-500 dark:text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
          </span>
        </summary>
        <div class="border-t border-slate-100 px-5 pb-5 pt-4 dark:border-slate-800">
          <p class="text-sm leading-relaxed text-slate-600 dark:text-slate-300">{{index . "answer"}}</p>
        </div>
      </details>
      {{end}}
    </div>
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}