<!-- source-hash: 7ceb686fa07cb2b79511a1e43f5bce1a -->
A full-screen image gallery modal component with keyboard navigation, prev/next controls, and an image counter. Extracted as a reusable component from the TMCG event detail page.

## Key Components

### `ImageGalleryModal`
The primary export — a React client component wrapping the base `Modal` with gallery-specific behavior.

**Props (`ImageGalleryModalProps`):**

| Prop | Type | Description |
|------|------|-------------|
| `images` | `string[]` | Array of image URLs to display |
| `isOpen` | `boolean` | Controls modal visibility |
| `onClose` | `() => void` | Callback fired on close or `Escape` key |
| `initialIndex` | `number` | Starting image index (default: `0`) |

**Features:**
- **Keyboard navigation** — `ArrowLeft`, `ArrowRight` to navigate; `Escape` to close
- **Prev/Next buttons** — conditionally rendered based on current index boundaries
- **Image counter** — shown when gallery has more than one image (e.g. `2 / 5`)
- **Error handling** — gracefully handles unsupported formats (HEIC) with a download fallback
- **Index reset** — resets to `initialIndex` each time the modal opens

## Usage Example

```typescript
import { ImageGalleryModal } from './image-gallery-modal';

const screenshots = [
  'https://cdn.example.com/img1.jpg',
  'https://cdn.example.com/img2.jpg',
  'https://cdn.example.com/img3.heic',
];

export function EventDetail() {
  const [isOpen, setIsOpen] = useState(false);
  const [startIndex, setStartIndex] = useState(0);

  return (
    <>
      {screenshots.map((src, i) => (
        <img
          key={src}
          src={src}
          onClick={() => { setStartIndex(i); setIsOpen(true); }}
        />
      ))}

      <ImageGalleryModal
        images={screenshots}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        initialIndex={startIndex}
      />
    </>
  );
}
```