import React, { useState, useEffect, useMemo } from "react"; import { BrowserRouter, Routes, Route, Link, useNavigate, useParams, useLocation, Navigate } from "react-router-dom"; import { Compass, Calendar, Heart, User, Sparkles, MapPin, DollarSign, Palmtree, Users, CheckSquare, CloudSun, Plane, Hotel, Utensils, Camera, Share2, Plus, ArrowRight, ChevronRight, Bell, Crown, Check, Map as MapIcon, Send, Trash2 } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; import { toast, Toaster } from "sonner"; // --- MEDIA CONSTANTS --- const DESTINATIONS = [ { id: "amalfi", name: "Amalfi Coast", country: "Italy", image: "https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=800&q=80", tagline: "Cliffside luxury & azure waters", rating: 4.9, weather: "24°C Sunny", }, { id: "kyoto", name: "Kyoto", country: "Japan", image: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=800&q=80", tagline: "Tranquil temples & bamboo groves", rating: 4.8, weather: "19°C Clear", }, { id: "stmoritz", name: "St. Moritz", country: "Switzerland", image: "https://images.unsplash.com/photo-1502784444187-359ac186c5bb?auto=format&fit=crop&w=800&q=80", tagline: "Alpine high-society & pristine peaks", rating: 4.9, weather: "-2°C Snowy", }, { id: "serengeti", name: "Serengeti", country: "Tanzania", image: "https://images.unsplash.com/photo-1516426122078-c23e76319801?auto=format&fit=crop&w=800&q=80", tagline: "Untamed wilderness & luxury lodges", rating: 4.7, weather: "28°C Breezy", }, ]; // --- MOCK DATA GENERATOR --- interface ItineraryItem { time: string; title: string; description: string; type: "flight" | "hotel" | "restaurant" | "activity"; location: string; cost: string; } interface DayPlan { day: number; theme: string; activities: ItineraryItem[]; } interface Trip { id: string; destination: string; startDate: string; endDate: string; budget: string; style: string; interests: string[]; image: string; days: DayPlan[]; packingList: { id: string; item: string; checked: boolean }[]; groupMembers: { name: string; avatar: string; role: string }[]; isPremium: boolean; } const DEFAULT_TRIPS: Trip[] = [ { id: "trip-amalfi-1", destination: "Amalfi Coast, Italy", startDate: "2025-06-15", endDate: "2025-06-18", budget: "Ultra-Luxe", style: "Relaxed Cultural", interests: ["Gastronomy", "Sailing", "History"], image: DESTINATIONS[0].image, days: [ { day: 1, theme: "Arrival & Cliffside Sunset", activities: [ { time: "14:00", title: "Private Yacht Transfer", description: "Arrive in Positano via private luxury charter from Naples.", type: "flight", location: "Naples Port", cost: "Included" }, { time: "16:00", title: "Check-in at Le Sirenuse", description: "Settle into your sea-view suite at the legendary cliffside hotel.", type: "hotel", location: "Positano", cost: "Included" }, { time: "20:00", title: "Dinner at La Sponda", description: "Michelin-starred dining illuminated by 400 candles.", type: "restaurant", location: "Le Sirenuse", cost: "€250/pp" } ] }, { day: 2, theme: "Capri & Blue Grotto Cruise", activities: [ { time: "09:30", title: "Riva Boat Excursion", description: "Private full-day cruise around Capri, exploring hidden coves.", type: "activity", location: "Positano Pier", cost: "€1,200" }, { time: "13:00", title: "Lunch at Il Riccio", description: "Seafood feast overlooking the Blue Grotto.", type: "restaurant", location: "Anacapri", cost: "€150/pp" }, { time: "17:00", title: "Anacapri Exploration", description: "Stroll through quiet historic streets and visit Villa San Michele.", type: "activity", location: "Anacapri", cost: "Free" } ] } ], packingList: [ { id: "p1", item: "Linen shirts & summer dresses", checked: true }, { id: "p2", item: "Polarized sunglasses", checked: true }, { id: "p3", item: "Yacht-appropriate footwear", checked: false }, { id: "p4", item: "Italian phrasebook", checked: false } ], groupMembers: [ { name: "Elena Rostova", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=100&q=80", role: "Organizer" }, { name: "Julian Vance", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80", role: "Contributor" } ], isPremium: true } ]; function generateMockItinerary(destination: string, budget: string, style: string, startDate: string, endDate: string, interests: string[]): Trip { const daysCount = 3; // default for mock const image = DESTINATIONS.find(d => d.name.toLowerCase().includes(destination.toLowerCase()))?.image || "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=800&q=80"; const days: DayPlan[] = Array.from({ length: daysCount }).map((_, i) => ({ day: i + 1, theme: i === 0 ? "Arrival & Orientation" : i === 1 ? "Deep Exploration" : "Leisure & Departure", activities: [ { time: "09:00", title: i === 0 ? "Welcome Reception" : "Curated Local Tour", description: `Premium bespoke experience tailored to your ${style} style.`, type: i === 0 ? "flight" : "activity", location: destination, cost: budget === "Ultra-Luxe" ? "Premium Included" : "Moderate" }, { time: "13:00", title: "Gastronomic Highlight", description: `Fine dining centered around local ${interests[0] || "culture"} specialties.`, type: "restaurant", location: `${destination} Center`, cost: budget === "Ultra-Luxe" ? "€180/pp" : "€45/pp" }, { time: "16:00", title: "Signature Retreat", description: "Afternoon curated leisure or wellness experience.", type: "hotel", location: destination, cost: "Included" } ] })); return { id: `trip-${Date.now()}`, destination, startDate, endDate, budget, style, interests, image, days, packingList: [ { id: "p1", item: "Travel documents & passport", checked: true }, { id: "p2", item: "Smart-casual dinner attire", checked: false }, { id: "p3", item: "Comfortable walking shoes", checked: false } ], groupMembers: [ { name: "You", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80", role: "Creator" } ], isPremium: budget === "Ultra-Luxe" }; } // --- APP SHELL & ROUTING --- export default function App() { const [trips, setTrips] = useState(() => { const saved = localStorage.getItem("tripflow_trips"); return saved ? JSON.parse(saved) : DEFAULT_TRIPS; }); const [isLuxeUser, setIsLuxeUser] = useState(() => { return localStorage.getItem("tripflow_luxe") === "true"; }); useEffect(() => { localStorage.setItem("tripflow_trips", JSON.stringify(trips)); }, [trips]); const handleAddTrip = (newTrip: Trip) => { setTrips(prev => [newTrip, ...prev]); toast.success(`Itinerary for ${newTrip.destination} generated successfully!`); }; const handleDeleteTrip = (id: string) => { setTrips(prev => prev.filter(t => t.id !== id)); toast.info("Trip removed from your flow."); }; const handleToggleLuxe = () => { const next = !isLuxeUser; setIsLuxeUser(next); localStorage.setItem("tripflow_luxe", String(next)); if (next) { toast.success("Welcome to TripFlow Luxe Elite Tier!"); } else { toast.info("Subscription downgraded to Standard."); } }; return (

