Stepper Wizard Pricing Block for React

Edit the QUESTIONS array at the top of the file. Each question has a short step label for the step list, a prompt, a helper line and its answers; each answer has a label, a detail and scores, the points it gives each plan by id (the plans are hostel, boutique and resort). The plans are the PLANS array. The recommendation is the plan with the most points once every question is answered, and a tie goes to the plan listed first, so list the plan you'd rather recommend first.

The call to action is a link. Point its href at your sign-up or checkout route with the plan's id, such as /signup?plan=boutique, and map plan ids to your billing provider's prices on the server, never in the browser. Pass the answers along too if your CRM should see why the plan was picked.

Each question is a radio group named by its heading and described by its helper line. Arrow keys move between answers and select them, and nothing moves on by itself: Next does. When the step changes, focus moves to the new step's heading, and a polite live region says which question it is, or which plan matched. The step list marks the current step and is a single tab stop: arrow keys move between the steps you can reach, Enter opens one, and steps that can't be reached yet are disabled.

Yes, and their other answers are kept. Back returns one step, the step list jumps to any step up to the first unanswered question, and on the result each answer in the summary has a Change button that opens its question. Start over clears every answer and returns to the first question.

The question stacks above its answer cards and sits beside them from the lg breakpoint. On narrow screens the step list keeps its numbered indicators and hides the step names visually, so screen readers still hear them. Back and Next stay on one row, and the result's two halves stack. Nothing scrolls sideways at 320px.

Use a wizard when the plans differ along several dimensions that buyers can't weigh easily on their own, such as property size, what guests book and what the software connects to, and a few questions settle it. Use a comparison table when buyers already know what they need and want to scan features side by side.