Split Panel Team Picker CTA Block for React

The TEAM array at the top of the file holds each engineer's id, first name, full name, initials, role, availability text and status tone (success, warning or info). Availability is plain text ("Free today"), so feed it from your calendar tool when the page is built, or when it loads; the block doesn't format dates. To show photos, put an AvatarImage before the AvatarFallback: the initials stay as the fallback while it loads.

Before a choice the Shine Button is disabled and reads "Book a session", with the note under it asking to choose someone. Once a card is chosen it becomes a link to #<id> labelled "Book with <first name>": point each engineer's href at their booking page or at one page that reads the id. Because the choice only changes the link, nothing is sent from this block.

The cards are one radio group named by the heading "Who would you like to talk to?" and described by the note under the button. Tab enters the group, the arrow keys move and select, and each radio is named by its whole card: name, availability and role. The avatars are hidden from assistive technology so the initials aren't read, and the status dot is decorative because the availability is written next to it. The chosen card is marked by a filled radio and a stronger border, in the foreground colour, so the Shine Button stays the one accent on the block.

Preselecting a person would book someone the visitor never chose. With no default, the radio group shows its possible states honestly and the button asks for a choice. If you want one preselected, pass its id as the initial choice.

Below the large breakpoint the panels stack, copy first, and the choice cards sit directly under the headline so the button lands on the first screen. The supporting sentence and the three outcomes are shown from the sm breakpoint up, and the assurances in the closing band stay at every size, as three short columns. Role names wrap instead of truncating so nothing is cut at 320 pixels.

Yes: the radios, avatars and availability use logical properties and flex order, so each card mirrors, and the divider between the panels moves to the other side.