<!-- source-hash: 5344552d615a3d0d05eef4235e82937c -->
Storybook stories for the `Header` navigation component, covering dropdown behavior, SEO link visibility, and scroll auto-hide functionality.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `Default` | `Story` | Standard header with dropdown navigation and auto-hide enabled |
| `DropdownOpen` | `Story` | Programmatically opens the first dropdown on mount for visual regression snapshots |
| `SeoLinksAlwaysInDom` | `Story` | Live DOM inspector that counts `<a href>` anchors in the header, proving SEO crawler visibility regardless of dropdown state |
| `FixedHeader` | `Story` | Header with `autoHide: false` — remains fixed during scroll |

**Shared fixtures:**
- `flamingoLogo` — branded logo element using `FlamingoLogo` icon + DM Sans wordmark
- `baseNavigation` — three-item nav config (`OpenFrame`, `OpenMSP`, `Company`) with nested dropdown children
- `rightActions` — accent CTA button linking to `/signup`

## Usage Example

```typescript
import { Header } from '../components/navigation/header';
import type { HeaderConfig } from '../types/navigation';

const config: HeaderConfig = {
  logo: { element: <FlamingoLogo />, href: '/' },
  navigation: {
    position: 'center',
    items: [
      {
        id: 'docs',
        label: 'Docs',
        children: [
          { id: 'getting-started', label: 'Getting Started', href: '/docs/getting-started' },
        ],
      },
    ],
  },
  actions: {
    right: [<Button key="cta" variant="accent" href="/signup">Start Free Trial</Button>],
  },
  autoHide: true,
  mobile: { enabled: true, onToggle: () => {} },
};

<Header config={config} />
```

> **SEO note:** Dropdown children are always rendered in the DOM and hidden via CSS `visibility: hidden` + `aria-hidden`, keeping all `<a href>` links crawlable without JavaScript execution.