"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, cardHoverTarget, 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 { Checkbox } from "@/components/ui/checkbox" import { cn } from "@/lib/utils" import { Compass, Plane, Shield, Luggage, CreditCard, User, Mail, Phone, Check, ChevronLeft, ArrowRight, Clock, AlertCircle, } from "lucide-react" const steps = ["Passenger Details", "Add-ons", "Payment", "Confirmation"] const seatClasses = ["Economy", "Premium Economy", "Business", "First Class"] const addons = [ { id: "extra-legroom", label: "Extra Legroom", price: 49, icon: Luggage }, { id: "priority-boarding", label: "Priority Boarding", price: 19, icon: Plane }, { id: "travel-insurance", label: "Travel Insurance", price: 35, icon: Shield }, { id: "extra-baggage", label: "Extra Baggage (23kg)", price: 45, icon: Luggage }, ] export default function FlightBooking() { const [step, setStep] = useState(0) const [selectedClass, setSelectedClass] = useState("Economy") const [selectedAddons, setSelectedAddons] = useState(["extra-legroom"]) const toggleAddon = (id: string) => { setSelectedAddons((prev) => prev.includes(id) ? prev.filter((a) => a !== id) : [...prev, id] ) } const total = 549 + addons.filter((a) => selectedAddons.includes(a.id)).reduce((s, a) => s + a.price, 0) return (

Complete within 15:00

{steps.map((s, i) => (

{i < step ? : i + 1}

{i < steps.length - 1 &&

}

))}

{step === 0 && ( Passenger Details

First Name

Last Name

Phone

Select Seat Class

{seatClasses.map((sc) => ( ))}

)} {step === 1 && ( Add-ons & Extras {addons.map((addon) => (

toggleAddon(addon.id)} />

{addon.label}

+${addon.price}

))}

)} {step === 2 && ( Payment Details

Card Number

Expiry

CVC

Name on Card

Flight (JFK → LHR)$549

{addons.filter((a) => selectedAddons.includes(a.id)).map((a) => (

{a.label}+${a.price}

))}

Total${total}

)} {step === 3 && (

Booking Confirmed!

Your flight from JFK to LHR has been booked.

Confirmation: AN-9A3B7C

)}

) }

Flight Booking