Split Panel Tier Benefits CTA Block for React

Edit the TIERS array at the top of the file: each tier has its name, the referrals a quarter it starts at (from) and its commission rate. The first tier must start at 0. The ticks on the dial, the arcs around it, the ranges in the list, the centre and the button all read that array. The dial turns a full circle over MAX_REFERRALS, which should be a number that divides 360 so a referral is a whole number of degrees; change it to 36 or 60 and everything follows. START is where it rests at first.

The button is a real link: point its href at your application page and add the tier the visitor settled on, for example /partners/apply?tier=gold. It's a ShineButton with render set to an a element and nativeButton={false}. The tier is in the tier value the block already keeps.

Tab to the dial, then the arrow keys turn it one referral at a time, Home goes to zero and End to the top. Its name reads the current state, as in "Referrals a quarter. 18 referrals a quarter: Gold tier, 25% commission." Once you stop turning it for a moment, one polite message says the new tier and commission; nothing is announced while you turn or when the page loads. The dial's own value is an angle, so the list beside it is the plain-text way to read every tier.

Grab the knob and turn: the dial follows the pointer around the ring in whole referrals, and the centre updates as it goes. Grabbing the ring somewhere else turns the dial by how far the pointer moves from there, instead of jumping the knob to the pointer.

The arcs change tone, the list's marker dot and the digits in the centre roll, and the knob eases. With reduced motion set, they all change at once.

The text and the layout mirror, with the dial moving to the other side, but the dial itself doesn't: it's a circle that turns clockwise from the top in every writing direction, as a clock does, so it keeps its own left-to-right setting. Its percentages and ranges are set in their own boxes, so "25%" and "15 to 29" never reorder.