Tabbed Hero Feature Split Features Block for React

Edit VIEWS at the top of the file: each stage has a label, a title, a sentence and three ticks. Each drawing is its own small component (DraftDrawing, ReviewDrawing and SignDrawing), picked in Stage by the stage's id, so a fourth stage needs an entry, a drawing and one line in Stage.

It toggles the block's signed state: the signature is revealed from its start, the badge on the page changes to Signed, the signers list counts you in and a polite status line says so. The label becomes Clear signature, so the field can be reset with the keyboard. The state lives above the tabs, so it survives switching to another stage and back. Nothing is sent anywhere.

The three copies sit in one hidden grid cell under the open panel, and the drawing has a fixed height, so the card is always as tall as the tallest stage. That hidden copy is invisible and inert: it can't be focused or read by a screen reader.

They are real tabs with real panels, so Tab moves into the open panel and the arrow keys move between stages. The open tab is filled by its selected state, and arrow keys select the tab they land on.

The Draft and Review drawings are decoration: they are hidden from assistive technology and can't be focused, because the title and sentence under them say the same. The Sign drawing is live, so its page text, its button and its status line are readable and the stand-in lines and the signature itself are hidden.

The three tabs stay in a row above the card, the drawing is shorter and shows one page without the side panel (the Sign button stays in the page), and the copy stacks under it in one column: title and sentence, then ticks and the button.