Add Another Pet Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call (your bookings inbox, a CRM or a form endpoint): pets, services, visit, name and email hold everything the visitor entered. The confirmation only repeats what was sent and promises no reply time.

Each pet is an object with its own id, so adding and removing never shuffles what's typed in the others. MAX_PETS sets the limit (three), and from lg the row always shows three slots: the pets, the "Add another pet" cell, then empty ones, so a cell keeps its width as pets come and go. "Remove" appears once there is more than one pet, is named for its card ("Remove pet 2"), and focus moves to "Add another pet"; adding a pet moves focus to the new card's name field. A polite status line says "Pet 2 added. 2 pets." for screen readers.

The form has noValidate, so the block shows its own messages. On submit, problems checks each pet (a species, a name, an age from 0 to 30), at least one service, a first-visit day, your name and an email with an @ and a domain. Each problem appears under its field with an icon, the control gets aria-invalid and an aria-describedby that points to the message, and focus moves to the first one in reading order, which can be a pet's species. Editing a field clears its message.

Edit SERVICES at the top of the file: each has a value, a label and a one-line detail. Each checkbox is named by its label and described by its detail. A checked box is drawn in the foreground colour, so the Shine Button stays the only primary control. Each checkbox is named by aria-labelledby and described by aria-describedby.

Any day from today on. The picker reads the clock when the calendar opens, so it never shows a stale month, and the visitor can also type a date. To close days (Sundays, bank holidays) edit past.

Below lg the cells stack one under the other, each full width, followed by "Add another pet". The services go two columns from sm and one below it, the contact fields stack, and the submit button goes full width. Nothing scrolls sideways at 320 pixels. The header and the form fade up once on load; with reduced motion they simply appear.