Goal Target Tile Grid Stats Block for React

Edit REGIONS at the top of the file: a region is a name, a list of targets (a market and an amount in dollars) and how many are met. Targets are worked in order, so the first met are solid and the next is outlined. The counts, sums, segments, hint rows and header are computed from the list. A region needs five targets to fill the bar; with another number the segments divide the bar evenly.

Solid means met, outlined means next, and a quiet fill means still to come. The three differ in structure (filled, outlined and tinted), not only in colour, so the bar reads in a greyscale print. The bar is one image named with its count ("Europe: 3 of 5 targets met"), because the words above and below it carry the detail.

It names the market after the last one met and its value, so a tile says what to close next, not only how far along it is. When every target is met it says "All targets met". The arrow before it mirrors in a right-to-left page.

Yes. Each region is a list item with a heading. The count, the dollars and the hint are text, the bar is an image with an accessible name, and amounts sit in bdi elements so a right-to-left page doesn't reorder "$168K of $244K". Contrast passes in light and dark.

The tiles sit two by two in one frame, with the hint row reserving two lines so the tiles in a row stay level when "Next: Gulf Coast, $38K" wraps. Nothing scrolls sideways at 320 pixels.

The header and the frame fade up once on load, and each count rolls up the first time its tile scrolls into view. With reduced motion everything simply appears.