"use client" import { useState } from "react" import { motion } from "framer-motion" import { Calendar, Clock, Stethoscope, MapPin, ChevronLeft, ChevronRight, Check, Search, User, } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Avatar } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { cn } from "@/lib/utils" import { fadeIn, stagger, staggerItem, buttonTapTarget, scaleIn, cardHoverTarget } from "@/lib/animations" const doctors = [ { name: "Dr. Sarah Chen", specialty: "Cardiology", rating: "4.9", reviews: 124, available: true }, { name: "Dr. Mike Rivers", specialty: "General Medicine", rating: "4.8", reviews: 98, available: true }, { name: "Dr. Emily Park", specialty: "Dermatology", rating: "4.7", reviews: 87, available: false }, { name: "Dr. James Wilson", specialty: "Orthopedics", rating: "4.9", reviews: 156, available: true }, ] const timeSlots = ["9:00 AM", "9:30 AM", "10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM", "1:00 PM", "1:30 PM", "2:00 PM", "2:30 PM", "3:00 PM", "3:30 PM"] export default function AppointmentBooking() { const [step, setStep] = useState(1) const [selectedSlot, setSelectedSlot] = useState("") return (

Book Appointment

Schedule your next visit

{[1, 2, 3].map((s) => (

= s ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground")}>{s}

= s ? "text-foreground" : "text-muted-foreground")}>{s === 1 ? "Doctor" : s === 2 ? "Date & Time" : "Confirm"} {s < 3 && }

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

{["All", "Cardiology", "General Medicine", "Dermatology", "Orthopedics"].map((spec) => ( {spec} ))}

{doctors.map((doc) => ( {doc.name.split(" ").map(w => w[0]).join("")}

{doc.name}

{doc.specialty}

⭐ {doc.rating} {doc.reviews} reviews

{doc.available ? ( ) : ( Unavailable )} ))} )} {step === 2 && ( Select Date

June 2026

{["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(d => {d})}

{Array.from({ length: 30 }, (_, i) => i + 1).map((d) => ( ))}

Select Time

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

)} {step === 3 && ( Appointment Summary Review your booking details

Dr. Sarah Chen

Cardiology

Date

June 15, 2026

Time

{selectedSlot || "10:00 AM"}

Duration

30 minutes

Type

In-person

)}

{step > 1 && } {step < 3 && }

) }

Appointment Booking

Book Appointment

Book Appointment