docs: add common issues to the troubleshooting hub and fill out the area tiles (#1039)

* docs: add common issues to the troubleshooting hub and fill out the area tiles

Lead the Troubleshooting hub with a table of the issues support sees most
often, and give each area tile the sections a reader actually needs,
including a new Reverse Proxy tile.

Add the case where a teammate signs in and gets their own account to the
pending approval page, with sign-in domains as the fix.

List the headings rendered by the troubleshooting components in "On this
page", which previously only showed Markdown headings.

* docs: address review on account-access and support wording

- Personal-address teammate: drop the direct-invite advice, since a user
  who already has an account can't be invited; point to the work address
  or NetBird Support instead.
- Support audience: say NetBird Support is mainly for paying Cloud
  customers and commercial-license deployments, consistently across the
  troubleshooting hub, the support page, and the report-bug page.

* docs: align the troubleshooting hub table and rework Still stuck

- Common issues table: fixed 50/50 columns, with the Start here column
  padded to line up with the right-hand area tiles at any width.
- Still stuck: match the width and side padding of the tiles, center the
  title and buttons, and put a short audience note under each button.
  The report hint moves to its own line above the links, with a new
  Debug bundle link.

mdx/rehype.mjs

@@ -165,11 +165,30 @@ function rehypeAddMDXExports(getExports) {
   }
 }
 
+// Components that render their own `h2` from `title` and `id` props. The
+// heading is not in the MDX tree, so it is added to the table of contents here.
+const sectionComponents = ['TroubleshootingStart', 'TroubleshootingTiles', 'StillStuck']
+
+function jsxStringAttribute(node, name) {
+  let attribute = node.attributes?.find((a) => a.name === name)
+  return typeof attribute?.value === 'string' ? attribute.value : undefined
+}
+
 function getSections(node) {
   let sections = []
 
   for (let child of node.children ?? []) {
-    if (child.type === 'element' && ['h2', 'h3', 'h4', 'h5', 'h6'].includes(child.tagName)) {
+    if (child.type === 'mdxJsxFlowElement' && sectionComponents.includes(child.name)) {
+      let title = jsxStringAttribute(child, 'title')
+      let id = jsxStringAttribute(child, 'id')
+      if (title && id) {
+        sections.push(`{
+        title: ${JSON.stringify(title)},
+        id: ${JSON.stringify(id)},
+        tagName: "h2"
+      }`)
+      }
+    } else if (child.type === 'element' && ['h2', 'h3', 'h4', 'h5', 'h6'].includes(child.tagName)) {
       sections.push(`{
         title: ${JSON.stringify(toString(child))},
         id: ${JSON.stringify(child.properties.id)},