<!-- source-hash: 760f28bd91ca25a2a1341b709f1c96c4 -->
A client-side navigation component that renders a list of selectable section buttons with support for vertical and wrap layouts, optional badges, icons, descriptions, and active state highlighting.

## Key Components

### Interfaces

- **`SectionItem`** — Defines a single section entry with `id`, `title`, optional `subtitle`, `description`, `number`, `leftIcon`, `badge`, `screenshots`, and `disabled` flag.
- **`SectionSelectorProps`** — Configuration for the selector including `sections`, `activeSection`, `onSectionChange` callback, `layout`, `buttonWidth`, `minHeight`, and display toggles.

### Components

- **`SectionButton`** *(internal)* — Renders an individual section button. Supports two layout modes:
  - `vertical` — Displays number prefix, left icon, title, badge, and description stacked.
  - `wrap` — Displays left icon, title, badge, and subtitle in a compact horizontal card.
- **`SectionSelector`** *(exported)* — Orchestrates the full selector by mapping `sections` to `SectionButton` instances inside a flex container.

## Usage Example

```typescript
import SectionSelector, { SectionItem } from './section-selector'

const sections: SectionItem[] = [
  {
    id: 'overview',
    title: 'Overview',
    subtitle: 'General information',
    badge: { text: 'New', colorScheme: 'green' },
  },
  {
    id: 'settings',
    title: 'Settings',
    description: 'Configure your preferences',
    number: '02',
    disabled: false,
  },
]

export default function Page() {
  const [active, setActive] = React.useState('overview')

  return (
    <SectionSelector
      sections={sections}
      activeSection={active}
      onSectionChange={setActive}
      layout="vertical"
      buttonWidth="full"
      showDescription={true}
    />
  )
}
```