Implement Site Builder with Puck and Booking Widget

frontend/src/components/booking/BookingWidget.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { usePublicServices, useCreateBooking } from '../../hooks/useBooking';
+import { Loader2 } from 'lucide-react';
+
+interface BookingWidgetProps {
+  headline?: string;
+  subheading?: string;
+  accentColor?: string;
+  buttonLabel?: string;
+}
+
+export const BookingWidget: React.FC<BookingWidgetProps> = ({ 
+  headline = "Book Appointment", 
+  subheading = "Select a service", 
+  accentColor = "#2563eb", 
+  buttonLabel = "Book Now" 
+}) => {
+  const { data: services, isLoading } = usePublicServices();
+  const createBooking = useCreateBooking();
+  const [selectedService, setSelectedService] = useState<any>(null);
+
+  if (isLoading) return <div className="flex justify-center"><Loader2 className="animate-spin" /></div>;
+
+  const handleBook = async () => {
+    if (!selectedService) return;
+    try {
+      await createBooking.mutateAsync({ service_id: selectedService.id });
+      alert("Booking created (stub)!");
+    } catch (e) {
+      console.error(e);
+      alert("Error creating booking");
+    }
+  };
+
+  return (
+    <div className="booking-widget p-6 bg-white rounded-lg shadow-md max-w-md mx-auto text-left">
+      <h2 className="text-2xl font-bold mb-2" style={{ color: accentColor }}>{headline}</h2>
+      <p className="text-gray-600 mb-6">{subheading}</p>
+
+      <div className="space-y-4 mb-6">
+        {services?.length === 0 && <p>No services available.</p>}
+        {services?.map((service: any) => (
+          <div 
+            key={service.id} 
+            className={`p-4 border rounded cursor-pointer transition-colors ${selectedService?.id === service.id ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-blue-300'}`}
+            onClick={() => setSelectedService(service)}
+          >
+            <h3 className="font-semibold">{service.name}</h3>
+            <p className="text-sm text-gray-500">{service.duration} min - ${(service.price_cents / 100).toFixed(2)}</p>
+          </div>
+        ))}
+      </div>
+
+      <button 
+        onClick={handleBook}
+        disabled={!selectedService}
+        className="w-full py-2 px-4 rounded text-white font-medium disabled:opacity-50 transition-opacity"
+        style={{ backgroundColor: accentColor }}
+      >
+        {buttonLabel}
+      </button>
+    </div>
+  );
+};
+
+export default BookingWidget;