Booking & Availabili

✨ Turn a visit into a booked time — in three steps

Visitors leave when booking feels like work. A contact form with no times, or a calendar that lets them pick a slot that is already gone, wastes their time and yours. This component fixes that.

✅ Services up front — 3 samples with duration and price: Consultation 30 min $49, Design Review 60 min $99, Strategy Session 90 min $149. Edit them in the Properties panel. ✅ One step at a time — picking a service moves to step 2, picking a time moves to step 3. Finished steps can be tapped to go back, with Back buttons. ✅ A calendar that knows what is free — live dates from the current month onward, past days disabled, Sundays closed, fully-booked days marked Full, few slots left flagged Few. ✅ Time slots that fit — slots are filtered by service length, so a 90-minute session cannot start at 16:30. Hours, slot length, closed day, and fully-booked dates are editable. ✅ Clear at every step — radio groups with a visible ✓ on the selected card, inline per-field errors, today highlighted, live summary with total price. ✅ A booking request, honestly labelled — success screen with summary and reference code. No payment, no live calendar sync. ✅ Accessible by default — native radio inputs in fieldset / legend, explicit labels, errors linked with aria-describedby, calendar days are buttons with full state labels, visible keyboard focus. ✅ Privacy-safe — Email draft (mailto) and Copy booking only. No network request, no endpoint. Verified: 0 fetch / endpoint / consent / redirect in the TSX. ✅ Perfect on mobile — calendar fits full width on a phone with no overflow. Verified at 375px. Orange accent, light/dark mode, 720px lock.

🎯 Perfect for: salons, clinics, studios, consultants, coaches, and any service business that books by appointment.