בנטו דאטה במונוספייס

Build a "Mono Data Bento" React component.

CONCEPT: An ops-dashboard bento for a developer tool: requests per second ticking live, a latency sparkline, and an uptime grid of 48 tiny cells.

LAYOUT & CONTENT:
- Tile 1 (wide): 'REQ/S' big tabular number ticking every 700ms with a delta badge.
- Tile 2: 'P95 LATENCY 182ms' with an SVG sparkline.
- Tile 3: 'UPTIME 99.98%' and a 12x4 grid of cells (one amber incident cell).
- Tile 4: region list fra1 / iad1 / sin1 with status dots.

INTERACTIONS & MOTION:
- Numbers animate to new values with a spring on a motion value, rendered rounded.
- Sparkline path draws in with pathLength and shifts left by one point each tick.
- Uptime cells fade in with a random stagger on mount.

DESIGN SYSTEM — Mono Data:
- Slate #0F172A panel, #1E293B cards, #E2E8F0 text, single signal color lime #A3E635 for live values (flat, no glow).
- Dense grid, tabular numbers, sparklines, tiny uppercase labels.
- Type: IBM Plex Mono throughout.

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.