<!-- source-hash: fab223205d06a85cbd1f071b97356037 -->
Sticky section navigation component and scroll-spy hook for section-based page navigation, used across vendor detail pages, knowledge base, and documentation surfaces.

## Key Components

### `StickySectionNav`
A `<nav>` component that renders a vertical list of section buttons with an animated yellow ribbon indicator for the active section.

**Props:**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `sections` | `StickyNavSection[]` | — | Array of `{ id, label }` nav items |
| `activeSection` | `string` | — | ID of the currently active section |
| `onSectionClick` | `(id: string) => void` | — | Click handler for nav items |
| `ribbonPosition` | `'left' \| 'right'` | `'left'` | Side the active ribbon renders on |
| `ribbonColor` | `string` | `'#FFC008'` | Active ribbon color |
| `className` | `string` | — | Optional extra class names |

### `useSectionNavigation`
A hook that wires up scroll-spy and programmatic scrolling for a set of section refs.

**Returns:** `{ activeSection, handleSectionClick }`

**Options:**

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `offset` | `number` | `100` | Header offset in px passed to `scrollElementIntoView` |

## Usage Example

```typescript
const heroRef = useRef<HTMLElement>(null)
const detailsRef = useRef<HTMLElement>(null)

const sections = [
  { id: 'hero', ref: heroRef },
  { id: 'details', ref: detailsRef },
]

const { activeSection, handleSectionClick } = useSectionNavigation(sections, {
  offset: 80,
})

return (
  <>
    <StickySectionNav
      sections={[
        { id: 'hero', label: 'Overview' },
        { id: 'details', label: 'Details' },
      ]}
      activeSection={activeSection}
      onSectionClick={handleSectionClick}
      ribbonPosition="left"
    />
    <section id="hero" ref={heroRef}>...</section>
    <section id="details" ref={detailsRef}>...</section>
  </>
)
```

> **Scroll-spy behavior:** Scroll events are throttled at 100ms. A `isScrollingFromClick` guard suppresses the spy for 500ms after a nav click to prevent active-state flicker during programmatic scrolling.