Swiss Grid Index Nav

Build a "Swiss Grid Index Nav" React component.

CONCEPT: A museum website navigation in the International Typographic Style: four columns, each with a huge numeral and a section name; a red bar marks the current one.

LAYOUT & CONTENT:
- Columns: 1 Exhibitions, 2 Collection, 3 Visit, 4 Shop. Numerals ~6rem bold black; labels 13px.
- Top-left wordmark 'Kunsthalle' with 'Zürich' below; top-right 'DE / EN'.

INTERACTIONS & MOTION:
- A 6px red bar at the top of the active column moves via layoutId (stiffness 600 damping 40, snappy).
- Hover a column: numeral turns red; the others stay black.
- Arrow keys move between columns.

DESIGN SYSTEM — Swiss International:
- Pure white, black, and signal red #E30613 only.
- Strict modular grid, flush-left ragged-right, huge numerals, no ornament.
- Type: Inter Tight / Helvetica-like grotesk, bold weights.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring"). Animate transform and opacity only. Respect prefers-reduced-motion via useReducedMotion().
- Icons: lucide-react where icons are needed.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.