{/* Main Content Area */}

} /> } /> } /> } /> } /> } /> {/* Persistent Bottom Nav */}

); } // --- BOTTOM NAV COMPONENT --- function BottomNav() { const location = useLocation(); const navItems = [ { path: "/", label: "Explore", icon: Compass }, { path: "/plan", label: "AI Plan", icon: Sparkles, highlight: true }, { path: "/saved", label: "My Trips", icon: Heart }, { path: "/profile", label: "Luxe", icon: User }, ]; return (

{navItems.map((item) => { const Icon = item.icon; const isActive = location.pathname === item.path || (item.path === "/plan" && location.pathname.startsWith("/plan")); return ( {item.highlight ? (

) : ( <> {item.label} {isActive && ( )} )} ); })}

); } // --- SCREEN 1: EXPLORE / DISCOVER --- function ExploreScreen({ trips }: { trips: Trip[] }) { const navigate = useNavigate(); const activeTrip = trips[0]; return (

{/* Brand Header */}

Welcome to

TripFlow

{/* Active Trip Banner */} {activeTrip && (

Current Flow

View Itinerary

navigate(`/itinerary/${activeTrip.id}`)} className="relative h-48 rounded-2xl overflow-hidden cursor-pointer group shadow-lg" >

{ e.currentTarget.src = "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=800&q=80"; }} />

{activeTrip.style} • {activeTrip.budget}

{activeTrip.destination}

{activeTrip.startDate} to {activeTrip.endDate}

)} {/* Hero CTA */}

Where shall we flow next?

Let our bespoke AI craft an ultra-personalized, luxury itinerary tailored to your exact style.

{/* Curated Destinations */}

Curated Inspirations

