Media Kit Brand Ambassador Profile Block for React

Edit AGES and REGIONS (a label and a count of people each; both should add up to the same audience), PARTNERS (reach, clicks and orders per campaign), RATES and the code in BRAND, CODE, CODE_OFF and CODE_UNTIL. The percentages, the click and buy rates, the days to go and the text of the kit are all worked out from those numbers, so nothing is typed twice. AS_OF is the fixed day the days are counted from; replace it with the current date when you wire it up.

Rounding each share separately can add up to 99 or 101. The page takes the whole part of each share, then gives the missing points to the shares with the largest remainders, so the list always adds up to 100. The same numbers go into the download.

The download and the Copy button are real: the first saves a plain-text file written in your browser, the second puts the code on your clipboard (and says so when the browser refuses it). Everything else is a typed example, the brands are invented and nothing is sent anywhere. In your own app write the kit from your own data, and say how old the figures are.

Plain text, one line for each fact: the name and role, the audience by age and by region with the counts, each past partner with its reach and rates, the price list and the code with its end date. The status line says the file's name and how many lines it has.

Each list of bars is a named list with its figures as text, the bars are decoration, and the Copy button is named for its code ("Copy code CASSIAN15"). The status line is a polite live region present from the start. On a phone the two lists stack, each partner's three figures sit under its name, and the status and the download stay pinned to the bottom of the screen. Prices and the code keep their reading order in a right-to-left page.