import React, { useState, useEffect } from 'react'; import { BrowserRouter, Routes, Route, Navigate, Link, useNavigate, useLocation, useSearchParams } from 'react-router-dom'; import { motion, AnimatePresence } from 'framer-motion'; import { Compass, Heart, Calendar, Sparkles, MapPin, RotateCw, Map, X, ChevronRight, DollarSign, Sun, CloudRain, Bookmark, Check, Info, ArrowRight, Trash2 } from 'lucide-react'; import { Toaster, toast } from 'sonner'; // ========================================== // MEDIA CONSTANTS & MOCK DATA // ========================================== const MEDIA = { kyoto: { src: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=800&q=80", alt: "Arashiyama Bamboo Grove in Kyoto, Japan" }, amalfi: { src: "https://images.unsplash.com/photo-1486916856992-e4db22c8df33?auto=format&fit=crop&w=800&q=80", alt: "Positano cliffside on the Amalfi Coast, Italy" }, marrakech: { src: "https://images.unsplash.com/photo-1539650116574-8efeb43e2750?auto=format&fit=crop&w=800&q=80", alt: "Intricate architecture of a riad in Marrakech, Morocco" }, reykjavik: { src: "https://images.unsplash.com/photo-1504829857797-ddff28127792?auto=format&fit=crop&w=800&q=80", alt: "Dramatic volcanic landscape near Reykjavik, Iceland" }, placeholder: { src: "https://images.unsplash.com/photo-1488646953014-85cb44e25828?auto=format&fit=crop&w=800&q=80", alt: "Elegant travel journal and camera" } }; interface Activity { id: string; time: string; title: string; category: 'Hidden Gem' | 'Boutique Stay' | 'Local Culinary' | 'Scenic Viewpoint'; description: string; image: string; priceTier: '$$' | '$$$' | '$$$$'; } interface DayPlan { dayNumber: number; weather: { temp: string; condition: 'sunny' | 'misty' | 'clear' }; activities: Activity[]; } interface Trip { id: string; destination: string; vibe: string; budget: 'Boutique' | 'Luxury' | 'Ultra-Luxe'; duration: number; coverImage: string; days: DayPlan[]; } // Pool of alternative activities for the "Regenerate" feature const ALTERNATIVE_ACTIVITIES: Record = { Kyoto: [ { id: 'alt-kyoto-1', time: '11:30 AM', category: 'Hidden Gem', title: 'Gio-ji Moss Temple', description: 'A tiny, quiet temple tucked away in the forest, famous for its lush emerald moss garden and maple trees.', image: 'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=600&q=80', priceTier: '$$' }, { id: 'alt-kyoto-2', time: '03:00 PM', category: 'Local Culinary', title: 'Uji Matcha Tea Ceremony', description: 'Private tea preparation with a 15th-generation master in an authentic wooden teahouse overlooking the river.', image: 'https://images.unsplash.com/photo-1576092768241-dec231879fc3?auto=format&fit=crop&w=600&q=80', priceTier: '$$$' }, { id: 'alt-kyoto-3', time: '07:30 PM', category: 'Local Culinary', title: 'Gion Karyo Kaiseki', description: 'A multi-course seasonal feast served in a restored historic townhouse, celebrating Kyoto’s delicate culinary heritage.', image: 'https://images.unsplash.com/photo-1617196034796-73dfa7b1fd56?auto=format&fit=crop&w=600&q=80', priceTier: '$$$$' } ], 'Amalfi Coast': [ { id: 'alt-amalfi-1', time: '10:00 AM', category: 'Scenic Viewpoint', title: 'Path of the Gods Secret Trail', description: 'An exclusive guided walk along high cliff trails, avoiding tourist crowds, with panoramic views of Capri.', image: 'https://images.unsplash.com/photo-1516483638261-f4dbaf036963?auto=format&fit=crop&w=600&q=80', priceTier: '$$$' }, { id: 'alt-amalfi-2', time: '01:00 PM', category: 'Local Culinary', title: 'Da Adolfo Beach Lunch', description: 'Accessible only by a small red-fish boat from Positano, enjoy fresh grilled fish and peach-infused white wine right on the pebbles.', image: 'https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=600&q=80', priceTier: '$$$' } ], Marrakech: [ { id: 'alt-marrakech-1', time: '04:00 PM', category: 'Hidden Gem', title: 'Le Jardin Secret', description: 'An elegant, restored palace garden dating back to the Saadian Dynasty, featuring traditional Islamic geometry.', image: 'https://images.unsplash.com/photo-1505993597083-3bd19f7c1f27?auto=format&fit=crop&w=600&q=80', priceTier: '$$' }, { id: 'alt-marrakech-2', time: '08:00 PM', category: 'Local Culinary', title: 'Dar Moha Courtyard Dinner', description: 'Innovative Moroccan cuisine served around a gorgeous tiled pool under orange trees, with live soft Andalusian lute music.', image: 'https://images.unsplash.com/photo-1541532713592-79a0317b6b77?auto=format&fit=crop&w=600&q=80', priceTier: '$$$$' } ], Reykjavik: [ { id: 'alt-reykjavik-1', time: '11:00 AM', category: 'Hidden Gem', title: 'Seljavallalaug Secret Thermal Pool', description: 'One of Iceland’s oldest geothermal pools, hidden deep in a narrow valley surrounded by dramatic volcanic slopes.', image: 'https://images.unsplash.com/photo-1504829857797-ddff28127792?auto=format&fit=crop&w=600&q=80', priceTier: '$$' }, { id: 'alt-reykjavik-2', time: '04:30 PM', category: 'Scenic Viewpoint', title: 'Grótta Lighthouse Sunset', description: 'A serene coastal nature reserve at the tip of the peninsula, offering spectacular views of the Snæfellsnes peninsula.', image: 'https://images.unsplash.com/photo-1504829857797-ddff28127792?auto=format&fit=crop&w=600&q=80', priceTier: '$$' } ] }; // Default seed data const SEED_TRIPS: Trip[] = [ { id: 'kyoto-autumn', destination: 'Kyoto', vibe: 'Wabi-Sabi Serenity', budget: 'Luxury', duration: 3, coverImage: MEDIA.kyoto.src, days: [ { dayNumber: 1, weather: { temp: '18°C', condition: 'misty' }, activities: [ { id: 'kyoto-1-1', time: '08:30 AM', category: 'Boutique Stay', title: 'Sowaka Ryokan Sanctuary', description: 'Check-in to a beautifully restored early 20th-century tea-house hotel, blending heritage with deep quietude.', image: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=600&q=80', priceTier: '$$$$' }, { id: 'kyoto-1-2', time: '11:00 AM', category: 'Hidden Gem', title: 'Honen-in Temple Moss Gate', description: 'A secluded, rustic temple in eastern Kyoto with sand mounds raked daily and a moss-covered thatched gate.', image: 'https://images.unsplash.com/photo-1528164344705-47542687000d?auto=format&fit=crop&w=600&q=80', priceTier: '$$' }, { id: 'kyoto-1-3', time: '06:00 PM', category: 'Local Culinary', title: 'Kiyamachi Alley Izakaya', description: 'Tucked away along a narrow canal, this 6-seat counter serves delicate seasonal small plates and rare sake.', image: 'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=600&q=80', priceTier: '$$$' } ] }, { dayNumber: 2, weather: { temp: '20°C', condition: 'sunny' }, activities: [ { id: 'kyoto-2-1', time: '09:00 AM', category: 'Scenic Viewpoint', title: 'Tofuku-ji Hojo Gardens', description: 'Witness the iconic checkerboard moss garden designed by Mirei Shigeori, looking especially cinematic in the morning light.', image: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=600&q=80', priceTier: '$$' } ] } ] }, { id: 'amalfi-summer', destination: 'Amalfi Coast', vibe: 'Sun-Drenched Decadence', budget: 'Ultra-Luxe', duration: 2, coverImage: MEDIA.amalfi.src, days: [ { dayNumber: 1, weather: { temp: '28°C', condition: 'sunny' }, activities: [ { id: 'amalfi-1-1', time: '10:00 AM', category: 'Boutique Stay', title: 'Villa Treville Hideaway', description: 'Perched high on the cliffs, this legendary estate offers private terraces draped in bougainvillea.', image: 'https://images.unsplash.com/photo-1516483638261-f4dbaf036963?auto=format&fit=crop&w=600&q=80', priceTier: '$$$$' }, { id: 'amalfi-1-2', time: '02:00 PM', category: 'Scenic Viewpoint', title: 'Private Riva Boat Cruise', description: 'Sail past the emerald grottoes and private coves of Nerano on an iconic mahogany speedboat.', image: 'https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=600&q=80', priceTier: '$$$$' } ] } ] } ]; // Safe Image component with fallback const SafeImage: React.FC<{ src: string; alt: string; className?: string }> = ({ src, alt, className }) => { const [imgSrc, setImgSrc] = useState(src); const [hasError, setHasError] = useState(false); useEffect(() => { setImgSrc(src); setHasError(false); }, [src]); return ( {alt}

