"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, cardHoverTarget, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { Compass, Search, MapPin, Calendar, Users, Plane, Hotel, Star, TrendingUp, ArrowRight, Filter, } from "lucide-react" const popularDestinations = [ { name: "Paris, France", price: "699", rating: 4.8, image: "🗼" }, { name: "Tokyo, Japan", price: "1,299", rating: 4.9, image: "🗾" }, { name: "New York, USA", price: "599", rating: 4.7, image: "🗽" }, { name: "Bali, Indonesia", price: "899", rating: 4.8, image: "🏝️" }, { name: "Dubai, UAE", price: "1,099", rating: 4.9, image: "🏙️" }, { name: "Sydney, Australia", price: "1,499", rating: 4.8, image: "🦘" }, ] const suggestions = [ "Beach destinations", "Mountain retreats", "City breaks", "Cultural tours", "Adventure travel", ] export default function DestinationSearch() { const [query, setQuery] = useState("") return (

Discover Your Next Adventure

Where would you like to{" "} go?

Search thousands of destinations worldwide and find your perfect trip.

setQuery(e.target.value)} />

{suggestions.map((s) => ( ))}

Popular Destinations

{popularDestinations.map((d) => (

{d.image} {d.rating}

{d.name}

from ${d.price}

))}

) }

Destination Search

Where would you like to go?

Popular Destinations

Where would you like to go?

Popular Destinations