Destination Tabs Footer Block for React

They are a tab list named Coasts, one tab per coast, and the arrow keys move between them. Only the open coast's cities are shown. Every list is also kept unseen in the same grid cell, hidden from assistive technology and the keyboard, so the band stays as tall as the longest list.

Edit the CONTINENTS array. Each coast has an id, a label and a cities list, and every city is a link. The line under the heading and the count on each tab are counted from those lists. As written, that is 8 cities a coast and 24 in all.

A tel: link to +1 (415) 555-0188, an example number in the reserved range. The dot beside "Agents online" is decorative; the words carry the meaning, and the line under them says the desk is there day and night. Point the link at a number someone answers.

The block is a footer. The coasts are one nav labelled Footer: a tab list, then the open coast's city links. Helpline is its own heading, and the telephone link's name includes "Call the helpline". The legal links are a labelled list.

The wordmark, the coasts, the helpline and the legal line stack. The tab row scrolls sideways when the labels do not fit, and the city links wrap. The telephone number stays on one line.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server's when the page was built or rendered.