{ if (!hasError) { setHasError(true); setImgSrc(MEDIA.placeholder.src); } }} /> ); }; // ========================================== // MAIN APP COMPONENT // ========================================== export default function App() { const [trips, setTrips] = useState(() => { try { const saved = localStorage.getItem('roamly:trips'); return saved ? (JSON.parse(saved) as Trip[]) : SEED_TRIPS; } catch (e) { return SEED_TRIPS; } }); const [activeTrip, setActiveTrip] = useState(() => { try { const saved = localStorage.getItem('roamly:active_trip'); return saved ? (JSON.parse(saved) as Trip) : SEED_TRIPS[0]; } catch (e) { return SEED_TRIPS[0]; } }); const [shortlist, setShortlist] = useState(() => { try { const saved = localStorage.getItem('roamly:shortlist'); return saved ? (JSON.parse(saved) as Activity[]) : []; } catch (e) { return []; } }); useEffect(() => { localStorage.setItem('roamly:trips', JSON.stringify(trips)); }, [trips]); useEffect(() => { if (activeTrip) { localStorage.setItem('roamly:active_trip', JSON.stringify(activeTrip)); } }, [activeTrip]); useEffect(() => { localStorage.setItem('roamly:shortlist', JSON.stringify(shortlist)); }, [shortlist]); const handleToggleFavorite = (activity: Activity) => { const exists = shortlist.some(item => item.id === activity.id); if (exists) { setShortlist(prev => prev.filter(item => item.id !== activity.id)); toast.info(`Removed "${activity.title}" from shortlist`); } else { setShortlist(prev => [...prev, activity]); toast.success(`Saved "${activity.title}" to shortlist`); } }; const handleRegenerateActivity = (dayIndex: number, activityId: string) => { if (!activeTrip) return; const destPool = ALTERNATIVE_ACTIVITIES[activeTrip.destination] || ALTERNATIVE_ACTIVITIES['Kyoto']; const currentActivity = activeTrip.days[dayIndex].activities.find(a => a.id === activityId); // Find a replacement that isn't currently in the day const unused = destPool.filter(alt => !activeTrip.days[dayIndex].activities.some(act => act.title === alt.title) ); if (unused.length === 0) { toast.error("No more alternative boutique experiences found for this destination."); return; } const replacement = { ...unused[Math.floor(Math.random() * unused.length)], id: `reg-${Date.now()}`, time: currentActivity?.time || '12:00 PM' }; const updatedDays = activeTrip.days.map((day, dIdx) => { if (dIdx === dayIndex) { return { ...day, activities: day.activities.map(act => act.id === activityId ? replacement : act) }; } return day; }); const updatedTrip = { ...activeTrip, days: updatedDays }; setActiveTrip(updatedTrip); setTrips(prev => prev.map(t => t.id === activeTrip.id ? updatedTrip : t)); toast.success(`Swapped to: ${replacement.title}`); }; const handleAddNewTrip = (newTrip: Trip) => { setTrips(prev => [newTrip, ...prev]); setActiveTrip(newTrip); }; const handleDeleteTrip = (tripId: string) => { const remaining = trips.filter(t => t.id !== tripId); setTrips(remaining); if (activeTrip?.id === tripId) { setActiveTrip(remaining.length > 0 ? remaining[0] : null); } toast.info("Trip removed from your gallery"); }; return (

