Mentor Match Onboarding Block for React

Edit TOPICS and MENTORS. The first four topics are the chips; a mentor lists three topic ids, and may cover topics that are not chips (Portfolio, Hiring) so that the score is not just a copy of the chips. A mentor has an id, initials, a name, a role and the days they are free. Keep three mentors so the cards keep their fixed slots.

Each interest you pick that a mentor also covers counts once: the score is that count over the number you picked, said as "Shares 2 of your 3" and spelled out ("You both care about Career change and Freelancing."). The mentors are sorted by it, most first; ties keep their usual order. Nothing else, no hidden weight, goes into it.

The three cards are fixed slots, each keyed by its place: a re-rank changes the words and badges inside them and not the boxes, which are all one height. "Best match" is always rendered and hidden on the others, so the line it sits on never changes.

In the demo it marks that mentor "Requested" and says so in the status line ("Asked Yaw Ankomah for an intro in this demo. Nothing was sent."). Pressing it again says you already asked. In your app send the request from the card's onAsk handler and show the mentor's own reply state.

The mentors say "Pick an interest to see what you share." Continue stays in the tab order and looks quiet; pressing it says "Pick an interest to continue." under the chips and puts focus on the first one. Skip for now leaves the step for later and clears nothing.

Everything is local and nobody is real: the names, roles and availability are typed fiction, avatars are initials and no photo is used. Continue says it saved in this demo and sends nothing; in your app send the interests and any requests to your server where submit says so.