[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import HeroSearch from "@/components/hero-search" import FeaturedHotels from "@/components/featured-hotels" import Testimonials from "@/components/testimonials" export default function HomePage() { return (

{/* Hero Section */}

Find Your Perfect Stay

Discover and book the best hotels at the best prices, anywhere in the world.

{/* Features Section */}

Why Book With Us

{[ { title: "Best Price Guarantee", description: "Find a lower price? We'll match it and give you an additional 10% off.", icon: "💰", }, { title: "Free Cancellation", description: "Plans change. That's why most of our hotels offer free cancellation.", icon: "🔄", }, { title: "24/7 Customer Support", description: "Round-the-clock assistance for any questions or concerns.", icon: "🛎️", }, { title: "Secure Booking", description: "Your payment and personal information are always protected.", icon: "🔒", }, ].map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

{/* Featured Hotels */} {/* Testimonials */} {/* CTA Section */}

Ready to Find Your Perfect Stay?

Join thousands of satisfied travelers who have found their ideal accommodations through our platform.

) } [V0_FILE]typescriptreact:file="components/hero-search.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { format } from "date-fns" import { CalendarIcon, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { cn } from "@/lib/utils" export default function HeroSearch() { const router = useRouter() const [location, setLocation] = useState("") const [guests, setGuests] = useState("2") const [checkIn, setCheckIn] = useState() const [checkOut, setCheckOut] = useState() const [openCheckIn, setOpenCheckIn] = useState(false) const [openCheckOut, setOpenCheckOut] = useState(false) const handleSearch = () => { const params = new URLSearchParams() if (location) params.append("location", location) if (guests) params.append("guests", guests) if (checkIn) params.append("checkIn", format(checkIn, "yyyy-MM-dd")) if (checkOut) params.append("checkOut", format(checkOut, "yyyy-MM-dd")) router.push(`/hotels?${params.toString()}`) } return (

Location setLocation(e.target.value)} className="h-10" />

Check-in { setCheckIn(date) setOpenCheckIn(false) }} initialFocus disabled={(date) => date < new Date()} />

Check-out { setCheckOut(date) setOpenCheckOut(false) }} initialFocus disabled={(date) => date < (checkIn || new Date())} />

Guests

setGuests(e.target.value)} className="h-10" />

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" const testimonials = [ { name: "Sarah Johnson", role: "Business Traveler", content: "This booking platform has transformed how I plan my business trips. The interface is intuitive, and I can find great deals in seconds.", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Michael Chen", role: "Family Vacationer", content: "We've booked our last three family vacations through this site. The filters make it easy to find family-friendly accommodations, and the booking process is seamless.", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Elena Rodriguez", role: "Solo Adventurer", content: "As someone who travels solo frequently, I appreciate how easy it is to find safe, well-reviewed places to stay. The customer service is also exceptional!", avatar: "/placeholder.svg?height=80&width=80", }, ] export default function Testimonials() { return (

What Our Customers Say

Don't just take our word for it - hear from our satisfied travelers

{testimonials.map((testimonial, index) => (

"{testimonial.content}"

{testimonial.name}

{testimonial.role}

))}

) } [V0_FILE]typescriptreact:file="app/booking-confirmation/page.tsx" isMerged="true" import Link from "next/link" import { CheckCircle2, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" export default function BookingConfirmationPage() { return (

Booking Confirmed!

Thank you for your booking. We've sent a confirmation email with all the details.

Booking Details

Booking ID: BK-{Math.floor(Math.random() * 1000000)}

Status: Confirmed

Payment: Pay at property

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Twitter, Instagram, Youtube, Mail, Phone, MapPin } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/auth-guard.tsx" isMerged="true" "use client" import type React from "react" import { useEffect } from "react" import { useRouter, usePathname } from "next/navigation" import { useAuth } from "@/lib/auth" // Pages that don't require authentication const publicPages = ["/", "/login", "/register", "/hotels", "/hotels/[id]", "/about", "/contact", "/deals"] export default function AuthGuard({ children }: { children: React.ReactNode }) { const { isAuthenticated } = useAuth() const router = useRouter() const pathname = usePathname() useEffect(() => { // Check if the current path requires authentication const requiresAuth = !publicPages.some((page) => { // Handle dynamic routes if (page.includes("[") && page.includes("]")) { const baseRoute = page.split("/").slice(0, -1).join("/") const currentRoute = pathname.split("/").slice(0, -1).join("/") return currentRoute === baseRoute } return pathname === page }) if (requiresAuth && !isAuthenticated) { router.push(`/login?redirect=${encodeURIComponent(pathname)}`) } }, [isAuthenticated, pathname, router]) return <>{children} } [V0_FILE]typescriptreact:file="app/login/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/search-dialog.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Search, Hotel, MapPin } from "lucide-react" import { hotels } from "@/lib/data" interface SearchDialogProps { open: boolean onOpenChange: (open: boolean) => void } export default function SearchDialog({ open, onOpenChange }: SearchDialogProps) { const router = useRouter() const [searchQuery, setSearchQuery] = useState("") const [results, setResults] = useState([]) const handleSearch = (e: React.ChangeEvent) => { const query = e.target.value setSearchQuery(query) if (query.trim().length > 1) { // Filter hotels based on name or location const filteredResults = hotels.filter( (hotel) => hotel.name.toLowerCase().includes(query.toLowerCase()) || hotel.location.toLowerCase().includes(query.toLowerCase()), ) setResults(filteredResults) } else { setResults([]) } } const handleSelectHotel = (hotelId: string) => { router.push(`/hotels/${hotelId}`) onOpenChange(false) setSearchQuery("") setResults([]) } return ( ) } [V0_FILE]typescriptreact:file="app/deals/page.tsx" isMerged="true" import Image from "next/image" import Link from "next/link" import { CalendarDays, MapPin, Tag, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { hotels } from "@/lib/data" // Filter hotels with discounts const dealsHotels = hotels.filter((hotel) => hotel.discount > 0) export default function DealsPage() { return (

Special Deals & Offers

Take advantage of our limited-time offers and save on your next stay.

Limited Time Offer

Summer Getaway Sale

Book your summer vacation now and save up to 30% on select hotels worldwide. Plus, get free cancellation on most rooms.

Book by Aug 31, 2025

Stay until Dec 31, 2025

Featured Deals

{dealsHotels.map((hotel) => (

{hotel.discount}% OFF

{hotel.name}

{hotel.location}

{hotel.description}

${hotel.price}/night

${Math.round(hotel.price / (1 - hotel.discount / 100))}

))}

More Ways to Save

Price Match Guarantee

Found a lower price elsewhere? We'll match it and give you an additional 10% off.

Flexible Booking

Plans change. That's why most of our hotels offer free cancellation.

Last-Minute Deals

Check back often for exclusive last-minute deals on hotels worldwide.

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Mail, Phone, MapPin, Send } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/hooks/use-toast" export default function ContactPage() { const { toast } = useToast() const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) toast({ title: "Message sent", description: "We've received your message and will get back to you soon.", }) setFormData({ name: "", email: "", subject: "", message: "", }) setIsSubmitting(false) } return (

Contact Us

Have questions or need assistance? We're here to help. Reach out to our team.

Get in Touch

Our customer support team is available 24/7 to answer your questions and provide assistance.

Address

123 Booking Street, Suite 100
New York, NY 10001

Email

support@stayease.com

Phone

+1 (555) 123-4567

Send Us a Message

Your Name

Email Address

Subject

Message

</div>

<Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Send className="mr-2 h-4 w-4 animate-pulse" /> Sending...
                </>
              ) : (
                <>
                  <Send className="mr-2 h-4 w-4" /> Send Message
                </>
              )}
            </Button>
          </form>
        </div>
      </div>

<div className="mt-12">
        <h2 className="mb-6 text-xl font-semibold">Frequently Asked Questions</h2>
        <div className="grid gap-4 md:grid-cols-2">
          {[
            {
              question: "How do I cancel or modify a booking?",
              answer:
                "You can cancel or modify your booking by logging into your account and navigating to 'My Bookings'. From there, select the booking you wish to change and follow the instructions.",
            },
            {
              question: "Is there a fee for cancellation?",
              answer:
                "Cancellation policies vary by hotel. Most of our hotels offer free cancellation up to 24-48 hours before check-in. The specific policy will be clearly displayed during the booking process.",
            },
            {
              question: "When will I be charged for my booking?",
              answer:
                "For most hotels, you'll pay at the property. Some hotels may require a deposit or prepayment, which will be clearly indicated during the booking process.",
            },
            {
              question: "How do I contact customer support?",
              answer:
                "Our customer support team is available 24/7. You can reach us by phone at +1 (555) 123-4567, by email at support@stayease.com, or through the contact form on this page.",
            },
          ].map((faq, index) => (
            <div key={index} className="rounded-lg border p-4">
              <h3 className="mb-2 font-medium">{faq.question}</h3>
              <p className="text-sm text-muted-foreground">{faq.answer}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/account/payment-methods/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { useToast } from "@/hooks/use-toast"
import { CreditCard, Plus, Trash2 } from "lucide-react"

export default function PaymentMethodsPage() {
  const { toast } = useToast()
  const [isAddingCard, setIsAddingCard] = useState(false)
  const [selectedCard, setSelectedCard] = useState("card1")
  const [isSubmitting, setIsSubmitting] = useState(false)

// Mock saved cards
  const [savedCards, setSavedCards] = useState([
    {
      id: "card1",
      cardNumber: "**** **** **** 4242",
      cardHolder: "John Doe",
      expiryDate: "12/25",
      isDefault: true,
    },
  ])

const [newCard, setNewCard] = useState({
    cardNumber: "",
    cardHolder: "",
    expiryDate: "",
    cvv: "",
    isDefault: false,
  })

const handleCardChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type, checked } = e.target
    setNewCard((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }))
  }

const handleAddCard = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))

// Create a new card object
    const cardId = `card${Date.now()}`
    const maskedNumber = "**** **** **** " + newCard.cardNumber.slice(-4)

const card = {
      id: cardId,
      cardNumber: maskedNumber,
      cardHolder: newCard.cardHolder,
      expiryDate: newCard.expiryDate,
      isDefault: newCard.isDefault,
    }

// Update default card if needed
    let updatedCards = [...savedCards]
    if (newCard.isDefault) {
      updatedCards = updatedCards.map((c) => ({ ...c, isDefault: false }))
    }

setSavedCards([...updatedCards, card])

// Reset form
    setNewCard({
      cardNumber: "",
      cardHolder: "",
      expiryDate: "",
      cvv: "",
      isDefault: false,
    })

setIsAddingCard(false)
    setIsSubmitting(false)

toast({
      title: "Card added",
      description: "Your payment method has been added successfully.",
    })
  }

const handleDeleteCard = (cardId: string) => {
    setSavedCards(savedCards.filter((card) => card.id !== cardId))

toast({
      title: "Card removed",
      description: "Your payment method has been removed.",
    })
  }

const handleSetDefault = (cardId: string) => {
    setSavedCards(
      savedCards.map((card) => ({
        ...card,
        isDefault: card.id === cardId,
      })),
    )

toast({
      title: "Default card updated",
      description: "Your default payment method has been updated.",
    })
  }

