Categorized FAQ Block for Ark UI

Edit TOPICS at the top of the file: each topic has an id, a label and its questions (an id, the question and its answer, one to three sentences). The count on each tab is the length of that list, so it never drifts, and the first question of every topic opens when its tab does. Keep it to about five topics and four questions each: more than that wants a search.

The tabs are a real tab list named "FAQ topics": the arrow keys move between them (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open panel. Each question is a button inside its own h3 under the section's h2, and Enter or Space opens it. Inside a panel the Up and Down arrows also move between questions.

Yes, the panels of the topics you aren't looking at stay in the page, hidden. The Tabs take lazyMount={false} and unmountOnExit={false}, and the Accordions the same two props, so every answer renders from the start.

Every panel has the same minimum height, about the tallest topic with its first answer open, so a shorter topic leaves quiet space under its rows instead of pulling the contact line up. Opening more answers in a panel still grows it, as any accordion does.

The tab list becomes a row you scroll sideways, with a fade at its end to say there's more, and the focused tab scrolls into view. The rows run from rail to rail, long questions wrap beside their chevron, and nothing scrolls the page sideways at 320 pixels.

It's a link (href="#"): point Ask a bookkeeper at your help desk or a mailto: address. It's an outline button, so the block has no primary action of its own. The button takes asChild with the link inside, so it can be your router's link.