Staggered Hex Cluster Grid Features Block for React

Edit ZONES at the top of the file: each has a name, its three numbers (orders an hour, wait in minutes, couriers online) and its place, c and r, meaning the column in half-hexagon steps (0 to 8) and the row (0 to 4). The shade of each hexagon, the ranked list and the tooltip text are all derived from those numbers, so nothing else needs editing. A different cluster is a different set of c and r values.

Each hexagon is a button with a clip-path polygon, sized as a fifth of the map's width and a quarter of its height, which is exactly a regular hexagon. The offset rows come from the column steps, so the map is placed in percent of one box and scales to any width without a script.

It is a segmented toggle that can't be switched off: pressing the pressed button keeps it, pressing another moves it. The three views share the same hexagons, so only their shade changes, and the hexagon you opened keeps its place.

The map is a named list of zones, and each hexagon is a button whose name includes its number ("Harbor: 164 orders an hour"). Tab reaches them in reading order, and Enter or Space opens the tooltip. The focused or opened hexagon gets a thick border, since a clip-path can't show a focus ring. The ranked list and the legend say the same thing in text.

No: a map keeps its places, so the hexagons are dir="ltr". The header, the list and the three cells follow the page's direction.

The map scales with its container, so the hexagons shrink to about a fifth of the screen's width and stay large enough to tap. The ranked list sits under it, and the three cells stack one per row.