return (
    <div className="container py-8">
      <h1 className="mb-6 text-3xl font-bold">Payment Methods</h1>

<div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Saved Payment Methods</CardTitle>
            <CardDescription>Manage your saved payment methods for faster checkout.</CardDescription>
          </CardHeader>
          <CardContent>
            {savedCards.length > 0 ? (
              <RadioGroup value={selectedCard} onValueChange={setSelectedCard}>
                {savedCards.map((card) => (
                  <div key={card.id} className="flex items-center justify-between rounded-lg border p-4">
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value={card.id} id={card.id} />
                      <Label htmlFor={card.id} className="flex items-center gap-3">
                        <CreditCard className="h-5 w-5 text-muted-foreground" />
                        <div>
                          <div className="font-medium">{card.cardNumber}</div>
                          <div className="text-sm text-muted-foreground">
                            {card.cardHolder} • Expires {card.expiryDate}
                          </div>
                        </div>
                      </Label>
                      {card.isDefault && (
                        <span className="ml-2 rounded-full bg-primary/10 px-2 py-1 text-xs text-primary">Default</span>
                      )}
                    </div>
                    <div className="flex gap-2">
                      {!card.isDefault && (
                        <Button variant="outline" size="sm" onClick={() => handleSetDefault(card.id)}>
                          Set Default
                        </Button>
                      )}
                      <Button variant="ghost" size="icon" onClick={() => handleDeleteCard(card.id)}>
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </RadioGroup>
            ) : (
              <div className="rounded-lg border border-dashed p-8 text-center">
                <h3 className="mb-2 text-lg font-medium">No payment methods</h3>
                <p className="mb-4 text-sm text-muted-foreground">You haven't added any payment methods yet.</p>
              </div>
            )}
          </CardContent>
          <CardFooter>
            <Button onClick={() => setIsAddingCard(true)} className="w-full">
              <Plus className="mr-2 h-4 w-4" /> Add Payment Method
            </Button>
          </CardFooter>
        </Card>

{isAddingCard && (
          <Card>
            <CardHeader>
              <CardTitle>Add New Payment Method</CardTitle>
              <CardDescription>Enter your card details to add a new payment method.</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleAddCard} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="cardNumber">Card Number</Label>
                  <Input
                    id="cardNumber"
                    name="cardNumber"
                    placeholder="1234 5678 9012 3456"
                    value={newCard.cardNumber}
                    onChange={handleCardChange}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="cardHolder">Cardholder Name</Label>
                  <Input
                    id="cardHolder"
                    name="cardHolder"
                    placeholder="John Doe"
                    value={newCard.cardHolder}
                    onChange={handleCardChange}
                    required
                  />
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="expiryDate">Expiry Date</Label>
                    <Input
                      id="expiryDate"
                      name="expiryDate"
                      placeholder="MM/YY"
                      value={newCard.expiryDate}
                      onChange={handleCardChange}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cvv">CVV</Label>
                    <Input
                      id="cvv"
                      name="cvv"
                      placeholder="123"
                      value={newCard.cvv}
                      onChange={handleCardChange}
                      required
                    />
                  </div>
                </div>

<div className="flex items-center space-x-2">
                  <input
                    type="checkbox"
                    id="isDefault"
                    name="isDefault"
                    checked={newCard.isDefault}
                    onChange={handleCardChange}
                    className="h-4 w-4 rounded border-gray-300"
                  />
                  <Label htmlFor="isDefault" className="text-sm font-normal">
                    Set as default payment method
                  </Label>
                </div>

<div className="flex gap-2">
                  <Button type="submit" disabled={isSubmitting}>
                    {isSubmitting ? "Adding..." : "Add Card"}
                  </Button>
                  <Button type="button" variant="outline" onClick={() => setIsAddingCard(false)}>
                    Cancel
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { CheckCircle, Users, Building, Globe, Award, Clock } from "lucide-react"

export default function AboutPage() {
  return (
    <div className="container py-8">
      <div className="mb-12 text-center">
        <h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-5xl">About StayEase</h1>
        <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
          Connecting travelers with exceptional accommodations since 2015.
        </p>
      </div>

<div className="mb-16 grid gap-12 md:grid-cols-2">
        <div className="space-y-4">
          <h2 className="text-3xl font-bold">Our Mission</h2>
          <p className="text-lg text-muted-foreground">
            At StayEase, we believe that finding the perfect place to stay should be simple, transparent, and
            stress-free. Our mission is to connect travelers with exceptional accommodations that meet their unique
            needs and preferences, all while providing outstanding service and value.
          </p>
          <p className="text-lg text-muted-foreground">
            Whether you're planning a business trip, family vacation, or solo adventure, we're committed to making your
            booking experience seamless and your stay memorable.
          </p>
        </div>
        <div className="relative h-[300px] overflow-hidden rounded-lg md:h-auto">
          <Image
            src="/placeholder.svg?height=600&width=800&text=Our+Mission"
            alt="Our mission"
            fill
            className="object-cover"
          />
        </div>
      </div>

<div className="mb-16">
        <h2 className="mb-8 text-center text-3xl font-bold">Why Choose StayEase</h2>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {[
            {
              icon: <Globe className="h-10 w-10 text-primary" />,
              title: "Global Selection",
              description: "Access to over 500,000 properties worldwide, from boutique hotels to luxury resorts.",
            },
            {
              icon: <CheckCircle className="h-10 w-10 text-primary" />,
              title: "Best Price Guarantee",
              description: "We match any lower price you find elsewhere and give you an additional 10% discount.",
            },
            {
              icon: <Clock className="h-10 w-10 text-primary" />,
              title: "24/7 Support",
              description: "Our dedicated customer service team is available around the clock to assist you.",
            },
            {
              icon: <Users className="h-10 w-10 text-primary" />,
              title: "Verified Reviews",
              description: "Authentic reviews from real guests help you make informed decisions.",
            },
            {
              icon: <Award className="h-10 w-10 text-primary" />,
              title: "Loyalty Rewards",
              description: "Earn points with every booking and redeem them for discounts on future stays.",
            },
            {
              icon: <Building className="h-10 w-10 text-primary" />,
              title: "Curated Properties",
              description: "We personally vet each property to ensure it meets our quality standards.",
            },
          ].map((feature, index) => (
            <Card key={index} className="border-0 shadow-md">
              <CardContent className="flex flex-col items-center p-6 text-center">
                <div className="mb-4">{feature.icon}</div>
                <h3 className="mb-2 text-xl font-semibold">{feature.title}</h3>
                <p className="text-muted-foreground">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

<div className="mb-16">
        <div className="rounded-lg bg-muted p-8">
          <div className="grid gap-8 md:grid-cols-2">
            <div>
              <h2 className="mb-4 text-3xl font-bold">Our Story</h2>
              <div className="space-y-4">
                <p>
                  StayEase was founded in 2015 by a group of travel enthusiasts who were frustrated with the complicated
                  and often misleading hotel booking process. They set out to create a platform that would make finding
                  and booking accommodations simple, transparent, and enjoyable.
                </p>
                <p>
                  What started as a small startup with just 10 hotel partners has grown into a global platform with over
                  500,000 properties in more than 190 countries. Despite our growth, we've remained true to our founding
                  principles: honesty, transparency, and exceptional customer service.
                </p>
                <p>
                  Today, StayEase helps millions of travelers find their perfect stay each year, and we continue to
                  innovate and improve our platform based on customer feedback and industry trends.
                </p>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="relative h-40 overflow-hidden rounded-lg">
                <Image
                  src="/placeholder.svg?height=160&width=200&text=2015+Founded"
                  alt="Company founding"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="relative h-40 overflow-hidden rounded-lg">
                <Image
                  src="/placeholder.svg?height=160&width=200&text=2018+Expansion"
                  alt="Company expansion"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="relative h-40 overflow-hidden rounded-lg">
                <Image
                  src="/placeholder.svg?height=160&width=200&text=2020+Global"
                  alt="Global presence"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="relative h-40 overflow-hidden rounded-lg">
                <Image
                  src="/placeholder.svg?height=160&width=200&text=2023+Award"
                  alt="Industry award"
                  fill
                  className="object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

<div className="mb-16 text-center">
        <h2 className="mb-4 text-3xl font-bold">Our Team</h2>
        <p className="mx-auto mb-8 max-w-2xl text-muted-foreground">
          Meet the passionate individuals behind StayEase who work tirelessly to make your travel experience
          exceptional.
        </p>
        <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
          {[
            {
              name: "Sarah Johnson",
              role: "CEO & Co-Founder",
              image: "/placeholder.svg?height=300&width=300&text=Sarah+J",
            },
            {
              name: "Michael Chen",
              role: "CTO & Co-Founder",
              image: "/placeholder.svg?height=300&width=300&text=Michael+C",
            },
            {
              name: "Elena Rodriguez",
              role: "Chief Customer Officer",
              image: "/placeholder.svg?height=300&width=300&text=Elena+R",
            },
            {
              name: "David Kim",
              role: "Head of Global Partnerships",
              image: "/placeholder.svg?height=300&width=300&text=David+K",
            },
          ].map((member, index) => (
            <div key={index} className="flex flex-col items-center">
              <div className="relative mb-4 h-40 w-40 overflow-hidden rounded-full">
                <Image src={member.image || "/placeholder.svg"} alt={member.name} fill className="object-cover" />
              </div>
              <h3 className="text-lg font-semibold">{member.name}</h3>
              <p className="text-muted-foreground">{member.role}</p>
            </div>
          ))}
        </div>
      </div>

<div className="rounded-lg bg-primary p-8 text-center text-primary-foreground">
        <h2 className="mb-4 text-3xl font-bold">Ready to Find Your Perfect Stay?</h2>
        <p className="mx-auto mb-6 max-w-2xl">
          Join millions of satisfied travelers who have found their ideal accommodations through StayEase.
        </p>
        <Button size="lg" asChild className="bg-white text-primary hover:bg-white/90">
          <Link href="/hotels">Start Searching Now</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/account/bookings/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { CalendarDays, MapPin, Users, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useAuth } from "@/lib/auth"
import { useBookings, type Booking } from "@/lib/bookings"
import { hotels } from "@/lib/data"
import { format, parseISO } from "date-fns"

export default function BookingsPage() {
  const { user, isAuthenticated } = useAuth()
  const { getBookingsByUserId } = useBookings()
  const [bookings, setBookings] = useState<Booking[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (isAuthenticated && user) {
      const userBookings = getBookingsByUserId(user.id)
      setBookings(userBookings)
    }
    setIsLoading(false)
  }, [isAuthenticated, user, getBookingsByUserId])

// Helper function to get hotel details
  const getHotelDetails = (hotelId: string) => {
    return hotels.find((hotel) => hotel.id === hotelId) || null
  }

// Format date from ISO string to readable format
  const formatDate = (dateString: string) => {
    try {
      return format(parseISO(dateString), "MMM dd, yyyy")
    } catch (error) {
      return dateString
    }
  }

if (!isAuthenticated) {
    return (
      <div className="container py-12">
        <div className="rounded-lg border p-8 text-center">
          <h2 className="mb-2 text-xl font-semibold">Please sign in</h2>
          <p className="mb-6 text-muted-foreground">You need to be signed in to view your bookings.</p>
          <Button asChild>
            <Link href="/login?redirect=/account/bookings">Sign In</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container py-8">
      <div className="mb-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
        <div>
          <h1 className="text-3xl font-bold">My Bookings</h1>
          <p className="text-muted-foreground">Manage your upcoming and past stays</p>
        </div>
        <Button asChild>
          <Link href="/hotels">Book New Stay</Link>
        </Button>
      </div>

{isLoading ? (
        <div className="flex justify-center py-12">
          <p>Loading your bookings...</p>
        </div>
      ) : bookings.length > 0 ? (
        <div className="space-y-6">
          {bookings.map((booking) => {
            const hotel = getHotelDetails(booking.hotelId)
            if (!hotel) return null

return (
              <Card key={booking.id} className="overflow-hidden">
                <div className="flex flex-col sm:flex-row">
                  <div className="relative h-48 w-full sm:h-auto sm:w-64">
                    <Image src={hotel.image || "/placeholder.svg"} alt={hotel.name} fill className="object-cover" />
                  </div>
                  <CardContent className="flex flex-1 flex-col p-6">
                    <div className="mb-4 flex flex-wrap items-start justify-between gap-2">
                      <div>
                        <h3 className="text-xl font-semibold">{hotel.name}</h3>
                        <div className="mt-1 flex items-center text-sm text-muted-foreground">
                          <MapPin className="mr-1 h-4 w-4" />
                          {hotel.location}
                        </div>
                      </div>
                      <Badge className={`${booking.status === "Cancelled" ? "bg-red-500" : "bg-green-500"}`}>
                        {booking.status}
                      </Badge>
                    </div>

<div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
                      <div className="flex items-center text-sm">
                        <CalendarDays className="mr-2 h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="font-medium">Check-in</p>
                          <p className="text-muted-foreground">{formatDate(booking.checkIn)}</p>
                        </div>
                      </div>
                      <div className="flex items-center text-sm">
                        <CalendarDays className="mr-2 h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="font-medium">Check-out</p>
                          <p className="text-muted-foreground">{formatDate(booking.checkOut)}</p>
                        </div>
                      </div>
                      <div className="flex items-center text-sm">
                        <Users className="mr-2 h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="font-medium">Guests</p>
                          <p className="text-muted-foreground">{booking.guests}</p>
                        </div>
                      </div>
                    </div>

<div className="mt-auto flex flex-wrap items-center justify-between gap-4">
                      <div>
                        <p className="text-sm text-muted-foreground">Booking ID: {booking.id}</p>
                        <p className="text-lg font-bold">${booking.totalPrice}</p>
                      </div>
                      <div className="flex gap-2">
                        <Button variant="outline" asChild>
                          <Link href={`/account/bookings/${booking.id}`}>View Details</Link>
                        </Button>
                        {booking.status !== "Cancelled" && (
                          <Button asChild>
                            <Link href={`/account/bookings/${booking.id}/modify`}>Modify</Link>
                          </Button>
                        )}
                      </div>
                    </div>
                  </CardContent>
                </div>
              </Card>
            )
          })}
        </div>
      ) : (
        <div className="rounded-lg border p-8 text-center">
          <h3 className="mb-2 text-xl font-semibold">No bookings found</h3>
          <p className="mb-6 text-muted-foreground">
            You haven't made any bookings yet. Start planning your next trip!
          </p>
          <Button asChild>
            <Link href="/hotels" className="inline-flex items-center">
              Browse Hotels
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/account/bookings/[id]/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { format, parseISO, differenceInDays } from "date-fns"
import { CalendarDays, MapPin, Users, ArrowLeft, Printer, Clock, CreditCard } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { useBookings, type Booking } from "@/lib/bookings"
import { hotels } from "@/lib/data"
import { useToast } from "@/hooks/use-toast"

export default function BookingDetailsPage() {
  const params = useParams()
  const router = useRouter()
  const { toast } = useToast()
  const { getBookingById, cancelBooking } = useBookings()
  const [booking, setBooking] = useState<Booking | null>(null)
  const [hotel, setHotel] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (params.id) {
      const bookingData = getBookingById(params.id as string)
      if (bookingData) {
        setBooking(bookingData)
        const hotelData = hotels.find((h) => h.id === bookingData.hotelId)
        setHotel(hotelData || null)
      }
    }
    setIsLoading(false)
  }, [params.id, getBookingById])

const handleCancelBooking = () => {
    if (!booking) return

if (window.confirm("Are you sure you want to cancel this booking? This action cannot be undone.")) {
      const success = cancelBooking(booking.id)
      if (success) {
        toast({
          title: "Booking cancelled",
          description: "Your booking has been successfully cancelled.",
        })
        // Refresh booking data
        const updatedBooking = getBookingById(booking.id)
        setBooking(updatedBooking || null)
      } else {
        toast({
          title: "Error",
          description: "There was a problem cancelling your booking. Please try again.",
          variant: "destructive",
        })
      }
    }
  }

const handlePrint = () => {
    window.print()
  }

if (isLoading) {
    return (
      <div className="container py-12">
        <div className="flex justify-center">
          <p>Loading booking details...</p>
        </div>
      </div>
    )
  }

if (!booking || !hotel) {
    return (
      <div className="container py-12">
        <div className="rounded-lg border p-8 text-center">
          <h2 className="mb-2 text-xl font-semibold">Booking not found</h2>
          <p className="mb-6 text-muted-foreground">
            The booking you're looking for doesn't exist or has been removed.
          </p>
          <Button asChild>
            <Link href="/account/bookings">Back to My Bookings</Link>
          </Button>
        </div>
      </div>
    )
  }

// Calculate nights
  const checkInDate = parseISO(booking.checkIn)
  const checkOutDate = parseISO(booking.checkOut)
  const nights = differenceInDays(checkOutDate, checkInDate)

return (
    <div className="container py-8">
      <div className="mb-6 flex items-center">
        <Button variant="ghost" size="sm" asChild className="mr-4">
          <Link href="/account/bookings">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Bookings
          </Link>
        </Button>
        <h1 className="text-2xl font-bold sm:text-3xl">Booking Details</h1>
      </div>

<div className="mb-8 flex flex-wrap items-center justify-between gap-4 rounded-lg border bg-muted/30 p-4">
        <div>
          <div className="flex items-center">
            <h2 className="text-lg font-semibold">Booking ID: {booking.id}</h2>
            <Badge className={`ml-4 ${booking.status === "Cancelled" ? "bg-red-500" : "bg-green-500"}`}>
              {booking.status}
            </Badge>
          </div>
          <p className="text-sm text-muted-foreground">
            Booked on {format(parseISO(booking.createdAt), "MMMM d, yyyy")}
          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={handlePrint}>
            <Printer className="mr-2 h-4 w-4" />
            Print
          </Button>
          {booking.status !== "Cancelled" && (
            <>
              <Button variant="outline" size="sm" asChild>
                <Link href={`/account/bookings/${booking.id}/modify`}>Modify</Link>
              </Button>
              <Button variant="destructive" size="sm" onClick={handleCancelBooking}>
                Cancel Booking
              </Button>
            </>
          )}
        </div>
      </div>

<div className="grid gap-8 md:grid-cols-3">
        <div className="md:col-span-2">
          <div className="rounded-lg border">
            <div className="flex flex-col sm:flex-row">
              <div className="relative h-48 w-full sm:h-auto sm:w-64">
                <Image src={hotel.image || "/placeholder.svg"} alt={hotel.name} fill className="object-cover" />
              </div>
              <div className="p-6">
                <h2 className="text-xl font-semibold">{hotel.name}</h2>
                <div className="mt-1 flex items-center text-sm text-muted-foreground">
                  <MapPin className="mr-1 h-4 w-4" />
                  {hotel.location}
                </div>
                <p className="mt-4 text-sm">{hotel.description}</p>
              </div>
            </div>

<div className="grid grid-cols-1 gap-4 p-6 sm:grid-cols-3">
              <div className="flex items-start">
                <CalendarDays className="mr-2 h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="font-medium">Check-in</p>
                  <p className="text-muted-foreground">{format(checkInDate, "EEEE, MMMM d, yyyy")}</p>
                  <p className="text-sm text-muted-foreground">From 3:00 PM</p>
                </div>
              </div>
              <div className="flex items-start">
                <CalendarDays className="mr-2 h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="font-medium">Check-out</p>
                  <p className="text-muted-foreground">{format(checkOutDate, "EEEE, MMMM d, yyyy")}</p>
                  <p className="text-sm text-muted-foreground">Until 11:00 AM</p>
                </div>
              </div>
              <div className="flex items-start">
                <Clock className="mr-2 h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="font-medium">Duration</p>
                  <p className="text-muted-foreground">
                    {nights} {nights === 1 ? "night" : "nights"}
                  </p>
                </div>
              </div>
            </div>

<div className="p-6">
              <h3 className="mb-4 font-semibold">Booking Details</h3>
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div className="flex items-start">
                  <Users className="mr-2 h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Guests</p>
                    <p className="text-muted-foreground">{booking.guests} guests</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <CreditCard className="mr-2 h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Payment</p>
                    <p className="text-muted-foreground">Pay at property</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

<div className="mt-8 rounded-lg border p-6">
            <h3 className="mb-4 font-semibold">Cancellation Policy</h3>
            <p className="text-muted-foreground">
              Free cancellation until 24 hours before check-in. If you cancel less than 24 hours before check-in, you
              will be charged the first night's stay.
            </p>
          </div>
        </div>

<div>
          <div className="rounded-lg border p-6">
            <h3 className="mb-4 font-semibold">Price Details</h3>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-muted-foreground">
                  ${hotel.price} x {nights} {nights === 1 ? "night" : "nights"} x {booking.rooms}{" "}
                  {booking.rooms === 1 ? "room" : "rooms"}
                </span>
                <span>${hotel.price * nights * booking.rooms}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Taxes and fees (12%)</span>
                <span>${(hotel.price * nights * booking.rooms * 0.12).toFixed(2)}</span>
              </div>
              <Separator className="my-2" />
              <div className="flex justify-between font-medium">
                <span>Total</span>
                <span>${booking.totalPrice}</span>
              </div>
            </div>
          </div>

<div className="mt-6 rounded-lg border p-6">
            <h3 className="mb-4 font-semibold">Need Help?</h3>
            <p className="mb-4 text-sm text-muted-foreground">
              If you have any questions or need to make changes to your booking, our customer service team is here to
              help.
            </p>
            <Button variant="outline" className="w-full" asChild>
              <Link href="/contact">Contact Support</Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/account/bookings/[id]/modify/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { format, parseISO, addDays, differenceInDays } from "date-fns"
import { CalendarIcon, ArrowLeft, MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { cn } from "@/lib/utils"
import { useBookings, type Booking } from "@/lib/bookings"
import { hotels } from "@/lib/data"
import { useToast } from "@/hooks/use-toast"

export default function ModifyBookingPage() {
  const params = useParams()
  const router = useRouter()
  const { toast } = useToast()
  const { getBookingById, updateBooking } = useBookings()
  const [booking, setBooking] = useState<Booking | null>(null)
  const [hotel, setHotel] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isSubmitting, setIsSubmitting] = useState(false)

// Form state
  const [checkIn, setCheckIn] = useState<Date | undefined>(undefined)
  const [checkOut, setCheckOut] = useState<Date | undefined>(undefined)
  const [guests, setGuests] = useState("")
  const [rooms, setRooms] = useState("")

useEffect(() => {
    if (params.id) {
      const bookingData = getBookingById(params.id as string)
      if (bookingData) {
        setBooking(bookingData)

// Set form values from booking
        setCheckIn(parseISO(bookingData.checkIn))
        setCheckOut(parseISO(bookingData.checkOut))
        setGuests(bookingData.guests.toString())
        setRooms(bookingData.rooms.toString())

const hotelData = hotels.find((h) => h.id === bookingData.hotelId)
        setHotel(hotelData || null)
      }
    }
    setIsLoading(false)
  }, [params.id, getBookingById])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (!booking || !checkIn || !checkOut || !guests || !rooms) {
      toast({
        title: "Error",
        description: "Please fill in all required fields.",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

// Calculate new total price
    const nights = differenceInDays(checkOut, checkIn)
    const roomsNum = Number.parseInt(rooms)
    const totalPrice = hotel.price * nights * roomsNum

// Update booking
    const success = updateBooking(booking.id, {
      checkIn: format(checkIn, "yyyy-MM-dd"),
      checkOut: format(checkOut, "yyyy-MM-dd"),
      guests: Number.parseInt(guests),
      rooms: roomsNum,
      totalPrice,
    })

if (success) {
      toast({
        title: "Booking updated",
        description: "Your booking has been successfully updated.",
      })
      router.push(`/account/bookings/${booking.id}`)
    } else {
      toast({
        title: "Error",
        description: "There was a problem updating your booking. Please try again.",
        variant: "destructive",
      })
      setIsSubmitting(false)
    }
  }

if (isLoading) {
    return (
      <div className="container py-12">
        <div className="flex justify-center">
          <p>Loading booking details...</p>
        </div>
      </div>
    )
  }

return (
    <div className="container py-8">
      <div className="mb-6 flex items-center">
        <Button variant="ghost" size="sm" asChild className="mr-4">
          <Link href={`/account/bookings/${booking.id}`}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Booking Details
          </Link>
        </Button>
        <h1 className="text-2xl font-bold sm:text-3xl">Modify Booking</h1>
      </div>

<div className="grid gap-8 md:grid-cols-3">
        <div className="md:col-span-2">
          <form onSubmit={handleSubmit} className="space-y-6 rounded-lg border p-6">
            <div className="flex flex-col sm:flex-row sm:items-center sm:gap-4">
              <div className="relative mb-4 h-24 w-24 overflow-hidden rounded-md sm:mb-0">
                <Image src={hotel.image || "/placeholder.svg"} alt={hotel.name} fill className="object-cover" />
              </div>
              <div>
                <h2 className="text-xl font-semibold">{hotel.name}</h2>
                <div className="mt-1 flex items-center text-sm text-muted-foreground">
                  <MapPin className="mr-1 h-4 w-4" />
                  {hotel.location}
                </div>
              </div>
            </div>

<div className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="check-in">Check-in Date</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        id="check-in"
                        variant="outline"
                        className={cn(
                          "w-full justify-start text-left font-normal",
                          !checkIn && "text-muted-foreground",
                        )}
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {checkIn ? format(checkIn, "PPP") : "Select date"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                      <Calendar
                        mode="single"
                        selected={checkIn}
                        onSelect={(date) => {
                          setCheckIn(date)
                          if (date && checkOut && date >= checkOut) {
                            setCheckOut(addDays(date, 1))
                          }
                        }}
                        disabled={(date) => date < new Date()}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>

<div className="space-y-2">
                  <Label htmlFor="check-out">Check-out Date</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        id="check-out"
                        variant="outline"
                        className={cn(
                          "w-full justify-start text-left font-normal",
                          !checkOut && "text-muted-foreground",
                        )}
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {checkOut ? format(checkOut, "PPP") : "Select date"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                      <Calendar
                        mode="single"
                        selected={checkOut}
                        onSelect={setCheckOut}
                        disabled={(date) => date <= checkIn || date <= new Date()}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>
              </div>

<div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="guests">Guests</Label>
                  <Select value={guests} onValueChange={setGuests}>
                    <SelectTrigger id="guests">
                      <SelectValue placeholder="Select" />
                    </SelectTrigger>
                    <SelectContent>
                      {[1, 2, 3, 4, 5, 6].map((num) => (
                        <SelectItem key={num} value={num.toString()}>
                          {num} {num === 1 ? "guest" : "guests"}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="rooms">Rooms</Label>
                  <Select value={rooms} onValueChange={setRooms}>
                    <SelectTrigger id="rooms">
                      <SelectValue placeholder="Select" />
                    </SelectTrigger>
                    <SelectContent>
                      {[1, 2, 3, 4].map((num) => (
                        <SelectItem key={num} value={num.toString()}>
                          {num} {num === 1 ? "room" : "rooms"}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>

<div className="flex gap-2">
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? "Updating..." : "Update Booking"}
              </Button>
              <Button type="button" variant="outline" asChild>
                <Link href={`/account/bookings/${booking.id}`}>Cancel</Link>
              </Button>
            </div>
          </form>
        </div>

<div>
          <div className="rounded-lg border p-6">
            <h3 className="mb-4 font-semibold">Price Summary</h3>
            {checkIn && checkOut && rooms ? (
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">
                    ${hotel.price} x {differenceInDays(checkOut, checkIn)} nights x {rooms}{" "}
                    {Number.parseInt(rooms) === 1 ? "room" : "rooms"}
                  </span>
                  <span>${hotel.price * differenceInDays(checkOut, checkIn) * Number.parseInt(rooms)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Taxes and fees (12%)</span>
                  <span>
                    ${(hotel.price * differenceInDays(checkOut, checkIn) * Number.parseInt(rooms) * 0.12).toFixed(2)}
                  </span>
                </div>
                <div className="mt-2 flex justify-between border-t pt-2 font-medium">
                  <span>New Total</span>
                  <span>
                    ${(hotel.price * differenceInDays(checkOut, checkIn) * Number.parseInt(rooms) * 1.12).toFixed(2)}
                  </span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Original Total</span>
                  <span className="text-muted-foreground">${booking.totalPrice}</span>
                </div>
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">Select dates and rooms to see updated pricing.</p>
            )}
          </div>

<div className="mt-6 rounded-lg border p-6">
            <h3 className="mb-4 font-semibold">Modification Policy</h3>
            <p className="text-sm text-muted-foreground">
              You can modify your booking free of charge up to 24 hours before check-in. Changes may affect the total
              price based on updated dates, number of guests, and rooms.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/account/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/lib/auth"
import { useToast } from "@/hooks/use-toast"
import { CreditCard, Hotel, Heart, Settings, LogOut } from "lucide-react"
import ProfilePictureUpload from "@/components/profile-picture-upload"

export default function AccountPage() {
  const { user, logout } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

const handleLogout = () => {
    logout()
    toast({
      title: "Logged out",
      description: "You have been successfully logged out.",
    })
    router.push("/")
  }

if (!user) {
    return (
      <div className="container py-12">
        <div className="rounded-lg border p-8 text-center">
          <h2 className="mb-2 text-xl font-semibold">Please sign in</h2>
          <p className="mb-6 text-muted-foreground">You need to be signed in to view your account.</p>
          <Button asChild>
            <Link href="/login?redirect=/account">Sign In</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container py-8">
      <h1 className="mb-6 text-3xl font-bold">My Account</h1>

<div className="mb-8 rounded-lg border p-6">
        <div className="flex flex-col items-center gap-6 sm:flex-row">
          <ProfilePictureUpload currentAvatar={user.avatar} />
          <div>
            <h2 className="text-2xl font-semibold">
              {user.firstName} {user.lastName}
            </h2>
            <p className="text-muted-foreground">{user.email}</p>
            <div className="mt-4 flex gap-2">
              <Button variant="outline" size="sm" asChild>
                <Link href="/account/settings">
                  <Settings className="mr-2 h-4 w-4" />
                  Edit Profile
                </Link>
              </Button>
              <Button variant="outline" size="sm" onClick={handleLogout}>
                <LogOut className="mr-2 h-4 w-4" />
                Sign Out
              </Button>
            </div>
          </div>
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center">
              <Hotel className="mr-2 h-5 w-5" />
              My Bookings
            </CardTitle>
            <CardDescription>View and manage your hotel reservations</CardDescription>
          </CardHeader>
          <CardContent>
            <Button asChild className="w-full">
              <Link href="/account/bookings">View Bookings</Link>
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center">
              <Heart className="mr-2 h-5 w-5" />
              Wishlist
            </CardTitle>
            <CardDescription>Hotels you've saved for later</CardDescription>
          </CardHeader>
          <CardContent>
            <Button asChild className="w-full">
              <Link href="/wishlist">View Wishlist</Link>
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center">
              <CreditCard className="mr-2 h-5 w-5" />
              Payment Methods
            </CardTitle>
            <CardDescription>Manage your payment options</CardDescription>
          </CardHeader>
          <CardContent>
            <Button asChild className="w-full">
              <Link href="/account/payment-methods">Manage Payments</Link>
            </Button>
          </CardContent>
        </Card>
      </div>

<div className="mt-8 rounded-lg border p-6">
        <h2 className="mb-4 text-xl font-semibold">Recent Activity</h2>
        <div className="space-y-4">
          <div className="rounded-lg bg-muted/50 p-4">
            <p className="font-medium">You viewed Grand Plaza Hotel</p>
            <p className="text-sm text-muted-foreground">2 days ago</p>
          </div>
          <div className="rounded-lg bg-muted/50 p-4">
            <p className="font-medium">You added Mountain Lodge to your wishlist</p>
            <p className="text-sm text-muted-foreground">5 days ago</p>
          </div>
          <div className="rounded-lg bg-muted/50 p-4">
            <p className="font-medium">You searched for hotels in Miami</p>
            <p className="text-sm text-muted-foreground">1 week ago</p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/account/settings/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/lib/auth"
import { Loader2 } from "lucide-react"
import ProfilePictureUpload from "@/components/profile-picture-upload"

export default function SettingsPage() {
  const { user, updateUser } = useAuth()
  const { toast } = useToast()
  const [isUpdating, setIsUpdating] = useState(false)
  const [isChangingPassword, setIsChangingPassword] = useState(false)

const [profileData, setProfileData] = useState({
    firstName: user?.firstName || "",
    lastName: user?.lastName || "",
    email: user?.email || "",
  })

const [passwordData, setPasswordData] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  })

const handleProfileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setProfileData((prev) => ({ ...prev, [name]: value }))
  }

const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setPasswordData((prev) => ({ ...prev, [name]: value }))
  }

const handleProfileSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsUpdating(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000))

updateUser({
      firstName: profileData.firstName,
      lastName: profileData.lastName,
    })

toast({
      title: "Profile updated",
      description: "Your profile information has been updated successfully.",
    })

setIsUpdating(false)
  }

const handlePasswordSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsChangingPassword(true)

// Validate passwords
    if (passwordData.newPassword !== passwordData.confirmPassword) {
      toast({
        title: "Passwords don't match",
        description: "New password and confirmation password must match.",
        variant: "destructive",
      })
      setIsChangingPassword(false)
      return
    }

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000))

toast({
      title: "Password updated",
      description: "Your password has been changed successfully.",
    })

setPasswordData({
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
    })
    setIsChangingPassword(false)
  }

return (
    <div className="container py-8">
      <h1 className="mb-6 text-3xl font-bold">Account Settings</h1>

<Tabs defaultValue="profile" className="w-full">
        <TabsList className="mb-6 grid w-full grid-cols-3 md:w-[600px]">
          <TabsTrigger value="profile">Profile</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
          <TabsTrigger value="avatar">Profile Picture</TabsTrigger>
        </TabsList>

<TabsContent value="profile" className="space-y-6">
          <div className="rounded-lg border p-6">
            <h2 className="mb-4 text-xl font-semibold">Personal Information</h2>
            <form onSubmit={handleProfileSubmit} className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="firstName">First name</Label>
                  <Input
                    id="firstName"
                    name="firstName"
                    value={profileData.firstName}
                    onChange={handleProfileChange}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lastName">Last name</Label>
                  <Input
                    id="lastName"
                    name="lastName"
                    value={profileData.lastName}
                    onChange={handleProfileChange}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  value={profileData.email}
                  onChange={handleProfileChange}
                  disabled
                  className="bg-muted"
                />
                <p className="text-xs text-muted-foreground">
                  Email address cannot be changed. Contact support for assistance.
                </p>
              </div>

<Button type="submit" disabled={isUpdating}>
                {isUpdating ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Updating...
                  </>
                ) : (
                  "Save Changes"
                )}
              </Button>
            </form>
          </div>
        </TabsContent>

<TabsContent value="security" className="space-y-6">
          <div className="rounded-lg border p-6">
            <h2 className="mb-4 text-xl font-semibold">Change Password</h2>
            <form onSubmit={handlePasswordSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="currentPassword">Current Password</Label>
                <Input
                  id="currentPassword"
                  name="currentPassword"
                  type="password"
                  value={passwordData.currentPassword}
                  onChange={handlePasswordChange}
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="newPassword">New Password</Label>
                <Input
                  id="newPassword"
                  name="newPassword"
                  type="password"
                  value={passwordData.newPassword}
                  onChange={handlePasswordChange}
                  required
                />
                <p className="text-xs text-muted-foreground">
                  Password must be at least 8 characters long and include a mix of letters, numbers, and symbols.
                </p>
              </div>

<div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm New Password</Label>
                <Input
                  id="confirmPassword"
                  name="confirmPassword"
                  type="password"
                  value={passwordData.confirmPassword}
                  onChange={handlePasswordChange}
                  required
                />
              </div>

<Button type="submit" disabled={isChangingPassword}>
                {isChangingPassword ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Updating...
                  </>
                ) : (
                  "Change Password"
                )}
              </Button>
            </form>
          </div>
        </TabsContent>

<TabsContent value="avatar" className="space-y-6">
          <div className="rounded-lg border p-6">
            <h2 className="mb-4 text-xl font-semibold">Profile Picture</h2>
            <div className="flex flex-col items-center">
              <ProfilePictureUpload currentAvatar={user?.avatar} size="lg" />
              <p className="mt-4 text-center text-sm text-muted-foreground">
                Upload a profile picture to personalize your account. <br />
                We recommend using a square image of at least 300x300 pixels.
              </p>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/wishlist.ts" isMerged="true"
import { create } from "zustand"

type WishlistState = {
  items: string[] // hotel IDs
  addItem: (hotelId: string) => void
  removeItem: (hotelId: string) => void
  isInWishlist: (hotelId: string) => boolean
  clearWishlist: () => void
}

// Helper to load state from localStorage
const loadState = (): string[] => {
  if (typeof window === "undefined") return []
  try {
    const value = localStorage.getItem("wishlist-items")
    return value ? JSON.parse(value) : []
  } catch (error) {
    console.error("Error loading wishlist from localStorage:", error)
    return []
  }
}

// Helper to save state to localStorage
const saveState = (items: string[]) => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem("wishlist-items", JSON.stringify(items))
  } catch (error) {
    console.error("Error saving wishlist to localStorage:", error)
  }
}

export const useWishlist = create<WishlistState>()((set, get) => ({
  items: typeof window !== "undefined" ? loadState() : [],

addItem: (hotelId: string) => {
    const { items } = get()
    if (!items.includes(hotelId)) {
      const newItems = [...items, hotelId]
      set({ items: newItems })
      saveState(newItems)
    }
  },

removeItem: (hotelId: string) => {
    const { items } = get()
    const newItems = items.filter((id) => id !== hotelId)
    set({ items: newItems })
    saveState(newItems)
  },

isInWishlist: (hotelId: string) => {
    const { items } = get()
    return items.includes(hotelId)
  },

clearWishlist: () => {
    set({ items: [] })
    saveState([])
  },
}))
[V0_FILE]typescriptreact:file="lib/bookings.ts" isMerged="true"
import { create } from "zustand"

export type Booking = {
  id: string
  userId: string
  hotelId: string
  checkIn: string
  checkOut: string
  guests: number
  rooms: number
  status: "Confirmed" | "Cancelled" | "Completed" | "Pending"
  totalPrice: number
  createdAt: string
}

type BookingsState = {
  bookings: Booking[]
  addBooking: (booking: Omit<Booking, "id" | "createdAt">) => string
  getBookingsByUserId: (userId: string) => Booking[]
  getBookingById: (id: string) => Booking | undefined
  updateBooking: (id: string, data: Partial<Booking>) => boolean
  cancelBooking: (id: string) => boolean
}

// Initial mock data
const initialBookings: Booking[] = [
  {
    id: "BK-482719",
    userId: "1",
    hotelId: "h1",
    checkIn: "2025-04-15",
    checkOut: "2025-04-18",
    guests: 2,
    rooms: 1,
    status: "Confirmed",
    totalPrice: 897,
    createdAt: "2025-03-10T12:00:00Z",
  },
  {
    id: "BK-385621",
    userId: "1",
    hotelId: "h2",
    checkIn: "2025-05-22",
    checkOut: "2025-05-27",
    guests: 4,
    rooms: 2,
    status: "Confirmed",
    totalPrice: 1745,
    createdAt: "2025-03-15T14:30:00Z",
  },
]

// Helper to load state from localStorage
const loadState = (): Booking[] => {
  if (typeof window === "undefined") return initialBookings
  try {
    const value = localStorage.getItem("bookings-data")
    return value ? JSON.parse(value) : initialBookings
  } catch (error) {
    console.error("Error loading bookings from localStorage:", error)
    return initialBookings
  }
}

// Helper to save state to localStorage
const saveState = (bookings: Booking[]) => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem("bookings-data", JSON.stringify(bookings))
  } catch (error) {
    console.error("Error saving bookings to localStorage:", error)
  }
}

export const useBookings = create<BookingsState>()((set, get) => ({
  bookings: typeof window !== "undefined" ? loadState() : initialBookings,

addBooking: (booking) => {
    const id = `BK-${Math.floor(Math.random() * 1000000)}`
    const newBooking = {
      ...booking,
      id,
      createdAt: new Date().toISOString(),
    }
    set((state) => {
      const newBookings = [...state.bookings, newBooking]
      saveState(newBookings)
      return { bookings: newBookings }
    })
    return id
  },

getBookingsByUserId: (userId) => {
    return get().bookings.filter((booking) => booking.userId === userId)
  },

getBookingById: (id) => {
    return get().bookings.find((booking) => booking.id === id)
  },

updateBooking: (id, data) => {
    const booking = get().bookings.find((b) => b.id === id)
    if (!booking) return false

set((state) => {
      const newBookings = state.bookings.map((b) => (b.id === id ? { ...b, ...data } : b))
      saveState(newBookings)
      return { bookings: newBookings }
    })
    return true
  },

cancelBooking: (id) => {
    const booking = get().bookings.find((b) => b.id === id)
    if (!booking) return false

set((state) => {
      const newBookings = state.bookings.map((b) => (b.id === id ? { ...b, status: "Cancelled" } : b))
      saveState(newBookings)
      return { bookings: newBookings }
    })
    return true
  },
}))
[V0_FILE]typescriptreact:file="components/wishlist-button.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Heart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useWishlist } from "@/lib/wishlist"
import { useAuth } from "@/lib/auth"
import { useRouter } from "next/navigation"
import { useToast } from "@/hooks/use-toast"

interface WishlistButtonProps {
  hotelId: string
  variant?: "default" | "outline" | "ghost"
  size?: "default" | "sm" | "lg" | "icon"
  showText?: boolean
  className?: string
}

export default function WishlistButton({
  hotelId,
  variant = "ghost",
  size = "icon",
  showText = false,
  className = "",
}: WishlistButtonProps) {
  const { isAuthenticated } = useAuth()
  const { addItem, removeItem, isInWishlist } = useWishlist()
  const router = useRouter()
  const { toast } = useToast()
  const [isInWishlistState, setIsInWishlistState] = useState(false)

// Initialize state after component mounts to avoid hydration issues
  useEffect(() => {
    setIsInWishlistState(isInWishlist(hotelId))
  }, [hotelId, isInWishlist])

const handleToggleWishlist = () => {
    if (!isAuthenticated) {
      toast({
        title: "Please sign in",
        description: "You need to be signed in to add items to your wishlist",
      })
      router.push(`/login?redirect=/hotels/${hotelId}`)
      return
    }

if (isInWishlistState) {
      removeItem(hotelId)
      setIsInWishlistState(false)
      toast({
        title: "Removed from wishlist",
        description: "The hotel has been removed from your wishlist",
      })
    } else {
      addItem(hotelId)
      setIsInWishlistState(true)
      toast({
        title: "Added to wishlist",
        description: "The hotel has been added to your wishlist",
      })
    }
  }

return (
    <Button
      variant={variant}
      size={size}
      onClick={handleToggleWishlist}
      className={className}
      aria-label={isInWishlistState ? "Remove from wishlist" : "Add to wishlist"}
    >
      <Heart className={`h-5 w-5 ${isInWishlistState ? "fill-red-500 text-red-500" : ""}`} />
      {showText && <span className="ml-2">{isInWishlistState ? "Saved" : "Save"}</span>}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/wishlist/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { Star, MapPin, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"
import { hotels } from "@/lib/data"
import { useAuth } from "@/lib/auth"
import { useWishlist } from "@/lib/wishlist"

export default function WishlistPage() {
  const { isAuthenticated } = useAuth()
  const { items: wishlistIds, removeItem } = useWishlist()
  const { toast } = useToast()
  const [wishlistItems, setWishlistItems] = useState<typeof hotels>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (isAuthenticated) {
      // Get hotel details for each hotel in the wishlist
      const wishlistHotels = hotels.filter((hotel) => wishlistIds.includes(hotel.id))
      setWishlistItems(wishlistHotels)
    }
    setIsLoading(false)
  }, [isAuthenticated, wishlistIds])

const removeFromWishlist = (hotelId: string) => {
    removeItem(hotelId)
    setWishlistItems((prev) => prev.filter((hotel) => hotel.id !== hotelId))

toast({
      title: "Removed from wishlist",
      description: "The hotel has been removed from your wishlist.",
    })
  }

if (!isAuthenticated) {
    return (
      <div className="container py-12">
        <div className="rounded-lg border p-8 text-center">
          <h2 className="mb-2 text-xl font-semibold">Please sign in</h2>
          <p className="mb-6 text-muted-foreground">You need to be signed in to view your wishlist.</p>
          <Button asChild>
            <Link href="/login?redirect=/wishlist">Sign In</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container py-8">
      <h1 className="mb-6 text-3xl font-bold">My Wishlist</h1>

{isLoading ? (
        <div className="flex justify-center py-12">
          <p>Loading your wishlist...</p>
        </div>
      ) : wishlistItems.length > 0 ? (
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {wishlistItems.map((hotel) => (
            <Card key={hotel.id} className="overflow-hidden">
              <div className="relative h-48 w-full">
                <Image src={hotel.image || "/placeholder.svg"} alt={hotel.name} fill className="object-cover" />
              </div>
              <CardContent className="p-4">
                <div className="mb-2 flex items-center justify-between">
                  <h3 className="font-semibold">{hotel.name}</h3>
                  <div className="flex items-center">
                    {Array(5)
                      .fill(0)
                      .map((_, i) => (
                        <Star
                          key={i}
                          className={`h-4 w-4 ${
                            i < hotel.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                          }`}
                        />
                      ))}
                  </div>
                </div>
                <div className="mb-2 flex items-center text-sm text-muted-foreground">
                  <MapPin className="mr-1 h-4 w-4" />
                  {hotel.location}
                </div>
                <p className="mb-4 text-sm line-clamp-2">{hotel.description}</p>
                <div className="flex items-center justify-between">
                  <span className="font-medium text-primary">${hotel.price}/night</span>
                  <div className="flex gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => removeFromWishlist(hotel.id)}
                      aria-label="Remove from wishlist"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                    <Button asChild>
                      <Link href={`/hotels/${hotel.id}`}>View</Link>
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      ) : (
        <div className="rounded-lg border p-8 text-center">
          <h2 className="mb-2 text-xl font-semibold">Your wishlist is empty</h2>
          <p className="mb-6 text-muted-foreground">Browse our hotels and add your favorites to your wishlist.</p>
          <Button asChild>
            <Link href="/hotels">Browse Hotels</Link>
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile-picture-upload.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Camera, Upload, X } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/lib/auth"

interface ProfilePictureUploadProps {
  currentAvatar?: string
  size?: "sm" | "md" | "lg"
}

export default function ProfilePictureUpload({ currentAvatar, size = "md" }: ProfilePictureUploadProps) {
  const { updateUser } = useAuth()
  const { toast } = useToast()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
  const [isUploading, setIsUploading] = useState(false)

// Determine dimensions based on size prop
  const dimensions = {
    sm: { width: 80, height: 80 },
    md: { width: 120, height: 120 },
    lg: { width: 160, height: 160 },
  }[size]

// Initialize with current avatar
  useEffect(() => {
    if (currentAvatar) {
      setPreviewUrl(null)
    }
  }, [currentAvatar])

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

// Check file type
    if (!file.type.startsWith("image/")) {
      toast({
        title: "Invalid file type",
        description: "Please select an image file (JPEG, PNG, etc.)",
        variant: "destructive",
      })
      return
    }

// Check file size (max 5MB)
    if (file.size > 5 * 1024 * 1024) {
      toast({
        title: "File too large",
        description: "Please select an image smaller than 5MB",
        variant: "destructive",
      })
      return
    }

// Create a preview URL
    const url = URL.createObjectURL(file)
    setPreviewUrl(url)
  }

const handleUpload = async () => {
    if (!previewUrl) return

setIsUploading(true)

// In a real app, you would upload the file to a server here
    // For this demo, we'll simulate a delay and then update the user's avatar
    await new Promise((resolve) => setTimeout(resolve, 1000))

// Update the user's avatar
    updateUser({ avatar: previewUrl })

toast({
      title: "Profile picture updated",
      description: "Your profile picture has been updated successfully",
    })

setIsUploading(false)
    setPreviewUrl(null)
  }

const handleCancel = () => {
    setPreviewUrl(null)
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

return (
    <div className="flex flex-col items-center">
      <div
        className="relative mb-4 overflow-hidden rounded-full"
        style={{ width: dimensions.width, height: dimensions.height }}
      >
        <Image
          src={previewUrl || currentAvatar || "/placeholder.svg?height=120&width=120"}
          alt="Profile"
          fill
          className="object-cover"
        />
        <button
          type="button"
          onClick={triggerFileInput}
          className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity hover:opacity-100"
          aria-label="Change profile picture"
        >
          <Camera className="h-8 w-8 text-white" />
        </button>
      </div>

{!previewUrl ? (
        <Button type="button" variant="outline" size="sm" onClick={triggerFileInput}>
          <Upload className="mr-2 h-4 w-4" />
          Change Picture
        </Button>
      ) : (
        <div className="flex gap-2">
          <Button type="button" size="sm" onClick={handleUpload} disabled={isUploading}>
            {isUploading ? "Saving..." : "Save"}
          </Button>
          <Button type="button" variant="outline" size="sm" onClick={handleCancel}>
            <X className="mr-2 h-4 w-4" />
            Cancel
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { usePathname, useRouter } from "next/navigation"
import { Menu, User, Search, Heart, LogOut, Settings, UserCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"
import { useAuth } from "@/lib/auth"
import { useToast } from "@/hooks/use-toast"
import SearchDialog from "@/components/search-dialog"

export default function Navbar() {
  const pathname = usePathname()
  const router = useRouter()
  const { toast } = useToast()
  const { user, isAuthenticated, logout } = useAuth()
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isSearchOpen, setIsSearchOpen] = useState(false)

const routes = [
    { href: "/", label: "Home" },
    { href: "/hotels", label: "Hotels" },
    { href: "/deals", label: "Deals" },
    { href: "/about", label: "About" },
    { href: "/contact", label: "Contact" },
  ]

const handleLogout = () => {
    logout()
    toast({
      title: "Logged out",
      description: "You have been successfully logged out.",
    })
    router.push("/")
  }

return (
    <>
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center">
            <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
              <SheetTrigger asChild className="mr-2 block lg:hidden">
                <Button variant="ghost" size="icon" aria-label="Menu">
                  <Menu className="h-5 w-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-[300px] sm:w-[400px]">
                <nav className="flex flex-col gap-4 pt-10">
                  {routes.map((route) => (
                    <Link
                      key={route.href}
                      href={route.href}
                      className={cn(
                        "text-lg font-medium transition-colors hover:text-primary",
                        pathname === route.href ? "text-primary" : "text-muted-foreground",
                      )}
                      onClick={() => setIsMenuOpen(false)}
                    >
                      {route.label}
                    </Link>
                  ))}
                  {!isAuthenticated && (
                    <div className="mt-4 flex flex-col gap-2">
                      <Button asChild>
                        <Link href="/login">Sign In</Link>
                      </Button>
                      <Button variant="outline" asChild>
                        <Link href="/register">Create Account</Link>
                      </Button>
                    </div>
                  )}
                </nav>
              </SheetContent>
            </Sheet>

<Link href="/" className="mr-6 flex items-center space-x-2">
              <span className="text-xl font-bold">StayEase</span>
            </Link>

<nav className="hidden gap-6 lg:flex">
              {routes.map((route) => (
                <Link
                  key={route.href}
                  href={route.href}
                  className={cn(
                    "text-sm font-medium transition-colors hover:text-primary",
                    pathname === route.href ? "text-primary" : "text-muted-foreground",
                  )}
                >
                  {route.label}
                </Link>
              ))}
            </nav>
          </div>

<div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" aria-label="Search" onClick={() => setIsSearchOpen(true)}>
              <Search className="h-5 w-5" />
            </Button>
            <Button variant="ghost" size="icon" aria-label="Wishlist" asChild>
              <Link href="/wishlist">
                <Heart className="h-5 w-5" />
              </Link>
            </Button>

{isAuthenticated ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="relative h-8 w-8 rounded-full">
                    {user?.avatar ? (
                      <Image
                        src={user.avatar || "/placeholder.svg?height=40&width=40"}
                        alt="Profile"
                        className="rounded-full object-cover"
                        width={32}
                        height={32}
                      />
                    ) : (
                      <User className="h-5 w-5" />
                    )}
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <div className="flex items-center justify-start gap-2 p-2">
                    <div className="flex flex-col space-y-1 leading-none">
                      <p className="font-medium">
                        {user?.firstName} {user?.lastName}
                      </p>
                      <p className="w-[200px] truncate text-sm text-muted-foreground">{user?.email}</p>
                    </div>
                  </div>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem asChild>
                    <Link href="/account" className="cursor-pointer">
                      <UserCircle className="mr-2 h-4 w-4" />
                      <span>Account</span>
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/account/bookings" className="cursor-pointer">
                      <UserCircle className="mr-2 h-4 w-4" />
                      <span>My Bookings</span>
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/account/settings" className="cursor-pointer">
                      <Settings className="mr-2 h-4 w-4" />
                      <span>Settings</span>
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={handleLogout} className="cursor-pointer">
                    <LogOut className="mr-2 h-4 w-4" />
                    <span>Log out</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <>
                <Button variant="ghost" size="icon" asChild aria-label="Account">
                  <Link href="/login">
                    <User className="h-5 w-5" />
                  </Link>
                </Button>
                <Button variant="outline" className="hidden lg:inline-flex" asChild>
                  <Link href="/login">Sign In</Link>
                </Button>
              </>
            )}
          </div>
        </div>
      </header>

<SearchDialog open={isSearchOpen} onOpenChange={setIsSearchOpen} />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { createContext, useContext, useEffect, useState } from "react"

type Theme = "dark" | "light" | "system"

type ThemeProviderProps = {
  children: React.ReactNode
  defaultTheme?: Theme
  storageKey?: string
  attribute?: string
  enableSystem?: boolean
  disableTransitionOnChange?: boolean
}

type ThemeProviderState = {
  theme: Theme
  setTheme: (theme: Theme) => void
}

const initialState: ThemeProviderState = {
  theme: "system",
  setTheme: () => null,
}

const ThemeProviderContext = createContext<ThemeProviderState>(initialState)

export function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "ui-theme",
  attribute = "data-theme",
  enableSystem = true,
  disableTransitionOnChange = false,
  ...props
}: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(defaultTheme)
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    const root = window.document.documentElement
    const storedTheme = localStorage.getItem(storageKey) as Theme | null

// Initialize theme from localStorage or default
    const initialTheme = storedTheme || defaultTheme
    setTheme(initialTheme)

// Apply theme attribute
    if (initialTheme === "system" && enableSystem) {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
      root.setAttribute(attribute, systemTheme)
    } else {
      root.setAttribute(attribute, initialTheme)
    }

setMounted(true)
  }, [attribute, defaultTheme, enableSystem, storageKey])

useEffect(() => {
    if (!mounted) return

const root = window.document.documentElement

// Handle transitions
    if (disableTransitionOnChange) {
      root.classList.add("no-transitions")

// Force a reflow
      window.getComputedStyle(root).getPropertyValue("opacity")

// Clean up after transition would have completed
      const cleanup = () => {
        root.classList.remove("no-transitions")
      }

const timeout = setTimeout(cleanup, 0)
      return () => clearTimeout(timeout)
    }
  }, [disableTransitionOnChange, mounted, theme])

useEffect(() => {
    if (!mounted) return

const root = window.document.documentElement

if (theme === "system" && enableSystem) {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
      root.setAttribute(attribute, systemTheme)

// Listen for system theme changes
      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
      const handleChange = () => {
        const newSystemTheme = mediaQuery.matches ? "dark" : "light"
        root.setAttribute(attribute, newSystemTheme)
      }

mediaQuery.addEventListener("change", handleChange)
      return () => mediaQuery.removeEventListener("change", handleChange)
    } else {
      root.setAttribute(attribute, theme)
    }

localStorage.setItem(storageKey, theme)
  }, [attribute, enableSystem, mounted, storageKey, theme])

// Prevent flash of incorrect theme by not rendering until mounted
  if (!mounted) {
    return <>{children}</>
  }

return (
    <ThemeProviderContext.Provider
      value={{
        theme,
        setTheme,
      }}
      {...props}
    >
      {children}
    </ThemeProviderContext.Provider>
  )
}

export const useTheme = () => {
  const context = useContext(ThemeProviderContext)

if (context === undefined) {
    throw new Error("useTheme must be used within a ThemeProvider")
  }

return context
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Toaster } from "@/components/ui/toaster"
import AuthGuard from "@/components/auth-guard"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "StayEase - Find Your Perfect Hotel",
  description: "Book hotels at the best prices with our easy-to-use booking platform.",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <AuthGuard>
            <div className="flex min-h-screen flex-col">
              <Navbar />
              <main className="flex-1">{children}</main>
              <Footer />
            </div>
            <Toaster />
          </AuthGuard>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/booking-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { format, addDays, differenceInDays } from "date-fns"
import { CalendarIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { cn } from "@/lib/utils"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/lib/auth"
import { useBookings } from "@/lib/bookings"
import PaymentForm from "@/components/payment-form"

export default function BookingForm({
  hotelId,
  price,
}: {
  hotelId: string
  price: number
}) {
  const router = useRouter()
  const { toast } = useToast()
  const { user, isAuthenticated } = useAuth()
  const { addBooking } = useBookings()
  const today = new Date()
  const tomorrow = addDays(today, 1)

const [checkIn, setCheckIn] = useState<Date>(today)
  const [checkOut, setCheckOut] = useState<Date>(tomorrow)
  const [guests, setGuests] = useState("2")
  const [rooms, setRooms] = useState("1")
  const [showPayment, setShowPayment] = useState(false)

const nights = checkIn && checkOut ? differenceInDays(checkOut, checkIn) : 0
  const totalPrice = nights * price * Number.parseInt(rooms)
  const tax = totalPrice * 0.12
  const grandTotal = totalPrice + tax

const handleContinue = (e: React.FormEvent) => {
    e.preventDefault()

if (!isAuthenticated) {
      toast({
        title: "Please sign in",
        description: "You need to be signed in to complete your booking.",
      })
      router.push(`/login?redirect=/hotels/${hotelId}`)
      return
    }

setShowPayment(true)
  }

const handleCompleteBooking = () => {
    if (!user) return

// Create a new booking
    const bookingId = addBooking({
      userId: user.id,
      hotelId: hotelId,
      checkIn: format(checkIn, "yyyy-MM-dd"),
      checkOut: format(checkOut, "yyyy-MM-dd"),
      guests: Number.parseInt(guests),
      rooms: Number.parseInt(rooms),
      status: "Confirmed",
      totalPrice: grandTotal,
    })

toast({
      title: "Booking confirmed!",
      description: `Your booking (ID: ${bookingId}) has been confirmed.`,
    })

router.push("/booking-confirmation")
  }

if (showPayment) {
    return (
      <PaymentForm
        totalAmount={grandTotal}
        hotelId={hotelId}
        checkIn={checkIn}
        checkOut={checkOut}
        guests={Number.parseInt(guests)}
        rooms={Number.parseInt(rooms)}
        onCompleteBooking={handleCompleteBooking}
      />
    )
  }

return (
    <form onSubmit={handleContinue} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="check-in">Check-in</Label>
        <Popover>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              className={cn("w-full justify-start text-left font-normal", !checkIn && "text-muted-foreground")}
            >
              <CalendarIcon className="mr-2 h-4 w-4" />
              {checkIn ? format(checkIn, "PPP") : "Select date"}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0">
            <Calendar
              mode="single"
              selected={checkIn}
              onSelect={(date) => {
                setCheckIn(date || today)
                if (date && checkOut && date >= checkOut) {
                  setCheckOut(addDays(date, 1))
                }
              }}
              disabled={(date) => date < today}
              initialFocus
            />
          </PopoverContent>
        </Popover>
      </div>

<div className="space-y-2">
        <Label htmlFor="check-out">Check-out</Label>
        <Popover>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              className={cn("w-full justify-start text-left font-normal", !checkOut && "text-muted-foreground")}
            >
              <CalendarIcon className="mr-2 h-4 w-4" />
              {checkOut ? format(checkOut, "PPP") : "Select date"}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0">
            <Calendar
              mode="single"
              selected={checkOut}
              onSelect={(date) => setCheckOut(date || tomorrow)}
              disabled={(date) => date <= checkIn || date <= today}
              initialFocus
            />
          </PopoverContent>
        </Popover>
      </div>

<div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="guests">Guests</Label>
          <Select value={guests} onValueChange={setGuests}>
            <SelectTrigger id="guests">
              <SelectValue placeholder="Select" />
            </SelectTrigger>
            <SelectContent>
              {[1, 2, 3, 4, 5, 6].map((num) => (
                <SelectItem key={num} value={num.toString()}>
                  {num} {num === 1 ? "guest" : "guests"}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <Label htmlFor="rooms">Rooms</Label>
          <Select value={rooms} onValueChange={setRooms}>
            <SelectTrigger id="rooms">
              <SelectValue placeholder="Select" />
            </SelectTrigger>
            <SelectContent>
              {[1, 2, 3, 4].map((num) => (
                <SelectItem key={num} value={num.toString()}>
                  {num} {num === 1 ? "room" : "rooms"}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="space-y-4 rounded-md bg-muted/50 p-4">
        <div className="flex justify-between text-sm">
          <span>
            ${price} x {nights} {nights === 1 ? "night" : "nights"} x {rooms} {rooms === "1" ? "room" : "rooms"}
          </span>
          <span>${totalPrice}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span>Taxes (12%)</span>
          <span>${tax.toFixed(2)}</span>
        </div>
        <div className="flex justify-between font-medium">
          <span>Total</span>
          <span>${grandTotal.toFixed(2)}</span>
        </div>
      </div>

<Button type="submit" className="w-full">
        Continue to Payment
      </Button>

<p className="text-center text-xs text-muted-foreground">
        You won't be charged yet unless you select immediate payment.
      </p>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/payment-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/hooks/use-toast"
import { CreditCard, Loader2 } from "lucide-react"

interface PaymentFormProps {
  totalAmount: number
  hotelId: string
  checkIn: Date
  checkOut: Date
  guests: number
  rooms: number
  onCompleteBooking: () => void
}

export default function PaymentForm({
  totalAmount,
  hotelId,
  checkIn,
  checkOut,
  guests,
  rooms,
  onCompleteBooking,
}: PaymentFormProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [paymentMethod, setPaymentMethod] = useState("card")
  const [isProcessing, setIsProcessing] = useState(false)
  const [saveCard, setSaveCard] = useState(false)

const [cardDetails, setCardDetails] = useState({
    cardNumber: "",
    cardHolder: "",
    expiryDate: "",
    cvv: "",
  })

const handleCardChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setCardDetails((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsProcessing(true)

// Simulate payment processing
    await new Promise((resolve) => setTimeout(resolve, 2000))

// Call the onCompleteBooking callback to create the booking
    onCompleteBooking()

// Simulate successful payment
    toast({
      title: "Payment successful",
      description: "Your booking has been confirmed.",
    })

// Redirect to confirmation page
    router.push("/booking-confirmation")
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <h3 className="mb-4 text-lg font-semibold">Payment Method</h3>
        <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod}>
          <div className="flex items-center space-x-2 rounded-lg border p-4">
            <RadioGroupItem value="card" id="card" />
            <Label htmlFor="card" className="flex items-center gap-2">
              <CreditCard className="h-5 w-5" />
              Credit or Debit Card
            </Label>
          </div>
          <div className="flex items-center space-x-2 rounded-lg border p-4">
            <RadioGroupItem value="payAtHotel" id="payAtHotel" />
            <Label htmlFor="payAtHotel">Pay at Hotel</Label>
          </div>
        </RadioGroup>
      </div>

{paymentMethod === "card" && (
        <div className="space-y-4 rounded-lg border p-4">
          <div className="space-y-2">
            <Label htmlFor="cardNumber">Card Number</Label>
            <Input
              id="cardNumber"
              name="cardNumber"
              placeholder="1234 5678 9012 3456"
              value={cardDetails.cardNumber}
              onChange={handleCardChange}
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="cardHolder">Cardholder Name</Label>
            <Input
              id="cardHolder"
              name="cardHolder"
              placeholder="John Doe"
              value={cardDetails.cardHolder}
              onChange={handleCardChange}
              required
            />
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="expiryDate">Expiry Date</Label>
              <Input
                id="expiryDate"
                name="expiryDate"
                placeholder="MM/YY"
                value={cardDetails.expiryDate}
                onChange={handleCardChange}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="cvv">CVV</Label>
              <Input
                id="cvv"
                name="cvv"
                placeholder="123"
                value={cardDetails.cvv}
                onChange={handleCardChange}
                required
              />
            </div>
          </div>

<div className="flex items-center space-x-2">
            <Checkbox id="saveCard" checked={saveCard} onCheckedChange={(checked) => setSaveCard(!!checked)} />
            <Label htmlFor="saveCard" className="text-sm">
              Save this card for future bookings
            </Label>
          </div>
        </div>
      )}

<div className="rounded-lg border p-4">
        <h3 className="mb-2 font-semibold">Booking Summary</h3>
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Total Amount</span>
            <span className="font-medium">${totalAmount.toFixed(2)}</span>
          </div>
          {paymentMethod === "card" ? (
            <div className="text-sm text-muted-foreground">Your card will be charged immediately.</div>
          ) : (
            <div className="text-sm text-muted-foreground">
              No payment required now. Pay directly at the hotel during your stay.
            </div>
          )}
        </div>
      </div>

<Button type="submit" className="w-full" disabled={isProcessing}>
        {isProcessing ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Processing...
          </>
        ) : (
          `${paymentMethod === "card" ? "Pay" : "Reserve"} ${totalAmount.toFixed(2)}`
        )}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="lib/data.ts" isQuickEdit="true" isMerged="true"
export const hotels = [
  {
    id: "h1",
    name: "Grand Plaza Hotel",
    location: "New York City, NY",
    description: "Luxury hotel in the heart of Manhattan with stunning views of Central Park.",
    price: 299,
    rating: 5,
    reviews: 487,
    capacity: 4,
    discount: 10,
    image: "/placeholder.svg?height=300&width=500&text=Grand+Plaza+Hotel",
  },
  {
    id: "h2",
    name: "Oceanview Resort",
    location: "Miami Beach, FL",
    description: "Beachfront resort with private access to Miami's famous white sand beaches.",
    price: 349,
    rating: 4,
    reviews: 312,
    capacity: 6,
    discount: 0,
    image: "/placeholder.svg?height=300&width=500&text=Oceanview+Resort",
  },
  {
    id: "h3",
    name: "Mountain Lodge",
    location: "Aspen, CO",
    description: "Cozy mountain retreat perfect for ski vacations and outdoor adventures.",
    price: 279,
    rating: 5,
    reviews: 215,
    capacity: 4,
    discount: 15,
    image: "/placeholder.svg?height=300&width=500&text=Mountain+Lodge",
  },
  {
    id: "h4",
    name: "Urban Boutique Hotel",
    location: "San Francisco, CA",
    description: "Stylish boutique hotel located in the vibrant downtown district.",
    price: 249,
    rating: 4,
    reviews: 178,
    capacity: 2,
    discount: 0,
    image: "/placeholder.svg?height=300&width=500&text=Urban+Boutique+Hotel",
  },
  {
    id: "h5",
    name: "Desert Oasis Resort",
    location: "Scottsdale, AZ",
    description: "Luxurious desert retreat with world-class spa and golf facilities.",
    price: 329,
    rating: 5,
    reviews: 256,
    capacity: 4,
    discount: 0,
    image: "/placeholder.svg?height=300&width=500&text=Desert+Oasis+Resort",
  },
  {
    id: "h6",
    name: "Harborview Inn",
    location: "Seattle, WA",
    description: "Charming waterfront hotel with stunning views of Puget Sound.",
    price: 229,
    rating: 4,
    reviews: 203,
    capacity: 3,
    discount: 5,
    image: "/placeholder.svg?height=300&width=500&text=Harborview+Inn",
  },
  {
    id: "h7",
    name: "Historic Downtown Hotel",
    location: "Charleston, SC",
    description: "Elegant hotel in a restored historic building in Charleston's charming downtown.",
    price: 259,
    rating: 5,
    reviews: 189,
    capacity: 2,
    discount: 0,
    image: "/placeholder.svg?height=300&width=500&text=Historic+Downtown+Hotel",
  },
  {
    id: "h8",
    name: "Lakeside Resort & Spa",
    location: "Lake Tahoe, CA",
    description: "Peaceful lakeside retreat with private beach and luxury spa services.",
    price: 389,
    rating: 5,
    reviews: 301,
    capacity: 6,
    discount: 0,
    image: "/placeholder.svg?height=300&width=500&text=Lakeside+Resort",
  },
  {
    id: "h9",
    name: "City Lights Hotel",
    location: "Chicago, IL",
    description: "Modern hotel in downtown Chicago with panoramic views of the skyline.",
    price: 239,
    rating: 4,
    reviews: 224,
    capacity: 3,
    discount: 8,
    image: "/placeholder.svg?height=300&width=500&text=City+Lights+Hotel",
  },
  {
    id: "h10",
    name: "French Quarter Inn",
    location: "New Orleans, LA",
    description: "Charming boutique hotel in the heart of the historic French Quarter.",
    price: 219,
    rating: 4,
    reviews: 167,
    capacity: 2,
    discount: 0,
    image: "/placeholder.svg?height=300&width=500&text=French+Quarter+Inn",
  },
  {
    id: "h11",
    name: "Pacific View Resort",
    location: "San Diego, CA",
    description: "Beachfront resort with stunning Pacific Ocean views and water activities.",
    price: 309,
    rating: 5,
    reviews: 278,
    capacity: 4,
    discount: 12,
    image: "/placeholder.svg?height=300&width=500&text=Pacific+View+Resort",
  },
  {
    id: "h12",
    name: "Downtown Loft Hotel",
    location: "Austin, TX",
    description: "Modern loft-style hotel in the heart of Austin's vibrant music scene.",
    price: 199,
    rating: 4,
    reviews: 145,
    capacity: 2,
    discount: 0,
    image: "/placeholder.svg?height=300&width=500&text=Downtown+Loft+Hotel",
  },
]

// New data structure for hotel images
export type HotelImage = {
  id: string
  hotelId: string
  url: string
  alt: string
  isPrimary: boolean
  category?: "room" | "bathroom" | "exterior" | "view" | "amenity" | "restaurant" | "other"
}

// Create a collection of hotel images with proper organization
export const hotelImages: HotelImage[] = [
  // Grand Plaza Hotel (h1) images
  {
    id: "img-h1-1",
    hotelId: "h1",
    url: "/placeholder.svg?height=300&width=500&text=Grand+Plaza+Hotel",
    alt: "Grand Plaza Hotel exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h1-2",
    hotelId: "h1",
    url: "/placeholder.svg?height=300&width=500&text=Grand+Plaza+Room",
    alt: "Grand Plaza Hotel deluxe room",
    isPrimary: false,
    category: "room",
  },
  {
    id: "img-h1-3",
    hotelId: "h1",
    url: "/placeholder.svg?height=300&width=500&text=Grand+Plaza+Bathroom",
    alt: "Grand Plaza Hotel bathroom",
    isPrimary: false,
    category: "bathroom",
  },
  {
    id: "img-h1-4",
    hotelId: "h1",
    url: "/placeholder.svg?height=300&width=500&text=Grand+Plaza+View",
    alt: "View from Grand Plaza Hotel",
    isPrimary: false,
    category: "view",
  },
  {
    id: "img-h1-5",
    hotelId: "h1",
    url: "/placeholder.svg?height=300&width=500&text=Grand+Plaza+Restaurant",
    alt: "Grand Plaza Hotel restaurant",
    isPrimary: false,
    category: "restaurant",
  },

// Oceanview Resort (h2) images
  {
    id: "img-h2-1",
    hotelId: "h2",
    url: "/placeholder.svg?height=300&width=500&text=Oceanview+Resort",
    alt: "Oceanview Resort exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h2-2",
    hotelId: "h2",
    url: "/placeholder.svg?height=300&width=500&text=Oceanview+Room",
    alt: "Oceanview Resort suite",
    isPrimary: false,
    category: "room",
  },
  {
    id: "img-h2-3",
    hotelId: "h2",
    url: "/placeholder.svg?height=300&width=500&text=Oceanview+Bathroom",
    alt: "Oceanview Resort bathroom",
    isPrimary: false,
    category: "bathroom",
  },
  {
    id: "img-h2-4",
    hotelId: "h2",
    url: "/placeholder.svg?height=300&width=500&text=Oceanview+Beach",
    alt: "Beach at Oceanview Resort",
    isPrimary: false,
    category: "view",
  },
  {
    id: "img-h2-5",
    hotelId: "h2",
    url: "/placeholder.svg?height=300&width=500&text=Oceanview+Pool",
    alt: "Oceanview Resort pool",
    isPrimary: false,
    category: "amenity",
  },

// Mountain Lodge (h3) images
  {
    id: "img-h3-1",
    hotelId: "h3",
    url: "/placeholder.svg?height=300&width=500&text=Mountain+Lodge",
    alt: "Mountain Lodge exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h3-2",
    hotelId: "h3",
    url: "/placeholder.svg?height=300&width=500&text=Mountain+Lodge+Room",
    alt: "Mountain Lodge cabin room",
    isPrimary: false,
    category: "room",
  },
  {
    id: "img-h3-3",
    hotelId: "h3",
    url: "/placeholder.svg?height=300&width=500&text=Mountain+Lodge+Bathroom",
    alt: "Mountain Lodge bathroom",
    isPrimary: false,
    category: "bathroom",
  },
  {
    id: "img-h3-4",
    hotelId: "h3",
    url: "/placeholder.svg?height=300&width=500&text=Mountain+View",
    alt: "Mountain view from Lodge",
    isPrimary: false,
    category: "view",
  },
  {
    id: "img-h3-5",
    hotelId: "h3",
    url: "/placeholder.svg?height=300&width=500&text=Mountain+Lodge+Fireplace",
    alt: "Mountain Lodge fireplace lounge",
    isPrimary: false,
    category: "amenity",
  },

// Urban Boutique Hotel (h4) images
  {
    id: "img-h4-1",
    hotelId: "h4",
    url: "/placeholder.svg?height=300&width=500&text=Urban+Boutique+Hotel",
    alt: "Urban Boutique Hotel exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h4-2",
    hotelId: "h4",
    url: "/placeholder.svg?height=300&width=500&text=Urban+Boutique+Room",
    alt: "Urban Boutique Hotel room",
    isPrimary: false,
    category: "room",
  },
  {
    id: "img-h4-3",
    hotelId: "h4",
    url: "/placeholder.svg?height=300&width=500&text=Urban+Boutique+Bathroom",
    alt: "Urban Boutique Hotel bathroom",
    isPrimary: false,
    category: "bathroom",
  },
  {
    id: "img-h4-4",
    hotelId: "h4",
    url: "/placeholder.svg?height=300&width=500&text=Urban+Boutique+Lounge",
    alt: "Urban Boutique Hotel lounge",
    isPrimary: false,
    category: "amenity",
  },

// Desert Oasis Resort (h5) images
  {
    id: "img-h5-1",
    hotelId: "h5",
    url: "/placeholder.svg?height=300&width=500&text=Desert+Oasis+Resort",
    alt: "Desert Oasis Resort exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h5-2",
    hotelId: "h5",
    url: "/placeholder.svg?height=300&width=500&text=Desert+Oasis+Room",
    alt: "Desert Oasis Resort room",
    isPrimary: false,
    category: "room",
  },
  {
    id: "img-h5-3",
    hotelId: "h5",
    url: "/placeholder.svg?height=300&width=500&text=Desert+Oasis+Bathroom",
    alt: "Desert Oasis Resort bathroom",
    isPrimary: false,
    category: "bathroom",
  },
  {
    id: "img-h5-4",
    hotelId: "h5",
    url: "/placeholder.svg?height=300&width=500&text=Desert+Oasis+Pool",
    alt: "Desert Oasis Resort pool",
    isPrimary: false,
    category: "amenity",
  },
  {
    id: "img-h5-5",
    hotelId: "h5",
    url: "/placeholder.svg?height=300&width=500&text=Desert+Oasis+Spa",
    alt: "Desert Oasis Resort spa",
    isPrimary: false,
    category: "amenity",
  },

// Add at least primary images for the remaining hotels
  {
    id: "img-h6-1",
    hotelId: "h6",
    url: "/placeholder.svg?height=300&width=500&text=Harborview+Inn",
    alt: "Harborview Inn exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h7-1",
    hotelId: "h7",
    url: "/placeholder.svg?height=300&width=500&text=Historic+Downtown+Hotel",
    alt: "Historic Downtown Hotel exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h8-1",
    hotelId: "h8",
    url: "/placeholder.svg?height=300&width=500&text=Lakeside+Resort",
    alt: "Lakeside Resort exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h9-1",
    hotelId: "h9",
    url: "/placeholder.svg?height=300&width=500&text=City+Lights+Hotel",
    alt: "City Lights Hotel exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h10-1",
    hotelId: "h10",
    url: "/placeholder.svg?height=300&width=500&text=French+Quarter+Inn",
    alt: "French Quarter Inn exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h11-1",
    hotelId: "h11",
    url: "/placeholder.svg?height=300&width=500&text=Pacific+View+Resort",
    alt: "Pacific View Resort exterior",
    isPrimary: true,
    category: "exterior",
  },
  {
    id: "img-h12-1",
    hotelId: "h12",
    url: "/placeholder.svg?height=300&width=500&text=Downtown+Loft+Hotel",
    alt: "Downtown Loft Hotel exterior",
    isPrimary: true,
    category: "exterior",
  },
]

// Helper function to get all images for a specific hotel
export function getHotelImages(hotelId: string): HotelImage[] {
  return hotelImages.filter((image) => image.hotelId === hotelId)
}

// Helper function to get the primary image for a hotel
export function getHotelPrimaryImage(hotelId: string): HotelImage | undefined {
  return hotelImages.find((image) => image.hotelId === hotelId && image.isPrimary)
}

// Helper function to get images by category
export function getHotelImagesByCategory(hotelId: string, category: HotelImage["category"]): HotelImage[] {
  return hotelImages.filter((image) => image.hotelId === hotelId && image.category === category)
}
[V0_FILE]typescriptreact:file="components/featured-hotels.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { hotels, getHotelPrimaryImage } from "@/lib/data"
import WishlistButton from "@/components/wishlist-button"

export default function FeaturedHotels() {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)

return (
    <section className="py-16 bg-gray-50">
      <div className="container">
        <h2 className="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">Featured Hotels</h2>
        <p className="mb-8 text-muted-foreground">Discover our handpicked selection of the finest accommodations</p>

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {hotels.slice(0, 8).map((hotel, index) => {
            // Get the primary image for this hotel
            const primaryImage = getHotelPrimaryImage(hotel.id)
            const imageUrl = primaryImage?.url || hotel.image

return (
              <Card
                key={hotel.id}
                className="overflow-hidden transition-all duration-300 hover:shadow-lg"
                onMouseEnter={() => setHoveredIndex(index)}
                onMouseLeave={() => setHoveredIndex(null)}
              >
                <div className="relative h-48 w-full overflow-hidden">
                  <Image
                    src={imageUrl || "/placeholder.svg"}
                    alt={primaryImage?.alt || hotel.name}
                    fill
                    className={`object-cover transition-transform duration-500 ${
                      hoveredIndex === index ? "scale-110" : "scale-100"
                    }`}
                  />
                  <div className="absolute right-2 top-2">
                    <WishlistButton hotelId={hotel.id} />
                  </div>
                </div>
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      {Array(5)
                        .fill(0)
                        .map((_, i) => (
                          <Star
                            key={i}
                            className={`h-4 w-4 ${
                              i < hotel.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                            }`}
                          />
                        ))}
                      <span className="ml-2 text-sm text-muted-foreground">({hotel.reviews})</span>
                    </div>
                    <span className="font-medium text-primary">${hotel.price}/night</span>
                  </div>
                  <h3 className="mt-2 font-semibold">{hotel.name}</h3>
                  <p className="text-sm text-muted-foreground">{hotel.location}</p>
                </CardContent>
                <CardFooter className="p-4 pt-0">
                  <Button asChild className="w-full">
                    <Link href={`/hotels/${hotel.id}`}>View Details</Link>
                  </Button>
                </CardFooter>
              </Card>
            )
          })}
        </div>

<div className="mt-10 text-center">
          <Button variant="outline" size="lg" asChild>
            <Link href="/hotels">View All Hotels</Link>
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="lib/image-utils.ts" isMerged="true"
// Create a utility file for image-related functions
import { hotelImages, type HotelImage } from "@/lib/data"

// Function to get a random subset of images for a hotel
export function getRandomHotelImages(hotelId: string, count = 4): HotelImage[] {
  const images = hotelImages.filter((image) => image.hotelId === hotelId)

// If we don't have enough images, return all available ones
  if (images.length <= count) return images

// Ensure the primary image is always included
  const primaryImage = images.find((img) => img.isPrimary)
  const otherImages = images.filter((img) => !img.isPrimary)

// Shuffle the other images
  const shuffled = [...otherImages].sort(() => 0.5 - Math.random())

// Take the required number of images, ensuring primary is first
  const result = primaryImage ? [primaryImage] : []
  return [...result, ...shuffled.slice(0, count - result.length)]
}

// Function to group hotel images by category
export function groupHotelImagesByCategory(hotelId: string): Record<string, HotelImage[]> {
  const images = hotelImages.filter((image) => image.hotelId === hotelId)

return images.reduce(
    (acc, image) => {
      const category = image.category || "other"
      if (!acc[category]) {
        acc[category] = []
      }
      acc[category].push(image)
      return acc
    },
    {} as Record<string, HotelImage[]>,
  )
}

// Function to get image URL by hotel ID and image ID
export function getHotelImageById(hotelId: string, imageId: string): HotelImage | undefined {
  return hotelImages.find((image) => image.hotelId === hotelId && image.id === imageId)
}
[V0_FILE]typescriptreact:file="app/hotels/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { notFound } from "next/navigation"
import { Calendar, MapPin, Star, Users, Wifi, Utensils, Car, Tv } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import BookingForm from "@/components/booking-form"
import { hotels, getHotelImages } from "@/lib/data"
import WishlistButton from "@/components/wishlist-button"

export default function HotelDetailPage({ params }: { params: { id: string } }) {
  const hotelId = params.id

const hotel = hotels.find((h) => h.id === hotelId)

if (!hotel) {
    notFound()
  }

// Get all images for this hotel using our new helper function
  const hotelImages = getHotelImages(hotelId)

// Set the first image as the default current image
  const [currentImage, setCurrentImage] = useState(hotelImages[0]?.url || hotel.image)

return (
    <div className="container py-8">
      <div className="mb-6 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
        <div>
          <h1 className="text-3xl font-bold">{hotel.name}</h1>
          <div className="mt-2 flex items-center gap-2">
            <div className="flex">
              {Array(5)
                .fill(0)
                .map((_, i) => (
                  <Star
                    key={i}
                    className={`h-4 w-4 ${i < hotel.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`}
                  />
                ))}
            </div>
            <span className="text-sm text-muted-foreground">({hotel.reviews} reviews)</span>
            <div className="flex items-center text-sm text-muted-foreground">
              <MapPin className="mr-1 h-4 w-4" />
              {hotel.location}
            </div>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <WishlistButton hotelId={hotel.id} showText={true} variant="outline" size="default" />
          <div className="text-2xl font-bold text-primary">
            ${hotel.price}
            <span className="text-sm font-normal text-muted-foreground">/night</span>
          </div>
        </div>
      </div>

<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
        <div className="relative col-span-2 h-80 overflow-hidden rounded-lg md:h-[400px] lg:col-span-3">
          <Image src={currentImage || "/placeholder.svg"} alt={hotel.name} fill className="object-cover" priority />
          {hotel.discount > 0 && <Badge className="absolute left-4 top-4 bg-red-500">{hotel.discount}% OFF</Badge>}
        </div>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-1">
          {hotelImages.slice(0, 4).map((image, i) => (
            <div
              key={image.id}
              className={`relative h-40 overflow-hidden rounded-lg cursor-pointer transition-all duration-200 ${currentImage === image.url ? "ring-2 ring-primary" : "hover:opacity-80"}`}
              onClick={() => setCurrentImage(image.url)}
            >
              <Image src={image.url || "/placeholder.svg"} alt={image.alt} fill className="object-cover" />
            </div>
          ))}
        </div>
      </div>

<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <div className="lg:col-span-2">
          <Tabs defaultValue="overview" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="amenities">Amenities</TabsTrigger>
              <TabsTrigger value="reviews">Reviews</TabsTrigger>
            </TabsList>
            <TabsContent value="overview" className="space-y-4 pt-4">
              <div>
                <h3 className="text-xl font-semibold">About this hotel</h3>
                <p className="mt-2 text-muted-foreground">{hotel.description}</p>
                <p className="mt-4 text-muted-foreground">
                  Located in the heart of {hotel.location}, this {hotel.rating}-star hotel offers luxurious
                  accommodations with modern amenities. Perfect for both business and leisure travelers, the hotel
                  features spacious rooms, an on-site restaurant, and is conveniently located near major attractions and
                  transportation hubs.
                </p>
              </div>

<div>
                <h3 className="text-xl font-semibold">Hotel highlights</h3>
                <div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
                  {[
                    { icon: <Wifi className="mr-2 h-4 w-4" />, text: "Free WiFi" },
                    { icon: <Utensils className="mr-2 h-4 w-4" />, text: "Restaurant" },
                    { icon: <Car className="mr-2 h-4 w-4" />, text: "Free parking" },
                    { icon: <Tv className="mr-2 h-4 w-4" />, text: "Flat-screen TV" },
                    { icon: <Users className="mr-2 h-4 w-4" />, text: `Sleeps ${hotel.capacity}` },
                    { icon: <Calendar className="mr-2 h-4 w-4" />, text: "Free cancellation" },
                  ].map((item, i) => (
                    <div key={i} className="flex items-center text-sm">
                      {item.icon}
                      {item.text}
                    </div>
                  ))}
                </div>
              </div>
            </TabsContent>

<TabsContent value="amenities" className="space-y-4 pt-4">
              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
                <div>
                  <h4 className="font-medium">Room features</h4>
                  <ul className="mt-2 space-y-2 text-sm text-muted-foreground">
                    <li>Air conditioning</li>
                    <li>Minibar</li>
                    <li>Coffee/tea maker</li>
                    <li>Blackout curtains</li>
                    <li>Safe</li>
                  </ul>
                </div>

<div>
                  <h4 className="font-medium">Bathroom</h4>
                  <ul className="mt-2 space-y-2 text-sm text-muted-foreground">
                    <li>Private bathroom</li>
                    <li>Shower</li>
                    <li>Free toiletries</li>
                    <li>Hair dryer</li>
                    <li>Bathrobes</li>
                  </ul>
                </div>

<div>
                  <h4 className="font-medium">Hotel services</h4>
                  <ul className="mt-2 space-y-2 text-sm text-muted-foreground">
                    <li>24-hour front desk</li>
                    <li>Room service</li>
                    <li>Concierge</li>
                    <li>Laundry service</li>
                    <li>Luggage storage</li>
                  </ul>
                </div>
              </div>
            </TabsContent>

<TabsContent value="reviews" className="space-y-4 pt-4">
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center">
                    <div className="mr-2 text-2xl font-bold">{hotel.rating}.0</div>
                    <div className="flex">
                      {Array(5)
                        .fill(0)
                        .map((_, i) => (
                          <Star
                            key={i}
                            className={`h-5 w-5 ${
                              i < hotel.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                            }`}
                          />
                        ))}
                    </div>
                  </div>
                  <p className="text-sm text-muted-foreground">Based on {hotel.reviews} reviews</p>
                </div>
                <Button>Write a review</Button>
              </div>

<div className="space-y-4">
                {[
                  {
                    name: "Michael T.",
                    date: "2 weeks ago",
                    rating: 5,
                    comment:
                      "Excellent location and service. The staff was very friendly and helpful. The room was clean and comfortable.",
                  },
                  {
                    name: "Sarah L.",
                    date: "1 month ago",
                    rating: 4,
                    comment:
                      "Great hotel with comfortable beds and good amenities. The breakfast was delicious. Only downside was the noise from the street.",
                  },
                  {
                    name: "David R.",
                    date: "2 months ago",
                    rating: 5,
                    comment:
                      "Perfect stay! The room was spacious and clean. The location is convenient for sightseeing. Would definitely stay here again.",
                  },
                ].map((review, i) => (
                  <div key={i} className="border-b pb-4">
                    <div className="flex items-center justify-between">
                      <div className="font-medium">{review.name}</div>
                      <div className="text-sm text-muted-foreground">{review.date}</div>
                    </div>
                    <div className="my-1 flex">
                      {Array(5)
                        .fill(0)
                        .map((_, i) => (
                          <Star
                            key={i}
                            className={`h-4 w-4 ${
                              i < review.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                            }`}
                          />
                        ))}
                    </div>
                    <p className="text-sm text-muted-foreground">{review.comment}</p>
                  </div>
                ))}
              </div>
            </TabsContent>
          </Tabs>
        </div>

<div>
          <div className="rounded-lg border p-4 shadow-sm">
            <h3 className="mb-4 text-lg font-semibold">Book your stay</h3>
            <BookingForm hotelId={hotel.id} price={hotel.price} />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hotels/page.tsx" isMerged="true"
import { HotelFilters } from "@/components/hotel-filters"
import { HotelList } from "@/components/hotel-list"

export default function HotelsPage({
  searchParams,
}: {
  searchParams: {
    location?: string
    checkIn?: string
    checkOut?: string
    guests?: string
    minPrice?: string
    maxPrice?: string
    rating?: string
  }
}) {
  return (
    <div className="container py-8">
      <h1 className="mb-6 text-3xl font-bold">Find Your Perfect Hotel</h1>

<div className="grid grid-cols-1 gap-6 md:grid-cols-4">
        <div className="md:col-span-1">
          {/* Pass searchParams as a serialized string to avoid accessing properties */}
          <HotelFilters searchParamsString={JSON.stringify(searchParams)} />
        </div>

<div className="md:col-span-3">
          {/* Pass searchParams as a serialized string to avoid accessing properties */}
          <HotelList searchParamsString={JSON.stringify(searchParams)} />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hotel-filters.tsx" isMerged="true"
"use client"

import { useRouter, useSearchParams } from "next/navigation"
import { useState } from "react"
import { Calendar } from "@/components/ui/calendar"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon } from "lucide-react"
import { format } from "date-fns"
import { cn } from "@/lib/utils"

export function HotelFilters({
  searchParamsString,
}: {
  searchParamsString: string
}) {
  const router = useRouter()
  const params = useSearchParams()

// Parse the searchParams from the string
  const searchParams = JSON.parse(searchParamsString)

const [location, setLocation] = useState(searchParams.location || "")
  const [checkIn, setCheckIn] = useState<Date | undefined>(
    searchParams.checkIn ? new Date(searchParams.checkIn) : undefined,
  )
  const [checkOut, setCheckOut] = useState<Date | undefined>(
    searchParams.checkOut ? new Date(searchParams.checkOut) : undefined,
  )
  const [guests, setGuests] = useState(searchParams.guests || "2")
  const [priceRange, setPriceRange] = useState<[number, number]>([
    Number.parseInt(searchParams.minPrice || "50"),
    Number.parseInt(searchParams.maxPrice || "500"),
  ])
  const [rating, setRating] = useState(searchParams.rating || "0")

const applyFilters = () => {
    const newParams = new URLSearchParams()

if (location) newParams.set("location", location)
    if (checkIn) newParams.set("checkIn", format(checkIn, "yyyy-MM-dd"))
    if (checkOut) newParams.set("checkOut", format(checkOut, "yyyy-MM-dd"))
    if (guests) newParams.set("guests", guests)

newParams.set("minPrice", priceRange[0].toString())
    newParams.set("maxPrice", priceRange[1].toString())

if (Number.parseInt(rating) > 0) newParams.set("rating", rating)

router.push(`/hotels?${newParams.toString()}`)
  }

const resetFilters = () => {
    setLocation("")
    setCheckIn(undefined)
    setCheckOut(undefined)
    setGuests("2")
    setPriceRange([50, 500])
    setRating("0")
    router.push("/hotels")
  }

return (
    <div className="rounded-lg border bg-card p-4 shadow-sm">
      <h2 className="mb-4 font-semibold">Filters</h2>

<div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="location">Location</Label>
          <Input
            id="location"
            placeholder="City, region, or hotel name"
            value={location}
            onChange={(e) => setLocation(e.target.value)}
          />
        </div>

<div className="space-y-2">
          <Label>Check-in Date</Label>
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                className={cn("w-full justify-start text-left font-normal", !checkIn && "text-muted-foreground")}
              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                {checkIn ? format(checkIn, "PPP") : "Select date"}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
              <Calendar
                mode="single"
                selected={checkIn}
                onSelect={setCheckIn}
                initialFocus
                disabled={(date) => date < new Date()}
              />
            </PopoverContent>
          </Popover>
        </div>

<div className="space-y-2">
          <Label>Check-out Date</Label>
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                className={cn("w-full justify-start text-left font-normal", !checkOut && "text-muted-foreground")}
              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                {checkOut ? format(checkOut, "PPP") : "Select date"}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0">
              <Calendar
                mode="single"
                selected={checkOut}
                onSelect={setCheckOut}
                initialFocus
                disabled={(date) => date < (checkIn || new Date())}
              />
            </PopoverContent>
          </Popover>
        </div>

<div className="space-y-2">
          <Label htmlFor="guests">Guests</Label>
          <Input id="guests" type="number" min="1" value={guests} onChange={(e) => setGuests(e.target.value)} />
        </div>

<div className="space-y-2">
          <div className="flex justify-between">
            <Label>Price Range</Label>
            <span className="text-sm text-muted-foreground">
              ${priceRange[0]} - ${priceRange[1]}
            </span>
          </div>
          <Slider
            defaultValue={priceRange}
            min={0}
            max={1000}
            step={10}
            value={priceRange}
            onValueChange={(value) => setPriceRange(value as [number, number])}
          />
        </div>

<div className="space-y-2">
          <Label htmlFor="rating">Minimum Rating</Label>
          <select
            id="rating"
            className="w-full rounded-md border border-input bg-background px-3 py-2"
            value={rating}
            onChange={(e) => setRating(e.target.value)}
          >
            <option value="0">Any Rating</option>
            <option value="3">3+ Stars</option>
            <option value="4">4+ Stars</option>
            <option value="5">5 Stars</option>
          </select>
        </div>

<div className="flex flex-col gap-2 pt-2">
          <Button onClick={applyFilters}>Apply Filters</Button>
          <Button variant="outline" onClick={resetFilters}>
            Reset
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hotel-list.tsx" isMerged="true"
"use client"
import Image from "next/image"
import Link from "next/link"
import { Star, MapPin, Users, Calendar } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { hotels, getHotelPrimaryImage } from "@/lib/data"
import WishlistButton from "@/components/wishlist-button"

export function HotelList({
  searchParamsString,
}: {
  searchParamsString: string
}) {
  // Parse the searchParams from the string
  const searchParams = JSON.parse(searchParamsString)

// Filter hotels based on search params
  const filteredHotels = hotels.filter((hotel) => {
    // Filter by location
    if (
      searchParams.location &&
      !hotel.name.toLowerCase().includes(searchParams.location.toLowerCase()) &&
      !hotel.location.toLowerCase().includes(searchParams.location.toLowerCase())
    ) {
      return false
    }

// Filter by price range
    const minPrice = Number.parseInt(searchParams.minPrice || "0")
    const maxPrice = Number.parseInt(searchParams.maxPrice || "10000")
    if (hotel.price < minPrice || hotel.price > maxPrice) {
      return false
    }

// Filter by rating
    const minRating = Number.parseInt(searchParams.rating || "0")
    if (minRating > 0 && hotel.rating < minRating) {
      return false
    }

return true
  })

if (filteredHotels.length === 0) {
    return (
      <div className="rounded-lg border p-8 text-center">
        <h3 className="mb-2 text-xl font-semibold">No hotels found</h3>
        <p className="text-muted-foreground">Try adjusting your search filters to find more options.</p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <p className="text-muted-foreground">{filteredHotels.length} hotels found</p>
        <select className="rounded-md border border-input bg-background px-3 py-1 text-sm">
          <option value="recommended">Recommended</option>
          <option value="price-low">Price: Low to High</option>
          <option value="price-high">Price: High to Low</option>
          <option value="rating">Highest Rating</option>
        </select>
      </div>

{filteredHotels.map((hotel) => {
        // Get the primary image for this hotel
        const primaryImage = getHotelPrimaryImage(hotel.id)
        const imageUrl = primaryImage?.url || hotel.image

return (
          <div key={hotel.id} className="flex flex-col overflow-hidden rounded-lg border sm:flex-row">
            <div className="relative h-48 w-full sm:h-auto sm:w-72">
              <Image
                src={imageUrl || "/placeholder.svg"}
                alt={primaryImage?.alt || hotel.name}
                fill
                className="object-cover"
              />
              {hotel.discount > 0 && <Badge className="absolute left-2 top-2 bg-red-500">{hotel.discount}% OFF</Badge>}
              <div className="absolute right-2 top-2">
                <WishlistButton hotelId={hotel.id} />
              </div>
            </div>

<div className="flex flex-1 flex-col p-4">
              <div className="mb-2 flex items-center justify-between">
                <h3 className="text-xl font-semibold">{hotel.name}</h3>
                <div className="flex items-center">
                  {Array(5)
                    .fill(0)
                    .map((_, i) => (
                      <Star
                        key={i}
                        className={`h-4 w-4 ${i < hotel.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`}
                      />
                    ))}
                  <span className="ml-2 text-sm text-muted-foreground">({hotel.reviews} reviews)</span>
                </div>
              </div>

<div className="mb-2 flex items-center text-sm text-muted-foreground">
                <MapPin className="mr-1 h-4 w-4" />
                {hotel.location}
              </div>

<p className="mb-4 text-sm">{hotel.description}</p>

<div className="mt-auto flex flex-wrap items-center gap-4 pt-2">
                <div className="flex items-center text-sm">
                  <Users className="mr-1 h-4 w-4" />
                  <span>Sleeps {hotel.capacity}</span>
                </div>

{searchParams.checkIn && searchParams.checkOut && (
                  <div className="flex items-center text-sm">
                    <Calendar className="mr-1 h-4 w-4" />
                    <span>
                      {searchParams.checkIn} to {searchParams.checkOut}
                    </span>
                  </div>
                )}

<div className="ml-auto flex items-center gap-4">
                  <div className="text-right">
                    <div className="text-lg font-bold">
                      ${hotel.price}
                      <span className="text-sm font-normal">/night</span>
                    </div>
                    {hotel.discount > 0 && (
                      <div className="text-sm text-muted-foreground line-through">
                        ${Math.round(hotel.price / (1 - hotel.discount / 100))}
                      </div>
                    )}
                  </div>

<Button asChild>
                    <Link href={`/hotels/${hotel.id}`}>View Details</Link>
                  </Button>
                </div>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/mongodb.ts"
import { MongoClient, ServerApiVersion } from "mongodb"

if (!process.env.MONGODB_URI) {
  throw new Error("Please add your MongoDB URI to .env.local")
}

const uri = process.env.MONGODB_URI
const options = {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
}

let client: MongoClient
let clientPromise: Promise<MongoClient>

if (process.env.NODE_ENV === "development") {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  const globalWithMongo = global as typeof global & {
    _mongoClientPromise?: Promise<MongoClient>
  }

if (!globalWithMongo._mongoClientPromise) {
    client = new MongoClient(uri, options)
    globalWithMongo._mongoClientPromise = client.connect()
  }
  clientPromise = globalWithMongo._mongoClientPromise
} else {
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be shared across functions.
export default clientPromise
[V0_FILE]typescriptreact:file="lib/user-service.ts"
import { ObjectId } from "mongodb"
import bcrypt from "bcryptjs"
import clientPromise from "./mongodb"

export type UserDocument = {
  _id?: ObjectId
  email: string
  firstName: string
  lastName: string
  password: string
  avatar?: string
  createdAt: Date
  updatedAt: Date
}

export type UserProfile = Omit<UserDocument, "password"> & { id: string }

export class UserService {
  private static instance: UserService
  private constructor() {}

public static getInstance(): UserService {
    if (!UserService.instance) {
      UserService.instance = new UserService()
    }
    return UserService.instance
  }

private async getCollection() {
    const client = await clientPromise
    const db = client.db("hotel-booking")
    return db.collection<UserDocument>("users")
  }

async findUserByEmail(email: string): Promise<UserDocument | null> {
    const collection = await this.getCollection()
    return collection.findOne({ email: email.toLowerCase() })
  }

async findUserById(id: string): Promise<UserDocument | null> {
    const collection = await this.getCollection()
    return collection.findOne({ _id: new ObjectId(id) })
  }

async createUser(userData: {
    email: string
    firstName: string
    lastName: string
    password: string
  }): Promise<UserProfile> {
    const collection = await this.getCollection()

// Check if user already exists
    const existingUser = await this.findUserByEmail(userData.email)
    if (existingUser) {
      throw new Error("Email already in use")
    }

// Hash password
    const salt = await bcrypt.genSalt(10)
    const hashedPassword = await bcrypt.hash(userData.password, salt)

const now = new Date()
    const newUser: UserDocument = {
      email: userData.email.toLowerCase(),
      firstName: userData.firstName,
      lastName: userData.lastName,
      password: hashedPassword,
      avatar: `/placeholder.svg?height=40&width=40&text=${userData.firstName.charAt(0)}${userData.lastName.charAt(0)}`,
      createdAt: now,
      updatedAt: now,
    }

const result = await collection.insertOne(newUser)

// Return user profile without password
    const { password, ...userProfile } = newUser
    return {
      ...userProfile,
      id: result.insertedId.toString(),
    }
  }

async validateUser(email: string, password: string): Promise<UserProfile | null> {
    const user = await this.findUserByEmail(email)

if (!user) {
      return null
    }

const isPasswordValid = await bcrypt.compare(password, user.password)

if (!isPasswordValid) {
      return null
    }

// Return user profile without password
    const { password: _, ...userProfile } = user
    return {
      ...userProfile,
      id: user._id!.toString(),
    }
  }

async updateUser(userId: string, userData: Partial<UserProfile>): Promise<UserProfile | null> {
    const collection = await this.getCollection()

const updateData: Partial<UserDocument> = {
      ...userData,
      updatedAt: new Date(),
    }

// Remove id from update data if present
    if ("id" in updateData) {
      delete updateData.id
    }

const result = await collection.findOneAndUpdate(
      { _id: new ObjectId(userId) },
      { $set: updateData },
      { returnDocument: "after" },
    )

if (!result) {
      return null
    }

// Return user profile without password
    const { password, ...userProfile } = result
    return {
      ...userProfile,
      id: result._id!.toString(),
    }
  }
}

export const userService = UserService.getInstance()
[V0_FILE]typescriptreact:file="lib/auth.ts" isEdit="true"
import { create } from "zustand"
import { persist } from "zustand/middleware"
import { userService } from "./user-service"

export type User = {
  id: string
  email: string
  firstName: string
  lastName: string
  avatar?: string
}

type AuthState = {
  user: User | null
  isAuthenticated: boolean
  isLoading: boolean
  login: (email: string, password: string) => Promise<{ success: boolean; message: string }>
  signup: (
    firstName: string,
    lastName: string,
    email: string,
    password: string,
  ) => Promise<{ success: boolean; message: string }>
  logout: () => void
  updateUser: (user: Partial<User>) => Promise<void>
}

export const useAuth = create<AuthState>()(
  persist(
    (set, get) => ({
      user: null,
      isAuthenticated: false,
      isLoading: false,

try {
          const user = await userService.validateUser(email, password)

if (!user) {
            set({ isLoading: false })
            return { success: false, message: "Invalid email or password" }
          }

set({
            user: {
              id: user.id,
              email: user.email,
              firstName: user.firstName,
              lastName: user.lastName,
              avatar: user.avatar,
            },
            isAuthenticated: true,
            isLoading: false,
          })
          return { success: true, message: "Login successful" }
        } catch (error) {
          console.error("Login error:", error)
          set({ isLoading: false })
          return { success: false, message: "An error occurred during login" }
        }
      },

signup: async (firstName, lastName, email, password) => {
        set({ isLoading: true })

try {
          const user = await userService.createUser({
            firstName,
            lastName,
            email,
            password,
          })

set({
            user: {
              id: user.id,
              email: user.email,
              firstName: user.firstName,
              lastName: user.lastName,
              avatar: user.avatar,
            },
            isAuthenticated: true,
            isLoading: false,
          })
          return { success: true, message: "Account created successfully" }
        } catch (error: any) {
          console.error("Signup error:", error)
          set({ isLoading: false })
          return {
            success: false,
            message: error.message || "An error occurred during signup",
          }
        }
      },

logout: () => {
        set({ user: null, isAuthenticated: false })
      },

updateUser: async (userData) => {
        const currentUser = get().user
        if (!currentUser) return

try {
          const updatedUser = await userService.updateUser(currentUser.id, userData)

if (updatedUser) {
            set({
              user: {
                id: updatedUser.id,
                email: updatedUser.email,
                firstName: updatedUser.firstName,
                lastName: updatedUser.lastName,
                avatar: updatedUser.avatar,
              },
            })
          }
        } catch (error) {
          console.error("Update user error:", error)
        }
      },
    }),
    {
      name: "auth-storage",
    },
  ),
)
[V0_FILE]typescriptreact:file="app/api/auth/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { userService } from "@/lib/user-service"
import { z } from "zod"

// Validation schemas
const loginSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(1, "Password is required"),
})

const signupSchema = z.object({
  firstName: z.string().min(1, "First name is required"),
  lastName: z.string().min(1, "Last name is required"),
  email: z.string().email("Invalid email address"),
  password: z.string().min(8, "Password must be at least 8 characters"),
})

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { action } = body

if (action === "login") {
      const validationResult = loginSchema.safeParse(body)

if (!validationResult.success) {
        return NextResponse.json({ success: false, message: validationResult.error.errors[0].message }, { status: 400 })
      }

const { email, password } = validationResult.data
      const user = await userService.validateUser(email, password)

if (!user) {
        return NextResponse.json({ success: false, message: "Invalid email or password" }, { status: 401 })
      }

return NextResponse.json({
        success: true,
        user: {
          id: user.id,
          email: user.email,
          firstName: user.firstName,
          lastName: user.lastName,
          avatar: user.avatar,
        },
      })
    } else if (action === "signup") {
      const validationResult = signupSchema.safeParse(body)

if (!validationResult.success) {
        return NextResponse.json({ success: false, message: validationResult.error.errors[0].message }, { status: 400 })
      }

const { firstName, lastName, email, password } = validationResult.data

try {
        const user = await userService.createUser({
          firstName,
          lastName,
          email,
          password,
        })

return NextResponse.json({
          success: true,
          user: {
            id: user.id,
            email: user.email,
            firstName: user.firstName,
            lastName: user.lastName,
            avatar: user.avatar,
          },
        })
      } catch (error: any) {
        return NextResponse.json({ success: false, message: error.message || "Failed to create user" }, { status: 400 })
      }
    } else {
      return NextResponse.json({ success: false, message: "Invalid action" }, { status: 400 })
    }
  } catch (error) {
    console.error("Auth API error:", error)
    return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/lib/auth"
import { Loader2 } from "lucide-react"

export default function LoginPage() {
  const { login, isLoading } = useAuth()
  const { toast } = useToast()
  const router = useRouter()
  const searchParams = useSearchParams()
  const redirectUrl = searchParams.get("redirect") || "/"

const [formData, setFormData] = useState({
    email: "",
    password: "",
    rememberMe: false,
  })
  const [errors, setErrors] = useState<Record<string, string>>({})

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type, checked } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }))

// Clear error when user types
    if (errors[name]) {
      setErrors((prev) => ({ ...prev, [name]: "" }))
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!formData.email) {
      newErrors.email = "Email is required"
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid"
    }

if (!formData.password) {
      newErrors.password = "Password is required"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) return

const result = await login(formData.email, formData.password)

if (result.success) {
      toast({
        title: "Login successful",
        description: "Welcome back to StayEase!",
      })
      router.push(redirectUrl)
    } else {
      toast({
        title: "Login failed",
        description: result.message,
        variant: "destructive",
      })
    }
  }

return (
    <div className="container flex h-screen items-center justify-center py-12">
      <div className="mx-auto w-full max-w-md space-y-6">
        <div className="space-y-2 text-center">
          <h1 className="text-3xl font-bold">Welcome back</h1>
          <p className="text-muted-foreground">Enter your credentials to access your account</p>
        </div>

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              name="email"
              type="email"
              placeholder="m@example.com"
              value={formData.email}
              onChange={handleChange}
              className={errors.email ? "border-red-500" : ""}
            />
            {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
          </div>

<div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="password">Password</Label>
              <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                Forgot password?
              </Link>
            </div>
            <Input
              id="password"
              name="password"
              type="password"
              value={formData.password}
              onChange={handleChange}
              className={errors.password ? "border-red-500" : ""}
            />
            {errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
          </div>

<div className="flex items-center space-x-2">
            <Checkbox
              id="rememberMe"
              name="rememberMe"
              checked={formData.rememberMe}
              onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, rememberMe: checked as boolean }))}
            />
            <Label htmlFor="rememberMe" className="text-sm font-normal">
              Remember me for 30 days
            </Label>
          </div>

<Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Signing In...
              </>
            ) : (
              "Sign In"
            )}
          </Button>

<div className="text-center text-sm">
            Don't have an account?{" "}
            <Link href="/register" className="text-primary hover:underline">
              Sign up
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/lib/auth"
import { Loader2 } from "lucide-react"

export default function RegisterPage() {
  const { signup, isLoading } = useAuth()
  const { toast } = useToast()
  const router = useRouter()

const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    confirmPassword: "",
    agreeToTerms: false,
  })
  const [errors, setErrors] = useState<Record<string, string>>({})

// Clear error when user types
    if (errors[name]) {
      setErrors((prev) => ({ ...prev, [name]: "" }))
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!formData.firstName.trim()) {
      newErrors.firstName = "First name is required"
    }

if (!formData.lastName.trim()) {
      newErrors.lastName = "Last name is required"
    }

if (!formData.email) {
      newErrors.email = "Email is required"
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid"
    }

if (!formData.password) {
      newErrors.password = "Password is required"
    } else if (formData.password.length < 8) {
      newErrors.password = "Password must be at least 8 characters"
    }

if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords do not match"
    }

if (!formData.agreeToTerms) {
      newErrors.agreeToTerms = "You must agree to the terms and conditions"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) return

const result = await signup(formData.firstName, formData.lastName, formData.email, formData.password)

if (result.success) {
      toast({
        title: "Registration successful",
        description: "Your account has been created. Welcome to StayEase!",
      })
      router.push("/")
    } else {
      toast({
        title: "Registration failed",
        description: result.message,
        variant: "destructive",
      })
    }
  }

return (
    <div className="container flex min-h-screen items-center justify-center py-12">
      <div className="mx-auto w-full max-w-md space-y-6">
        <div className="space-y-2 text-center">
          <h1 className="text-3xl font-bold">Create an account</h1>
          <p className="text-muted-foreground">Enter your information to get started</p>
        </div>

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="firstName">First name</Label>
              <Input
                id="firstName"
                name="firstName"
                value={formData.firstName}
                onChange={handleChange}
                className={errors.firstName ? "border-red-500" : ""}
              />
              {errors.firstName && <p className="text-sm text-red-500">{errors.firstName}</p>}
            </div>
            <div className="space-y-2">
              <Label htmlFor="lastName">Last name</Label>
              <Input
                id="lastName"
                name="lastName"
                value={formData.lastName}
                onChange={handleChange}
                className={errors.lastName ? "border-red-500" : ""}
              />
              {errors.lastName && <p className="text-sm text-red-500">{errors.lastName}</p>}
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              name="email"
              type="email"
              placeholder="m@example.com"
              value={formData.email}
              onChange={handleChange}
              className={errors.email ? "border-red-500" : ""}
            />
            {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
          </div>

<div className="space-y-2">
            <Label htmlFor="password">Password</Label>
            <Input
              id="password"
              name="password"
              type="password"
              value={formData.password}
              onChange={handleChange}
              className={errors.password ? "border-red-500" : ""}
            />
            {errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
          </div>

<div className="space-y-2">
            <Label htmlFor="confirmPassword">Confirm Password</Label>
            <Input
              id="confirmPassword"
              name="confirmPassword"
              type="password"
              value={formData.confirmPassword}
              onChange={handleChange}
              className={errors.confirmPassword ? "border-red-500" : ""}
            />
            {errors.confirmPassword && <p className="text-sm text-red-500">{errors.confirmPassword}</p>}
          </div>

<div className="flex items-center space-x-2">
            <Checkbox
              id="agreeToTerms"
              name="agreeToTerms"
              checked={formData.agreeToTerms}
              onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, agreeToTerms: checked as boolean }))}
              className={errors.agreeToTerms ? "border-red-500" : ""}
            />
            <Label htmlFor="agreeToTerms" className="text-sm font-normal">
              I agree to the{" "}
              <Link href="/terms" className="text-primary hover:underline">
                Terms of Service
              </Link>{" "}
              and{" "}
              <Link href="/privacy" className="text-primary hover:underline">
                Privacy Policy
              </Link>
            </Label>
          </div>
          {errors.agreeToTerms && <p className="text-sm text-red-500">{errors.agreeToTerms}</p>}

<Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Creating Account...
              </>
            ) : (
              "Create Account"
            )}
          </Button>

<div className="text-center text-sm">
            Already have an account?{" "}
            <Link href="/login" className="text-primary hover:underline">
              Sign in
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/user/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { userService } from "@/lib/user-service"
import { z } from "zod"

// Validation schema for user update
const updateUserSchema = z.object({
  userId: z.string().min(1, "User ID is required"),
  firstName: z.string().optional(),
  lastName: z.string().optional(),
  avatar: z.string().optional(),
})

export async function PUT(request: NextRequest) {
  try {
    const body = await request.json()
    const validationResult = updateUserSchema.safeParse(body)

if (!validationResult.success) {
      return NextResponse.json({ success: false, message: validationResult.error.errors[0].message }, { status: 400 })
    }

const { userId, ...userData } = validationResult.data

const updatedUser = await userService.updateUser(userId, userData)

if (!updatedUser) {
      return NextResponse.json({ success: false, message: "User not found" }, { status: 404 })
    }

return NextResponse.json({
      success: true,
      user: {
        id: updatedUser.id,
        email: updatedUser.email,
        firstName: updatedUser.firstName,
        lastName: updatedUser.lastName,
        avatar: updatedUser.avatar,
      },
    })
  } catch (error) {
    console.error("Update user API error:", error)
    return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]json:file="package.json"
{
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "mongodb": "^6.3.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/bcryptjs": "^2.4.6"
  }
}</article></body></html>