Country Restricted Error Block for React

Nothing leaves the page and nothing is saved. A good press shows a spinner on the button for under a second, then marks the chosen rows "On the list" and a polite status line says that no email was sent; focus moves to that line because the busy button drops it. Undo is always there, quiet until you have joined, and clears the marks. To wire it for real, save the address with the chosen region ids from submit, send a confirmation to the address, and email once per region on its opening day.

No. "Spain" is a typed constant (HOME) standing in for the visitor's country, and nothing reads a location, an IP address or the browser's geolocation. In your app, work out the country on your server (from the request, with a manual choice for people it gets wrong) and pass it in; the page's heading, the "your country" note on its row and the one switch that starts on all follow from it.

From the REGIONS list at the top of the file: each region has a name and the index of the quarter it opens in, and the strip, the words "Opens Q2 2027" and the count under the heading are all worked out from it, so the drawing and the text can't disagree. The strip is decoration: the quarter is always in the row's own text. Edit the list and the order, the strips and the label of the button follow.

Yes. Each Switch is named for its region ("Tell me when Canada opens"), so a screen reader hears the region and its state, and Tab and Space work as for any switch. The Switch is drawn in the foreground colour so the button stays the one coloured control. If none is on when you press Join, a short line under the list says to switch one on, an alert for assistive technology, and focus moves to the first switch.

On press, never on every keystroke: an empty field or an address without an at sign and a dot-separated domain gets a line under the field in the text colour with a red icon, and focus goes to the first problem. The line always has its space, so the form never jumps. The check is only a shape check; your server should confirm the address by emailing it.

Your server decides what to send. A service withheld from a country for legal or licensing reasons is usually a 451 or a 403 with this screen as the body; a service that simply hasn't launched there could also be a normal 200 with a "coming soon" page. Send the real status where you render this page.