import { useState } from "react";
import { BookingCard } from "@/components/BookingCard";
import { BookingCalendar } from "@/components/BookingCalendar";
import { BookingForm } from "@/components/BookingForm";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
Calendar,
Scissors,
Car,
Utensils,
Home,
Users,
ArrowLeft,
Star,
Shield,
Clock,
CheckCircle
} from "lucide-react";
import heroImage from "@/assets/booking-hero.jpg";
const bookingTypes = [
{
id: "appointments",
title: "Appointments",
description: "Schedule meetings with professionals like doctors, consultants, or service providers.",
icon: Calendar,
duration: "30-60 min",
price: "From $50",
},
{
id: "beauty",
title: "Beauty & Wellness",
description: "Book hair cuts, spa treatments, massages, and other wellness services.",
icon: Scissors,
duration: "60-120 min",
price: "From $75",
},
{
id: "automotive",
title: "Automotive Services",
description: "Schedule car repairs, maintenance, inspections, and detailing services.",
icon: Car,
duration: "1-4 hours",
price: "From $100",
},
{
id: "dining",
title: "Restaurant Reservations",
description: "Reserve tables at restaurants, cafes, and special dining experiences.",
icon: Utensils,
duration: "1-3 hours",
price: "No booking fee",
},
{
id: "home",
title: "Home Services",
description: "Book cleaning, repairs, installations, and other home improvement services.",
icon: Home,
duration: "2-8 hours",
price: "From $80",
},
{
id: "events",
title: "Events & Classes",
description: "Register for workshops, fitness classes, seminars, and group events.",
icon: Users,
duration: "1-8 hours",
price: "From $25",
},
];
const Index = () => {
const [selectedBookingType, setSelectedBookingType] = useState(null);
const [selectedDate, setSelectedDate] = useState();
const [selectedTime, setSelectedTime] = useState();
const [bookingStep, setBookingStep] = useState<'category' | 'calendar' | 'form'>('category');
const handleBookingTypeSelect = (bookingId: string) => {
setSelectedBookingType(bookingId);
setBookingStep('calendar');
};
const handleDateSelect = (date: Date) => {
setSelectedDate(date);
};
const handleTimeSelect = (time: string) => {
setSelectedTime(time);
setBookingStep('form');
};
const handleBookingSubmit = (data: any) => {
console.log('Booking submitted:', {
type: selectedBookingType,
date: selectedDate,
time: selectedTime,
...data
});
// Reset to start
setSelectedBookingType(null);
setSelectedDate(undefined);
setSelectedTime(undefined);
setBookingStep('category');
};
const handleBackClick = () => {
if (bookingStep === 'form') {
setBookingStep('calendar');
setSelectedTime(undefined);
} else if (bookingStep === 'calendar') {
setBookingStep('category');
setSelectedBookingType(null);
setSelectedDate(undefined);
}
};
const getSelectedBookingType = () => {
return bookingTypes.find(type => type.id === selectedBookingType);
};
if (bookingStep !== 'category') {
const currentBookingType = getSelectedBookingType();
return (
);
}
return (
Book {currentBookingType?.title}
{currentBookingType?.description}
{bookingStep === 'calendar' && (
{bookingStep === 'form' && (
{/* Hero Section */}
All-in-One Booking Platform
Book Anything,
);
};
Book Anything,
Anywhere
From appointments to events, home services to dining reservations. Our platform handles all your booking needs with ease and elegance.
{/* Feature highlights */}What would you like to book?
Choose from our wide range of booking categories
{bookingTypes.map((bookingType) => (
handleBookingTypeSelect(bookingType.id)}
/>
))}
{/* Trust indicators */}