<!-- source-hash: 4bfda13fcb66ea09d23c0f65e2a0d2f7 -->
Unified React component for managing highlight video generation and upload, supporting both AI-generated and manually uploaded highlight videos for `CustomerInterview` and `ProductRelease` entities.

## Key Components

### `HighlightVideoSection`
Main exported component that renders three logical sections:

- **Configuration Panel** — Target duration selector (1–5 min) and subtitle-burning toggle
- **AI Generation Section** — Wraps `AIEnrichSection` with Claude AI + Shotstack integration, including progress feedback, cancellation, and status messages
- **Video Preview + Manual Upload** — Shows current highlight with metadata badges, handles file input for manual uploads, and renders either a custom `VideoPreviewComponent` or a built-in `<video>` player with delete support

### `HighlightVideoSectionProps`
Full TypeScript interface exposing all configuration and callback props. Notable props:

| Prop | Type | Description |
|------|------|-------------|
| `targetDurationSeconds` | `number` | AI generation target duration |
| `canGenerateHighlight` | `boolean` | Gates the generate button |
| `requiredFields` | `AIRequiredField[]` | Validation hints shown before generation |
| `VideoPreviewComponent` | `React.ComponentType` | Optional custom video player |
| `generationStatus` | `'idle' \| 'loading' \| 'success' \| 'error'` | Controls `AIEnrichSection` state |

## Usage Example

```typescript
import { HighlightVideoSection } from './highlight-video-section';

<HighlightVideoSection
  highlightVideoUrl={interview.highlightUrl}
  highlightVideoSource="ai_generated"
  highlightVideoDurationMs={180000}
  targetDurationSeconds={180}
  onTargetDurationChange={(secs) => setTargetDuration(secs)}
  skipSubtitleBurning={false}
  onSkipSubtitleBurningChange={(skip) => setSkipSubs(skip)}
  onGenerateHighlight={handleGenerate}
  isGenerating={isGenerating}
  generationProgress={progress}
  generationStatus={status}
  canGenerateHighlight={!!interview.transcriptId}
  requiredFields={[{ field: 'transcript', label: 'Transcription' }]}
  onUploadHighlight={async (file) => uploadToStorage(file)}
  onDeleteHighlight={handleDelete}
  onCancelGeneration={handleCancel}
/>
```