{/* Mobile-first frame container */}

setActiveTrip(trip)} /> } /> } /> } /> setActiveTrip(trip)} onDelete={handleDeleteTrip} /> } /> } />

{/* Persistent Glassmorphic Bottom Navigation */}

); } // ========================================== // SCREEN: HOME // ========================================== function HomeScreen({ trips, setActiveTrip }: { trips: Trip[]; setActiveTrip: (t: Trip) => void }) { const navigate = useNavigate(); const featuredDestinations = [ { name: 'Kyoto', img: MEDIA.kyoto.src, desc: 'Wabi-Sabi gardens & hidden forest temples', vibe: 'Wabi-Sabi Serenity' }, { name: 'Amalfi Coast', img: MEDIA.amalfi.src, desc: 'Cliffside estates & private Riva boat escapes', vibe: 'Sun-Drenched Decadence' }, { name: 'Marrakech', img: MEDIA.marrakech.src, desc: 'Stunning riads & spice-scented courtyard dining', vibe: 'Cinematic Noir' } ]; const handleQuickStart = (destName: string) => { toast.success(`Selected ${destName}. Customizing your vibe...`); navigate(`/generator?dest=${encodeURIComponent(destName)}`); }; // Sensory Vibe Mixer States (Signature Moment) const [activeSound, setActiveSound] = useState('Rain on Cedar'); const [activeLight, setActiveLight] = useState('Mist & Shadow'); const [activeScent, setActiveScent] = useState('Sandalwood & Moss'); const getMatchedVibe = () => { if (activeSound === 'Ocean Swell' || activeLight === 'Golden Hour') { return { title: 'Sun-Drenched Decadence', desc: 'Cliffside villas, private boat tours, and coastal dining', dest: 'Amalfi Coast' }; } if (activeSound === 'Soft Jazz' || activeScent === 'Orange Blossom') { return { title: 'Cinematic Noir', desc: 'Moody alleyways, historic architecture, and late-night jazz', dest: 'Marrakech' }; } if (activeSound === 'Wind Chimes' || activeLight === 'Dappled Sun') { return { title: 'High-Altitude Mystic', desc: 'Volcanic springs, dramatic vistas, and remote cabins', dest: 'Reykjavik' }; } return { title: 'Wabi-Sabi Serenity', desc: 'Quiet temples, moss gardens, and slow tea ceremonies', dest: 'Kyoto' }; }; const matched = getMatchedVibe(); const handleGenerateFromVibe = () => { toast.success(`Applying ${matched.title} vibe profile...`); navigate(`/generator?dest=${encodeURIComponent(matched.dest)}&vibe=${encodeURIComponent(matched.title)}`); }; return (

