Build Your Services Platform with Vibe Coding

Create a booking system where:
1. Users can browse available services
2. Each service shows pricing and duration
3. Users select a date and time slot
4. System checks availability in real-time
5. Booking confirmation with email notification
6. Calendar view for service providers
7. Cancellation with refund policy

// components/BookingCalendar.tsx
export function BookingCalendar({ service }) {
  const [selectedDate, setSelectedDate] = useState(null);
  const [slots, setSlots] = useState([]);
  
  useEffect(() => {
    if (selectedDate) {
      fetchAvailableSlots(service.id, selectedDate)
        .then(setSlots);
    }
  }, [selectedDate, service.id]);

  return (
    <Calendar
      onSelect={setSelectedDate}
      availableSlots={slots}
      onBook={handleBooking}
    />
  );
}