FAQ Accordion

<script setup lang="ts">
import { ref, useId, watch } from 'vue'

export interface FaqItem {
  question: string
  answer: string
}

const props = withDefaults(defineProps<{
  items?: FaqItem[]
  heading?: string
  subheading?: string
  /** Allow several answers to be open at once. When false, opening one closes the others. */
  multiple?: boolean
  /** Indexes of items open on first render. */
  defaultOpen?: number[]
}>(), {
  heading: 'Frequently asked questions',
  subheading: 'Everything you need to know about billing, data and getting your team started. Can\'t find an answer? Our support team replies within a few hours.',
  multiple: false,
  defaultOpen: () => [0],
  items: () => [
    { question: 'Is there a free trial?', answer: 'Yes. Every paid plan starts with a 14-day trial with all features unlocked. We don\'t ask for a card up front, and if you don\'t upgrade your workspace simply moves to the free plan.' },
    { question: 'Can I change plans later?', answer: 'Any time, from the billing page. Upgrades apply immediately and are prorated to the day. Downgrades take effect at the end of your current billing period so you never lose paid time.' },
    { question: 'How does per-seat pricing work?', answer: 'You pay for members who can edit. Guests and viewers are always free, so you can share boards with clients and stakeholders without buying extra seats.' },
    { question: 'Where is my data stored?', answer: 'In the EU by default, in two data centres in Frankfurt and Dublin. Enterprise workspaces can choose US hosting. All data is encrypted in transit and at rest, and backups are kept for 30 days.' },
    { question: 'Can I import from another tool?', answer: 'The importer handles CSV files and most popular project tools. It maps statuses, assignees and due dates for you, and you can preview the result before anything is created.' },
    { question: 'What happens if I cancel?', answer: 'Your workspace stays readable for 90 days and you can export everything as CSV or JSON at any point. After that it is permanently deleted, along with all backups.' },
  ],
})

const emit = defineEmits<{
  toggle: [index: number, open: boolean]
}>()

const uid = useId()
const open = ref<Set<number>>(new Set(props.multiple ? props.defaultOpen : props.defaultOpen.slice(0, 1)))
const buttons = ref<HTMLButtonElement[]>([])

// Switching to single mode keeps only the first open answer.
watch(() => props.multiple, (multiple) => {
  if (!multiple && open.value.size > 1) open.value = new Set([Math.min(...open.value)])
})

function toggle(index: number) {
  const next = new Set(props.multiple ? open.value : [])
  const willOpen = !open.value.has(index)
  if (willOpen) next.add(index)
  else next.delete(index)
  open.value = next
  emit('toggle', index, willOpen)
}

// Optional accordion keyboard pattern: arrows and Home/End move between headers.
function onKeydown(e: KeyboardEvent, index: number) {
  const last = props.items.length - 1
  const target = e.key === 'ArrowDown' ? (index === last ? 0 : index + 1)
    : e.key === 'ArrowUp' ? (index === 0 ? last : index - 1)
      : e.key === 'Home' ? 0
        : e.key === 'End' ? last
          : -1
  if (target < 0) return
  e.preventDefault()
  buttons.value.find(b => b.dataset.index === String(target))?.focus()
}
</script>

<template>
  <section class="px-4 py-20 sm:px-6 sm:py-24 lg:px-8">
    <div class="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[minmax(0,22rem)_1fr] lg:gap-16">
      <div>
        <h2 class="text-3xl font-bold tracking-tight text-balance text-gray-900 sm:text-4xl dark:text-white">{{ heading }}</h2>
        <p class="mt-4 text-base/7 text-pretty text-gray-600 dark:text-gray-400">{{ subheading }}</p>
        <slot name="aside" />
      </div>

      <div class="divide-y divide-gray-200 border-y border-gray-200 dark:divide-white/10 dark:border-white/10">
        <div v-for="(item, index) in items" :key="item.question">
          <h3>
            <button
              :id="`${uid}-q-${index}`"
              ref="buttons"
              type="button"
              :data-index="index"
              :aria-expanded="open.has(index)"
              :aria-controls="`${uid}-a-${index}`"
              class="group flex w-full items-start justify-between gap-6 rounded-lg py-5 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-400"
              @click="toggle(index)"
              @keydown="onKeydown($event, index)"
            >
              <span
                class="text-base font-semibold transition-colors"
                :class="open.has(index) ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-900 group-hover:text-indigo-700 dark:text-white dark:group-hover:text-indigo-300'"
              >{{ item.question }}</span>
              <span
                class="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full ring-1 transition motion-reduce:transition-none"
                :class="open.has(index)
                  ? 'rotate-45 bg-indigo-600 text-white ring-indigo-600 dark:bg-indigo-500 dark:ring-indigo-500'
                  : 'text-gray-500 ring-gray-300 group-hover:text-indigo-600 group-hover:ring-indigo-300 dark:text-gray-400 dark:ring-white/20'"
                aria-hidden="true"
              >
                <svg viewBox="0 0 16 16" class="size-3.5" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"><path d="M8 3.5v9M3.5 8h9" /></svg>
              </span>
            </button>
          </h3>
          <!-- grid-rows 0fr -> 1fr animates to the content's natural height without measuring it. -->
          <div
            :id="`${uid}-a-${index}`"
            role="region"
            :aria-labelledby="`${uid}-q-${index}`"
            :inert="!open.has(index)"
            class="grid transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none"
            :class="open.has(index) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
          >
            <div class="overflow-hidden">
              <div class="pr-12 pb-6 text-base/7 text-gray-600 dark:text-gray-400">
                <slot name="answer" :item="item" :index="index">{{ item.answer }}</slot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FaqAccordion from './Component.vue'

const multiple = ref(false)
</script>

<template>
  <main class="min-h-screen bg-white dark:bg-gray-950">
    <FaqAccordion :multiple="multiple">
      <template #aside>
        <label class="mt-8 flex w-fit cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-300">
          <input v-model="multiple" type="checkbox" class="size-4 rounded accent-indigo-600">
          Allow several open at once
        </label>
        <div class="mt-8 rounded-2xl bg-indigo-50 p-6 ring-1 ring-indigo-100 dark:bg-indigo-500/10 dark:ring-indigo-400/20">
          <p class="font-semibold text-gray-900 dark:text-white">Still have questions?</p>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Talk to a real person on our support team, weekdays 8:00 to 18:00 CET.</p>
          <a
            href="#contact"
            class="mt-4 inline-flex rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
          >Contact support</a>
        </div>
      </template>
    </FaqAccordion>
  </main>
</template>