{/* Header */}

Curated Journeys

Roamly

{/* Hero Card */}

AI-Driven Editorial

Escape the ordinary. Chart by mood.

Cinematic daily plans, weather-aware scheduling, and handpicked boutique experiences.

{/* Sensory Vibe Mixer (Signature Moment) */}

Sensory Vibe Mixer

Blend sensory elements to dynamically calculate your custom aesthetic profile.

Acoustic Mood

{['Rain on Cedar', 'Soft Jazz', 'Ocean Swell', 'Wind Chimes'].map(sound => ( ))}

Luminance

{['Dim Candlelight', 'Golden Hour', 'Mist & Shadow', 'Dappled Sun'].map(light => ( ))}

Scent Profile

{['Sandalwood & Moss', 'Salty Sea Air', 'Orange Blossom', 'Volcanic Ash'].map(scent => ( ))}

{/* Dynamic Result Panel */}

Aesthetic Match 98% Match

{matched.title}

{matched.desc}

{/* Featured Editorial Destinations */}

Curated Escapes

Tap to start

{featuredDestinations.map((dest) => (

handleQuickStart(dest.name)} className="relative h-40 rounded-2xl overflow-hidden cursor-pointer group shadow-sm hover:shadow-md transition-all" >

{dest.name}

{dest.desc}

))}

); } // ========================================== // SCREEN: GENERATOR (MULTI-STEP FLOW) // ========================================== function GeneratorScreen({ onGenerate }: { onGenerate: (trip: Trip) => void }) { const navigate = useNavigate(); const [searchParams] = useSearchParams(); const destParam = searchParams.get('dest'); const vibeParam = searchParams.get('vibe'); const [step, setStep] = useState(1); const [destination, setDestination] = useState(destParam || 'Kyoto'); const [duration, setDuration] = useState(3); const [budget, setBudget] = useState<'Boutique' | 'Luxury' | 'Ultra-Luxe'>('Luxury'); const [vibe, setVibe] = useState(vibeParam || 'Wabi-Sabi Serenity'); useEffect(() => { if (destParam) setDestination(destParam); if (vibeParam) setVibe(vibeParam); }, [destParam, vibeParam]); const [isGenerating, setIsGenerating] = useState(false); const [loadingStep, setLoadingStep] = useState(0); const loadingPhrases = [ "Sourcing boutique heritage stays...", "Curating hidden local culinary gems...", "Checking weather patterns for optimal timing...", "Polishing your custom cinematic layout..." ]; const vibes = [ { title: 'Wabi-Sabi Serenity', desc: 'Quiet temples, moss gardens, and slow tea ceremonies' }, { title: 'Sun-Drenched Decadence', desc: 'Cliffside villas, private boat tours, and coastal dining' }, { title: 'Cinematic Noir', desc: 'Moody alleyways, historic architecture, and late-night jazz' }, { title: 'High-Altitude Mystic', desc: 'Volcanic springs, dramatic vistas, and remote cabins' } ]; const handleNext = () => { if (step < 4) { setStep(prev => prev + 1); } else { triggerGeneration(); } }; const triggerGeneration = () => { setIsGenerating(true); let currentLoad = 0; const interval = setInterval(() => { currentLoad++; if (currentLoad < loadingPhrases.length) { setLoadingStep(currentLoad); } else { clearInterval(interval); finalizeTrip(); } }, 1200); }; const finalizeTrip = () => { // Generate mock activities based on destination const mockDays: DayPlan[] = Array.from({ length: duration }).map((_, idx) => { const dayNum = idx + 1; const isKyoto = destination.toLowerCase().includes('kyoto'); const isAmalfi = destination.toLowerCase().includes('amalfi'); return { dayNumber: dayNum, weather: { temp: isAmalfi ? '27°C' : '19°C', condition: isAmalfi ? 'sunny' : 'misty' }, activities: [ { id: `gen-${dayNum}-1`, time: '09:00 AM', category: 'Boutique Stay', title: isKyoto ? 'Sowaka Ryokan Sanctuary' : 'The Grand Hideaway Suite', description: `Start your day enjoying luxurious slow living tailored perfectly to your ${vibe} mood.`, image: isKyoto ? MEDIA.kyoto.src : MEDIA.placeholder.src, priceTier: budget === 'Ultra-Luxe' ? '$$$$' : '$$$' }, { id: `gen-${dayNum}-2`, time: '01:00 PM', category: 'Hidden Gem', title: isKyoto ? 'Gio-ji Moss Temple' : 'Secret Coastal Cove', description: 'A quiet, crowd-free escape with rich sensory details, curated by our editorial team.', image: isAmalfi ? MEDIA.amalfi.src : MEDIA.placeholder.src, priceTier: '$$' }, { id: `gen-${dayNum}-3`, time: '07:30 PM', category: 'Local Culinary', title: isKyoto ? 'Kiyamachi Canal Dining' : 'Cliffside Candlelite Feast', description: 'A beautiful dining setup showcasing seasonal ingredients and authentic regional techniques.', image: isKyoto ? MEDIA.kyoto.src : MEDIA.amalfi.src, priceTier: budget === 'Ultra-Luxe' ? '$$$$' : '$$$' } ] }; }); const newTrip: Trip = { id: `trip-${Date.now()}`, destination, vibe, budget, duration, coverImage: destination.toLowerCase().includes('kyoto') ? MEDIA.kyoto.src : destination.toLowerCase().includes('amalfi') ? MEDIA.amalfi.src : destination.toLowerCase().includes('marrakech') ? MEDIA.marrakech.src : MEDIA.placeholder.src, days: mockDays }; onGenerate(newTrip); setIsGenerating(false); toast.success(`Your cinematic itinerary for ${destination} is ready!`); navigate('/itinerary'); }; if (isGenerating) { return (

