<!-- source-hash: 287c2bd98ac7a3ef2c0c3e9abfc07ed3 -->
Accessible, animated FAQ accordion component that renders a list of question/answer pairs with smooth height transitions and keyboard navigation support.

## Key Components

### Interfaces
- **`FaqItem`** — Data shape for each FAQ entry (`id`, `question`, `answer`)
- **`FaqAccordionProps`** — Component props accepting `items` array and optional `defaultOpenIds` for pre-expanded panels

### Hooks
- **`useMeasuredHeight(isOpen)`** — Internal hook that measures `scrollHeight` outside the render cycle to drive CSS `max-height` animations; returns `ref` and `maxHeight` string

### Component
- **`FaqAccordion`** — Main export; manages a `Set`-based open/close state, renders each item with animated expansion, `aria-expanded` attribute, and keyboard (`Enter`/`Space`) support

## Usage Example

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

const faqs: FaqItem[] = [
  {
    id: 1,
    question: 'What is Flamingo?',
    answer: 'Flamingo is an AI-powered MSP platform that replaces expensive proprietary software.',
  },
  {
    id: 2,
    question: 'What is OpenFrame?',
    answer: 'OpenFrame is a unified platform integrating multiple MSP tools into a single AI-driven interface.',
  },
]

export default function FaqPage() {
  return (
    <FaqAccordion
      items={faqs}
      defaultOpenIds={[1]} // First item open by default
    />
  )
}
```

## Notes

- Multiple panels can be open simultaneously
- Height animation uses a measured `scrollHeight` approach rather than fixed values, so dynamic content is handled correctly
- Fully keyboard accessible via `role="button"`, `tabIndex`, and `onKeyDown` handlers