# FAQ

> Section FAQ ready-to-use cho landing page — title + subtitle + list câu hỏi accordion. Self-contained, không cần wire Accordion thủ công.

**Archetype mapping:** C (Landing) · D (Editorial) — section chuẩn của landing page có nhiều câu hỏi khách.

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `ReactNode` | — | Heading section (text-3xl/4xl, font-display) |
| `subtitle` | `ReactNode` | — | Subheading |
| `items` | `FAQItemData[]` | required | Danh sách câu hỏi + câu trả lời |
| `defaultOpen` | `number` | `-1` | Index câu mở mặc định. `-1` = đóng hết |
| `className` | `string` | — | Override section |

### `FAQItemData`

| Field | Type | Description |
|---|---|---|
| `question` | `ReactNode` | Câu hỏi |
| `answer` | `ReactNode` | Câu trả lời — accept rich content (link, list, etc.) |

## Variants

Không có variant — single layout center container `max-w-3xl`.

## Composition

Standalone — không có sub-component public. Bên trong dùng `FAQItem` internal (local state mỗi item, không share open globally).

## States

- **Default**: items đóng hết (trừ `defaultOpen` index)
- **Item open**: border chuyển `border-primary-ring`, chevron xoay 180deg
- **Item closed**: border-border, answer unmount

## Usage

```tsx
import { FAQ } from '@cowork/ui';

<FAQ
  title="Câu hỏi thường gặp"
  subtitle="Mọi thắc mắc về trầm hương An Nhiên"
  items={[
    {
      question: 'Trầm hương An Nhiên có nguồn gốc từ đâu?',
      answer: 'Trầm hương tự nhiên thu hoạch từ rừng Khánh Hòa và Quảng Nam…',
    },
    {
      question: 'Cách phân biệt trầm tự nhiên và trầm tạo?',
      answer: 'Trầm tự nhiên có vân đậm bất quy tắc, mùi êm dịu lâu phai…',
    },
    {
      question: 'Đơn hàng có ship tỉnh không?',
      answer: 'Có. Ship toàn quốc 1-3 ngày qua GHN/J&T, free ship đơn từ 500k.',
    },
  ]}
  defaultOpen={0}
/>
```

## Real-world example

- An Nhien landing: section FAQ về nguồn gốc, công dụng, vận chuyển — đặt ngay trước footer.
- KHI Wellness pricing page: FAQ về billing, đổi gói, cancel — đặt sau pricing tiers.
- A-Kryphan service offer (Cowork DNA): FAQ về deliverables, timeline, refund — đặt giữa Pricing và CTA cuối.

## Accessibility

- Mỗi trigger là `<button>` có `aria-expanded`
- Focus ring rõ ràng (`focus-visible:ring-2 focus-visible:ring-primary-ring`)
- Item mỗi cái mở độc lập (không phải tabbed) — multiple open OK
- Chevron có `aria-hidden`-style implicit (no aria-label)

## Responsive behavior

- Container `max-w-3xl` (48rem) center
- Padding `py-16 md:py-24` — section spacing rộng cho landing
- Title `text-3xl md:text-4xl` responsive
- Items full-width trong container

## Related

- [[Accordion]] — primitive cho 1 hoặc nhiều panel collapse. FAQ là wrapper opinionated dùng cho landing
- [[Hero]] — đặt trên đầu page, FAQ thường ở dưới
- [[Pricing]] — kết hợp FAQ sau Pricing để answer purchase objections

## Source

`react/src/organisms/FAQ.tsx`