{DESTINATIONS.map((dest) => (

{ navigate("/plan", { state: { destination: `${dest.name}, ${dest.country}` } }); toast.info(`Selected ${dest.name} as destination!`); }} className="group cursor-pointer bg-white rounded-xl overflow-hidden border border-[#E6DFD3]/30 hover:border-[#0F172A]/20 transition-all shadow-sm" >

{ e.currentTarget.src = "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=800&q=80"; }} /> ★ {dest.rating}

{dest.name}

{dest.tagline}

{dest.weather} Plan →

))}

); } // --- SCREEN 2: AI PLANNER WIZARD --- function PlanScreen({ onAddTrip, isLuxe }: { onAddTrip: (trip: Trip) => void; isLuxe: boolean }) { const navigate = useNavigate(); const location = useLocation(); // Form States const [destination, setDestination] = useState(location.state?.destination || ""); const [startDate, setStartDate] = useState("2025-06-15"); const [endDate, setEndDate] = useState("2025-06-18"); const [budget, setBudget] = useState("Premium"); const [style, setStyle] = useState("Relaxed"); const [selectedInterests, setSelectedInterests] = useState([]); const [isGenerating, setIsGenerating] = useState(false); const [step, setStep] = useState(1); const interestOptions = ["Gastronomy", "Sailing", "History", "Wellness", "Art & Design", "Adventure"]; const handleToggleInterest = (interest: string) => { setSelectedInterests(prev => prev.includes(interest) ? prev.filter(i => i !== interest) : [...prev, interest] ); }; const handleGenerate = () => { if (!destination) { toast.error("Please specify a destination."); return; } setIsGenerating(true); // Simulate AI generation delay setTimeout(() => { const newTrip = generateMockItinerary(destination, budget, style, startDate, endDate, selectedInterests); onAddTrip(newTrip); setIsGenerating(false); navigate(`/itinerary/${newTrip.id}`); }, 2500); }; return (

{/* Header */}

AI Travel Architect

Design your bespoke travel flow with precision.

{isGenerating ? (

Curating Your Perfect Flow

Analyzing luxury stays, bespoke local guides, and optimal routes for {destination}...

) : (

{/* Progress Indicator */}

Step {step} of 3

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

))}

{step === 1 && (

Destination

setDestination(e.target.value)} className="w-full pl-11 pr-4 py-3 bg-white border border-[#E6DFD3] rounded-xl text-sm focus:outline-none focus:border-[#0F172A] transition-all" />

Start Date setStartDate(e.target.value)} className="w-full px-3 py-3 bg-white border border-[#E6DFD3] rounded-xl text-sm focus:outline-none focus:border-[#0F172A] transition-all" />

End Date setEndDate(e.target.value)} className="w-full px-3 py-3 bg-white border border-[#E6DFD3] rounded-xl text-sm focus:outline-none focus:border-[#0F172A] transition-all" />

)} {step === 2 && (

Budget Tier

{[ { label: "Bespoke", val: "Bespoke", desc: "Curated" }, { label: "Premium", val: "Premium", desc: "First Class" }, { label: "Ultra-Luxe", val: "Ultra-Luxe", desc: "Private Jet" } ].map((b) => ( ))}

Travel Style

{["Relaxed", "Active Explorer", "Cultural Immersion", "Culinary Focus"].map((s) => ( ))}

)} {step === 3 && (

Select Interests

{interestOptions.map((interest) => { const isSelected = selectedInterests.includes(interest); return ( ); })}

Luxe AI Optimizer

{isLuxe ? "Luxe tier active. Your itinerary will include exclusive private transfers, Michelin-starred reservations, and priority VIP access." : "Upgrade to Luxe to unlock private yachts, Michelin reservations, and unlimited personalized adjustments."}

)}

); } // --- SCREEN 3: DETAILED ITINERARY --- function ItineraryScreen({ trips, setTrips }: { trips: Trip[]; setTrips: React.Dispatch> }) { const { id } = useParams(); const navigate = useNavigate(); const trip = trips.find(t => t.id === id); const [activeTab, setActiveTab] = useState<"itinerary" | "stays" | "packing" | "group">("itinerary"); const [activeDay, setActiveDay] = useState(1); const [showShareModal, setShowShareModal] = useState(false); const [inviteEmail, setInviteEmail] = useState(""); const [newPackingItem, setNewPackingItem] = useState(""); if (!trip) { return (

Itinerary Not Found

This travel flow may have been removed or archived.

Return to Explore

); } // Handle Packing Toggle const handleTogglePacking = (itemId: string) => { setTrips(prev => prev.map(t => { if (t.id === trip.id) { return { ...t, packingList: t.packingList.map(p => p.id === itemId ? { ...p, checked: !p.checked } : p) }; } return t; })); }; // Handle Add Packing Item const handleAddPackingItem = (e: React.FormEvent) => { e.preventDefault(); if (!newPackingItem.trim()) return; setTrips(prev => prev.map(t => { if (t.id === trip.id) { return { ...t, packingList: [...t.packingList, { id: `p-${Date.now()}`, item: newPackingItem, checked: false }] }; } return t; })); setNewPackingItem(""); toast.success("Item added to packing list."); }; // Handle Group Invite const handleSendInvite = (e: React.FormEvent) => { e.preventDefault(); if (!inviteEmail.trim()) return; setTrips(prev => prev.map(t => { if (t.id === trip.id) { return { ...t, groupMembers: [...t.groupMembers, { name: inviteEmail.split("@")[0], avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=100&q=80", role: "Contributor" }] }; } return t; })); setInviteEmail(""); setShowShareModal(false); toast.success("Invitation flow shared successfully!"); }; return (