Roamly AI Engine

{loadingPhrases[loadingStep]}

Crafting a bespoke travel experience...

); } return (

{/* Top Bar */}

Cancel

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

))}

{/* Steps Content */}

{step === 1 && ( Step 1 of 4

Where are we escaping to?

{['Kyoto', 'Amalfi Coast', 'Marrakech', 'Reykjavik'].map((dest) => ( ))}

)} {step === 2 && ( Step 2 of 4

How long is your escape?

{[2, 3, 5].map((days) => ( ))}

)} {step === 3 && ( Step 3 of 4

Define your luxury

{(['Boutique', 'Luxury', 'Ultra-Luxe'] as const).map((b) => ( ))}

)} {step === 4 && ( Step 4 of 4

What is the aesthetic vibe?

{vibes.map((v) => ( ))}

)}

{/* Navigation Footer */}

{step > 1 && ( )}

); } // ========================================== // SCREEN: ITINERARY (DAY-BY-DAY VIEW) // ========================================== function ItineraryScreen({ trip, shortlist, onToggleFavorite, onRegenerate }: { trip: Trip | null; shortlist: Activity[]; onToggleFavorite: (act: Activity) => void; onRegenerate: (dayIndex: number, actId: string) => void; }) { const navigate = useNavigate(); const [activeDayIndex, setActiveDayIndex] = useState(0); const [showMap, setShowMap] = useState(false); const [showShortlist, setShowShortlist] = useState(false); if (!trip) { return (

