Tabbed Vertical FAQ Block for React

Edit TOPICS at the top of the file: each topic has an id, an icon (any lucide icon), a label and its questions. The count beside each name is the length of that list. The first question of every topic opens when its tab is chosen; change defaultValue on the accordion to open another, or to none.

In the rail the tabs are a vertical tab list: Up and Down move between topics, Home and End jump to the first and last, and Tab moves into the open panel. Below lg the same list is horizontal, so the Start and End arrows (mirrored in a right-to-left layout) take over. The block reads the screen width in an effect and tells the tab list which way it runs, so the keys always match what you see.

The server renders the rail, because the orientation is read from the screen only in the browser; on a phone the list turns horizontal as soon as the page hydrates, a moment after first paint. The two lists share one set of tabs and panels, so no state is lost and the layout settles in one step.

The panels of the topics you aren't looking at stay in the page, hidden. Each panel takes keepMounted and each Accordion hiddenUntilFound, so closed answers stay in the markup and the browser's find in page opens them.

Each question ends in a small boxed chevron that turns over while its answer is open. Under reduced motion it flips without turning. It is a decoration; the button's expanded state is what a screen reader hears.

It's a link (href="#") in the rail's foot: point Chat with rider care at your chat or help desk. It's an outline button, so the block has no primary action of its own. The button renders the link it's given with render, with nativeButton={false}.