# FAQ section

FAQ section is a ready-made neobrutalist section (block) from Cruise UI, built from its components. An FAQ section block: heading and intro over the Accordion, an optional "Still have questions?" card (WhatsApp or email) and optional FAQPage JSON-LD for search engines.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/cruise-faq
```

Import: `import { CruiseFaq } from "@/components/cruise/blocks/faq";`

## When to use

Answering the questions people ask before they buy or sign up.

## When not to

Long help articles (use separate pages) or anything people must read (put it on the page).

## Example (React)

```tsx
"use client";

import { CruiseFaq } from "@/components/cruise/blocks/faq";

export default function FaqExample() {
  return (
    <CruiseFaq
      title="Questions about delivery"
      intro="Everything you need to know before you order."
      items={[
        { question: "How long does delivery take?", answer: "Same day in Lagos for orders before 12 noon; 2–3 days elsewhere." },
        { question: "How much is delivery?", answer: "₦1,500 on Lagos Island and ₦2,500 on the Mainland. Free on orders over ₦20,000." },
        { question: "Can I pay on delivery?", answer: "Yes, in Lagos and Abuja. Elsewhere, pay by card or bank transfer." },
      ]}
      contact={{ whatsapp: { phone: "+2348012345678", label: "Chat on WhatsApp" }, email: "hello@example.com" }}
      jsonLd
    />
  );
}
```

## Props: CruiseFaq

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title?` | `ReactNode` | `"Frequently asked questions"` | — |
| `intro?` | `ReactNode` | `"Quick answers to what people ask us most."` | — |
| `items?` | `CruiseFaqItem[]` | `DEFAULT_ITEMS` | — |
| `multiple?` | `boolean` | `false` | Let several answers be open at once. |
| `contact?` | `{ title?: string \| undefined; text?: string \| undefined; whatsapp?: { phone: string; message?: string \| undefined; label?: string \| undefined; } \| undefined; email?: string \| undefined; emailLabel?: string \| undefined; }` | — | Adds the "Still have questions?" card. |
| `jsonLd?` | `boolean` | `false` | Also output FAQPage structured data. |
| `headingLevel?` | `2 \| 3` | `2` | The section heading's level (cards use the next one down). |
| `className?` | `string` | — | — |

## Accessibility

- A <section> labelled by its heading; each question is a real button (Accordion).
- Headings stay in order: set headingLevel to fit the page.
- The structured data mirrors the visible answers.