No active itinerary found

Let's generate a bespoke journey tailored to your mood.

Create Trip

); } const currentDay = trip.days[activeDayIndex] || trip.days[0]; return (

{/* Header Banner */}

{/* Top Controls */}

← Back

{/* Title Overlay */}

{trip.vibe} • {trip.budget}

{trip.destination}

{/* Dynamic Weather & Day Tabs */}

{trip.days.map((day, idx) => ( ))}

{/* Weather Header */}

{currentDay?.weather.condition === 'sunny' ? ( ) : ( )} {currentDay?.weather.temp} • {currentDay?.weather.condition}

{/* Timeline Activities */}

{currentDay?.activities.map((act) => { const isFavorited = shortlist.some(item => item.id === act.id); return (

{/* Timeline node */}

{act.category}

{/* Heart & Refresh Buttons Overlay */}

{act.time} {act.priceTier}

{act.title}

{act.description}

); })}

{/* Floating Map Toggle */}

{/* Simulated Map Overlay */} {showMap && (

Bespoke Route Map

{/* Elegant Vector Map Simulation */}

{/* Simulated path */} {/* Map Pins */} {currentDay?.activities.map((act, idx) => (

{idx + 1}

{act.title}

{act.time}

))}

Interactive Routing

Optimized travel times computed dynamically based on current weather patterns.

)} {/* Shortlist Drawer */} {showShortlist && (

Your Shortlist ({shortlist.length})

{shortlist.length === 0 ? (

No activities saved yet. Tap the heart icon on any experience to build your shortlist.

) : (

{shortlist.map((act) => (

{act.category}

{act.title}

{act.time}

))}

)} )}

); } // ========================================== // SCREEN: SAVED (MAGAZINE COVER GALLERY) // ========================================== function SavedScreen({ trips, onSelect, onDelete }: { trips: Trip[]; onSelect: (trip: Trip) => void; onDelete: (id: string) => void; }) { const navigate = useNavigate(); const handleSelectTrip = (trip: Trip) => { onSelect(trip); toast.success(`Loaded itinerary for ${trip.destination}`); navigate('/itinerary'); }; return (

Your Library

Saved Escapes

Presented as high-end editorial travel magazine covers.

{trips.length === 0 ? (

Your library is empty. Let's design your first escape.

Generate Trip

) : (

{trips.map((trip) => (

{/* Background Cover Image */}

{/* Editorial Typography overlay */}

ROAMLY

handleSelectTrip(trip)} className="absolute inset-x-3 bottom-3 text-left space-y-1" > {trip.vibe}

{trip.destination}

{trip.duration} Days {trip.budget}

))}

)}

); } // ========================================== // COMPONENT: BOTTOM NAV // ========================================== function BottomNav({ shortlistCount }: { shortlistCount: number }) { const location = useLocation(); const currentPath = location.pathname; return ( ); }