{/* Hero Banner */}

{ e.currentTarget.src = "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=800&q=80"; }} />

{trip.budget} {trip.isPremium && ( Luxe )}

{trip.destination}

{trip.startDate} to {trip.endDate}

{/* Tabs */}

{[ { id: "itinerary", label: "Itinerary", icon: MapIcon }, { id: "stays", label: "Stays & Flights", icon: Hotel }, { id: "packing", label: "Packing", icon: CheckSquare }, { id: "group", label: "Group", icon: Users } ].map((tab) => { const Icon = tab.icon; const isActive = activeTab === tab.id; return ( ); })}

{/* Tab Contents */}

{activeTab === "itinerary" && (

{/* Weather Widget */}

Destination Weather

Perfect conditions for outdoor dining & yachting.

24°C

{/* Day Selector */}

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

{/* Timeline */}

{trip.days.find(d => d.day === activeDay)?.activities.map((act, index) => { const Icon = act.type === "flight" ? Plane : act.type === "hotel" ? Hotel : act.type === "restaurant" ? Utensils : Camera; return (

{/* Timeline Dot */}

{act.time} • {act.cost}

{act.title}

{act.description}

{act.location}

); })}

)} {activeTab === "stays" && (

Curated Accommodations

{ event.currentTarget.onerror = null; event.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23f4f4f5'/%3E%3Cstop offset='1' stop-color='%23d4d4d8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' rx='48' fill='url(%23g)'/%3E%3Cpath d='M330 540 520 350l126 126 80-92 160 156H330Z' fill='%23a1a1aa'/%3E%3Ccircle cx='804' cy='286' r='56' fill='%23c4c4cc'/%3E%3C/svg%3E"; }} />

Recommended Stay

Grand Hotel Excelsior

Elite sea-view suite with private terrace.

Status: Reserved

Private Transfers & Flights

Flight Flow

Lufthansa LH1902

Business Class • Seat 2D, 2F

Departs: 08:15 AM

)} {activeTab === "packing" && (

Essential Packing List

{trip.packingList.map((item) => (

handleTogglePacking(item.id)} className="flex items-center justify-between p-3 rounded-xl border border-[#E6DFD3]/30 bg-white cursor-pointer hover:bg-[#E6DFD3]/10 transition-all" > {item.item}

{item.checked && }

))}

)} {activeTab === "group" && (

Co-Planners

{trip.groupMembers.map((member, idx) => (

{member.name}

{member.role}

Active

))}

Shared Live Flow

All group members can view real-time changes, vote on daily activities, and sync flight details automatically.

)}

{/* Share / Invite Modal */} {showShareModal && (

Invite Co-Planner

Share this beautiful travel flow with your companions.

)}

); } // --- SCREEN 4: SAVED TRIPS & FLOWS --- function SavedScreen({ trips, onDeleteTrip }: { trips: Trip[]; onDeleteTrip: (id: string) => void }) { const navigate = useNavigate(); return (

My Travel Flows

Your curated journeys and active plans.

{trips.length === 0 ? (

No trips saved yet

Start planning with our AI to build your dream luxury travel flow.

Plan a Trip

) : (

{trips.map((trip) => (

{ e.currentTarget.src = "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=800&q=80"; }} />

{trip.style}

{trip.destination}

{trip.startDate}

{trip.days.length} Days • {trip.budget}

))}

)}

); } // --- SCREEN 5: PROFILE & LUXE TIER --- function ProfileScreen({ isLuxe, onToggleLuxe }: { isLuxe: boolean; onToggleLuxe: () => void }) { return (

{/* Header */}

{isLuxe && (

)}

Victoria Rostova

Elite Member since 2024

{/* Subscription Card */}

TripFlow Luxe

Unlock Ultimate Travel Freedom

Get unlimited AI travel plans, luxury private yacht charters, Michelin-starred reservation assistance, and dedicated elite concierge support.

{/* Preferences & Settings */}

Flow Preferences

{[ { label: "Preferred Airline", val: "Lufthansa / Singapore Airlines" }, { label: "Hotel Style", val: "Bespoke Boutique & Heritage Resorts" }, { label: "Dietary Notes", val: "Organic, Gluten-Free Options Preferred" } ].map((pref, i) => (

{pref.label} {pref.val}

))}

); }