Two Column FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. OPEN_QUESTION names the one that is open on load; set it to an id that doesn't exist to start with all of them closed. Ten is a comfortable length for the sticky header to earn its place; for fewer than six, the model FAQ with a side header does the same job.

Its inner box is lg:sticky lg:top-16, inside a grid cell as tall as the list, so it sticks while the list scrolls and stops at the list's end. Change top-16 to clear your site's header. Sticky stops working if any ancestor adds overflow: hidden, auto or scroll, so keep the block out of a scrolling wrapper (the section's overflow-x-clip is fine). Below lg it is plain and scrolls away.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found", and the browser's find in page opens the one that holds a match.

Each question is a button inside its own h3 under the section's h2. Enter or Space opens and closes it, and the button says whether it's expanded. Tab moves from question to question; there are no arrow-key shortcuts between rows on this base.

It is a link (href="#"): point Write to the wholesale desk at your help desk or a mailto: address. The ghost Button renders the link it's given with render, with nativeButton={false}.