"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, stagger, staggerItem, buttonTap } from "@/lib/animations" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Calendar, Clock, User, Phone, Mail, MessageSquare, CheckCircle, ChevronRight } from "lucide-react" const practiceAreas = ["Corporate Law", "Criminal Defense", "Family Law", "Real Estate", "Employment Law", "IP Law", "Estate Planning", "Immigration Law"] const timeSlots = ["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"] export default function ConsultationBooking() { const [step, setStep] = useState(1) const [selectedArea, setSelectedArea] = useState("") const [selectedDate, setSelectedDate] = useState("") const [selectedTime, setSelectedTime] = useState("") const handleNext = () => setStep((s) => Math.min(3, s + 1)) const handleBack = () => setStep((s) => Math.max(1, s - 1)) return (

Free Consultation

Book a Consultation

Schedule a meeting with one of our attorneys.

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

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

{s < 3 &&

s ? "bg-primary" : "bg-muted"}`} />}

))}

{step === 1 ? "Select Practice Area" : step === 2 ? "Choose Date & Time" : "Your Information"} {step === 1 ? "What legal matter are you contacting us about?" : step === 2 ? "Pick a convenient time for your consultation." : "Provide your contact details."} {step === 1 && ( {practiceAreas.map((area) => ( { setSelectedArea(area); handleNext() }} className={`rounded-lg border p-3 text-left text-sm transition-colors ${selectedArea === area ? "border-primary bg-primary/5" : "hover:bg-muted"}`} > {area} ))} )} {step === 2 && ( Date setSelectedDate(e.target.value)} min={new Date().toISOString().split("T")[0]} /> Available Time Slots

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

)} {step === 3 && (

First Name

Last Name

Phone

Brief Description

</motion.div>
                  <motion.div variants={staggerItem} className="flex gap-3">
                    <Button variant="outline" onClick={handleBack}>Back</Button>
                    <motion.div variants={buttonTap} whileTap="tap">
                      <Button type="submit">
                        <Calendar className="size-4" /> Confirm Booking
                      </Button>
                    </motion.div>
                  </motion.div>
                </motion.form>
              )}
            </CardContent>
          </Card>

{selectedArea && (
            <motion.div variants={fadeIn} className="text-center">
              <p className="text-xs text-muted-foreground">
                Selected: <span className="font-medium text-foreground">{selectedArea}</span>
                {selectedDate && selectedTime && (
                  <> · {selectedDate} at {selectedTime}</>
                )}
              </p>
            </motion.div>
          )}
        </motion.div>
      </div>
    </div>
  )
}
</article></body></html>

Consultation Booking

Book a Consultation