<!-- source-hash: ca93087dff304ae780464b5f1cefad86 -->
An accessible, animated accordion component for rendering FAQ items with smooth expand/collapse transitions and deep-link anchor support.

## Key Components

### Interfaces

- **`FaqItem`** — Data shape for a single FAQ entry with `id`, `question`, and `answer` fields
- **`FaqAccordionProps`** — Props accepting an array of `FaqItem` and optional `defaultOpenIds` for pre-expanded items

### Hook

- **`useMeasuredHeight(isOpen)`** — Internal hook that reads `scrollHeight` outside the render cycle to drive CSS `max-height` animations without layout thrashing. Returns `ref` and `maxHeight` string.

### Component

- **`FaqAccordion`** — Stateful accordion managing open/close state via a `Set`, rendering each item with a clickable header, animated content panel, and per-item anchor ID for hash-based deep linking (e.g. `/faqs#faq-item-<id>`).

## Usage Example

```typescript
import { FaqAccordion, FaqItem } from './faq-accordion'

const items: FaqItem[] = [
  { id: 1, question: 'What is OpenFrame?', answer: 'A unified MSP platform...' },
  { id: 2, question: 'How does Mingo AI work?', answer: 'It automates triage...' },
]

// Render with the second item open by default
<FaqAccordion items={items} defaultOpenIds={[2]} />
```

## Behavior Notes

- **Keyboard accessible** — `Enter` and `Space` toggle items; `aria-expanded` reflects open state
- **Scroll margin** — Each row has `scroll-mt-24` so sticky nav (96px) doesn't obscure the header on hash navigation
- **Animation** — `max-height` + `opacity` transition at 350ms `ease-in-out`; height is measured lazily on open to support dynamic content
- **Mobile safety** — `break-words` prevents long URLs or tokens from clipping inside the `overflow-hidden` panel