"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { UtensilsCrossed, Calendar, Clock, Users, User, Phone, Mail, Check, MessageCircle, ArrowRight, ChevronLeft, } from "lucide-react" const timeSlots = [ "5:00 PM", "5:30 PM", "6:00 PM", "6:30 PM", "7:00 PM", "7:30 PM", "8:00 PM", "8:30 PM", "9:00 PM", ] const partySizes = [1, 2, 3, 4, 5, 6, 8, 10] export default function ReservationBooking() { const [step, setStep] = useState(0) const [selectedDate, setSelectedDate] = useState("") const [selectedTime, setSelectedTime] = useState("") const [partySize, setPartySize] = useState(2) const [name, setName] = useState("") const [email, setEmail] = useState("") const [phone, setPhone] = useState("") if (step === 2) { return (

Reservation Confirmed!

La Maison · {selectedDate} at {selectedTime}

Party of {partySize} · Confirmation: AN-RES-4821

) } return (

Reserve a Table

La Maison

French fine dining · 123 Main St, Downtown

{step === 0 && ( Date & Time

Date

setSelectedDate(e.target.value)} />

Time

{timeSlots.map((t) => ( ))}

Party Size

{partySizes.map((size) => ( ))}

)} {step === 1 && ( Contact Information

Full Name

setName(e.target.value)} />

setEmail(e.target.value)} />

Phone

setPhone(e.target.value)} />

Special Requests (optional)

)}

) }

Reservation Booking

La Maison

La Maison