import React, { useState, useEffect, useRef } from 'react'; import { Car, Calendar, Clock, MapPin, Shield, Star, Users, Briefcase, ChevronRight, ArrowRight, Check, Phone, Mail, Award, ThumbsUp, Globe, Info, DollarSign, CreditCard, ChevronLeft, Send, Sparkles, MessageSquare, X, Menu, Settings, CheckCircle, Search, Compass, Trash, Music, Thermometer, Coffee, Eye, FileText, Clipboard, RefreshCw } from 'lucide-react'; // --- FLEET DATA --- const FLEET_CARS = [ { id: 's-class', name: 'Mercedes-Benz S-Class', type: 'sedan', class: 'First Class', tagline: 'The pinnacle of luxury engineering and cabin comfort.', passengers: 4, luggage: 3, hourlyRate: 125, mileRate: 4.50, baseFee: 60, amenities: ['Champagne Chiller', 'Burmester 3D Sound', 'Rear Executive Reclining Seats', 'Complimentary Wi-Fi', 'Bottled Evian'], image: 'https://images.unsplash.com/photo-1617531653332-bd46c24f2068?auto=format&fit=crop&q=80&w=800' }, { id: 'escalade', name: 'Cadillac Escalade ESV', type: 'suv', class: 'Luxury SUV', tagline: 'Imposing road presence paired with spacious, quiet elegance.', passengers: 7, luggage: 6, hourlyRate: 150, mileRate: 5.50, baseFee: 80, amenities: ['Active Noise Cancellation', 'Panoramic Roof', 'Massaging Leather Seats', 'Complimentary Wi-Fi', 'Premium Refreshments'], image: 'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&q=80&w=800' }, { id: 'sprinter', name: 'Mercedes-Benz Sprinter Executive', type: 'van', class: 'Sprinter Class', tagline: 'A private mobile boardroom designed for high-profile group travel.', passengers: 14, luggage: 12, hourlyRate: 195, mileRate: 7.00, baseFee: 120, amenities: ['Full Standing Headroom', 'Dual Smart LED TVs', 'Meeting Layout/Captain Chairs', 'HDMI & USB Hubs', 'Full Mini Bar'], image: 'https://images.unsplash.com/photo-1542282088-fe8426682b8f?auto=format&fit=crop&q=80&w=800' }, { id: 'rolls-ghost', name: 'Rolls-Royce Ghost', type: 'sedan', class: 'VIP Royal Class', tagline: 'Whisper-quiet locomotion with peerless hand-crafted grandeur.', passengers: 4, luggage: 3, hourlyRate: 350, mileRate: 12.00, baseFee: 250, amenities: ['Starlight Fiber-Optic Roof', 'Lambswool Carpets', 'Hand-stitched Leather', 'Whisper Cabin Tech', 'Elite VIP Chauffeur'], image: 'https://images.unsplash.com/photo-1632245889027-e406faaa19ee?auto=format&fit=crop&q=80&w=800' }, { id: 'range-rover', name: 'Range Rover Autobiography', type: 'suv', class: 'Luxury SUV', tagline: 'Refined performance that handles any season in absolute style.', passengers: 4, luggage: 4, hourlyRate: 165, mileRate: 6.00, baseFee: 90, amenities: ['All-Terrain Response', 'Panoramic Glass Sunroof', 'Rear Seat Entertainment', 'Executive Climate Control', 'Chilled Console Box'], image: 'https://images.unsplash.com/photo-1606016159991-dfe4f2746ad5?auto=format&fit=crop&q=80&w=800' } ]; // --- SERVICES DATA --- const SERVICES = [ { title: 'Airport Transfers', description: 'Stress-free pick-up with flight tracking, professional greeting, and full baggage handling at major commercial and private aviation hubs.', icon: Globe, image: 'https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&q=80&w=600' }, { title: 'Hourly & Chauffeur Hailing', description: 'Keep a premium vehicle and elite chauffeur at your disposal for business meetings, running errands, or customized itinerary routes.', icon: Clock, image: 'https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?auto=format&fit=crop&q=80&w=600' }, { title: 'Intercity Rides', description: 'A luxurious alternative to commuter flights or train transit. Travel between cities in extreme comfort with onboard Wi-Fi and silent cabins.', icon: Compass, image: 'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&q=80&w=600' }, { title: 'Wedding & Gala transport', description: 'Flawlessly coordinated luxury fleets to ensure the bridal party, VIPs, and distinguished guests arrive in magnificent elegance.', icon: Star, image: 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&q=80&w=600' } ]; // --- LUXURY EXTRAS --- const EXTRAS_LIST = [ { id: 'meet-greet', name: 'Elite Meet & Greet Service', price: 30, desc: 'Chauffeur meets you inside the terminal with a personalized digital iPad nameboard, assisting with all baggage from baggage claim.' }, { id: 'champagne', name: 'Veuve Clicquot Brut Champagne', price: 95, desc: 'A perfectly chilled bottle of premium French Champagne waiting in the rear console alongside crystalline flutes.' }, { id: 'child-seat', name: 'Executive Child Safety Seat', price: 15, desc: 'Premium multi-adjustable child safety seat pre-installed and certified to local safety regulations.' }, { id: 'discreet', name: 'Fully Discreet Service (No Badges)', price: 0, desc: 'Unmarked luxury vehicle. Chauffeur maintains absolute security protocols and does not wear branding badges.' }, { id: 'pet', name: 'Pet Travel Comfort Package', price: 25, desc: 'Includes luxury leather protector mats, water bowl, and healthy treats for your canine or feline companion.' } ]; // --- MOCK AIRPORT FLAT RATES --- const FLAT_RATES = [ { id: 'jfk-manhattan', label: 'JFK Airport ⇄ Manhattan NYC', distance: 18, baseCost: 140 }, { id: 'lax-beverly', label: 'LAX Airport ⇄ Beverly Hills', distance: 14, baseCost: 120 }, { id: 'lhr-london', label: 'Heathrow ⇄ Central London', distance: 20, baseCost: 160 }, { id: 'cdg-paris', label: 'Charles de Gaulle ⇄ Central Paris', distance: 22, baseCost: 150 } ]; // --- MOCK REVIEWS --- const REVIEWS = [ { name: 'Sir Jonathan Vance', role: 'Managing Partner, Vance & Co.', text: 'The standard of service is incomparable. Cleanliness, punctuality, and chauffeur discretion exceed even the finest hotels. LuxRide remains our exclusive global transportation partner.', rating: 5, avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=200' }, { name: 'Evelyn Sterling', role: 'Lead Coordinator, Sterling Gala Events', text: 'We utilized the Mercedes Sprinter fleet for a diplomatic visit. Absolute perfection from the dispatcher planning to the polished, multilingual chauffeurs. Cannot recommend highly enough.', rating: 5, avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=200' }, { name: 'Alexander Rostova', role: 'Private Client, London', text: 'The Rolls-Royce Ghost was impeccable, but it was the professional deportment of Chauffeur Michael that made our wedding anniversary truly unforgettable. Excellent and seamless.', rating: 5, avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=200' } ]; // --- HELPER FOR GEMINI RETRIES (Rule-following and robust) --- const callGeminiWithRetry = async (userPrompt, systemInstruction) => { const apiKey = ""; // The execution environment provides the key at runtime const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`; const payload = { contents: [{ parts: [{ text: userPrompt }] }], systemInstruction: { parts: [{ text: systemInstruction }] } }; let delay = 1000; for (let attempt = 1; attempt <= 5; attempt++) { try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (response.ok) { const result = await response.json(); const text = result.candidates?.[0]?.content?.parts?.[0]?.text; if (text) return text; } } catch (e) { // Quietly allow retry } if (attempt < 5) { await new Promise(resolve => setTimeout(resolve, delay)); delay *= 2; } } throw new Error("Unable to establish communication channel with luxury AI servers."); }; export default function App() { // --- STATE --- const [currentTab, setCurrentTab] = useState('home'); // 'home' | 'fleet' | 'services' | 'bookings' const [currency, setCurrency] = useState('USD'); // 'USD' | 'EUR' | 'GBP' const [activeFleetTab, setActiveFleetTab] = useState('all'); // 'all' | 'sedan' | 'suv' | 'van' // Booking Wizard States const [bookingStep, setBookingStep] = useState(1); // 1: Details, 2: Vehicles, 3: Extras, 4: Summary/Billing, 5: Success const [serviceType, setServiceType] = useState('distance'); // 'distance' | 'hourly' | 'flat' const [pickup, setPickup] = useState(''); const [dropoff, setDropoff] = useState(''); const [flatRouteId, setFlatRouteId] = useState(FLAT_RATES[0].id); const [bookingDate, setBookingDate] = useState(() => { const today = new Date(); today.setDate(today.getDate() + 1); return today.toISOString().split('T')[0]; }); const [bookingTime, setBookingTime] = useState('12:00'); const [hourlyDuration, setHourlyDuration] = useState(3); // Default 3 hours const [selectedVehicle, setSelectedVehicle] = useState(null); const [selectedExtras, setSelectedExtras] = useState([]); const [couponCode, setCouponCode] = useState(''); const [couponApplied, setCouponApplied] = useState(false); const [couponDiscount, setCouponDiscount] = useState(0); // decimal const [promoError, setPromoError] = useState(''); // Customer Info const [customerName, setCustomerName] = useState(''); const [customerEmail, setCustomerEmail] = useState(''); const [customerPhone, setCustomerPhone] = useState(''); const [customerNotes, setCustomerNotes] = useState(''); const [ccNumber, setCcNumber] = useState(''); const [ccExpiry, setCcExpiry] = useState(''); const [ccCvc, setCcCvc] = useState(''); // Interactive UI const [isProcessing, setIsProcessing] = useState(false); const [confirmedBookingId, setConfirmedBookingId] = useState(''); const [assignedDriver, setAssignedDriver] = useState(null); const [showNotification, setShowNotification] = useState(null); const [historyBookings, setHistoryBookings] = useState([]); // Auto-suggestions simulation const [pickupSuggestions, setPickupSuggestions] = useState([]); const [dropoffSuggestions, setDropoffSuggestions] = useState([]); const [showPickupList, setShowPickupList] = useState(false); const [showDropoffList, setShowDropoffList] = useState(false); // Theme support (Always luxury dark background, but styling toggles) const [isClassicGold, setIsClassicGold] = useState(true); // true: Gold/Brass accent, false: Ice Platinum accent // AI Concierge Chat State const [chatOpen, setChatOpen] = useState(false); const [chatMessages, setChatMessages] = useState([ { sender: 'assistant', text: "Greetings. I am Genevieve, your private digital concierge. I am here to assist with booking, fleet recommendations, or answering queries about our world-class luxury chauffeur services. How may I accommodate you today?", time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) } ]); const [chatInput, setChatInput] = useState(''); const [chatLoading, setChatLoading] = useState(false); const messagesEndRef = useRef(null); // --- NEW AI LLM-POWERED FEATURES STATES --- // A: Ambient Cabin Vibe Curator const [cabinVibeInput, setCabinVibeInput] = useState(''); const [curatedAmbience, setCuratedAmbience] = useState(null); const [curatingAmbienceLoading, setCuratingAmbienceLoading] = useState(false); // B: Bespoke VIP Day-Itinerary const [itineraryResult, setItineraryResult] = useState(''); const [generatingItinerary, setGeneratingItinerary] = useState(false); // C: Arrival Notice Drafter const [arrivalNotice, setArrivalNotice] = useState(''); const [generatingNotice, setGeneratingNotice] = useState(false); // Map Animation simulation const [mapPercentage, setMapPercentage] = useState(0); const [mapRunning, setMapRunning] = useState(false); // Currency factors const currencies = { USD: { symbol: '$', rate: 1 }, EUR: { symbol: '€', rate: 0.92 }, GBP: { symbol: '£', rate: 0.79 } }; const { symbol: curSymbol, rate: curRate } = currencies[currency]; const formatPrice = (usdVal) => { return `${curSymbol}${(usdVal * curRate).toFixed(0)}`; }; // --- MOCK AUTOCOMPLETE ADDRESSES --- const MOCK_ADDRESSES = [ 'JFK International Airport (Terminal 4)', 'LAX International Airport (Private Suite Lounge)', 'The Ritz-Carlton, Central Park NYC', 'The Beverly Hills Hotel, Sunset Blvd', 'Plaza Athénée, Avenue Montaigne Paris', 'Heathrow Airport, Terminal 5 VIP Suite', 'The Savoy, Strand, London WC2R', 'Lower Manhattan Financial District', 'SoHo Boutique Shopping District', 'Billionaires Row, 57th St Penthouse' ]; useEffect(() => { if (chatOpen) { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); } }, [chatMessages, chatOpen]); // Simulate Map Travel useEffect(() => { let interval; if (mapRunning) { interval = setInterval(() => { setMapPercentage((prev) => { if (prev >= 100) { return 0; // Loop } return prev + 1.5; }); }, 50); } else { setMapPercentage(0); } return () => clearInterval(interval); }, [mapRunning]); // Handle address input typing const handlePickupChange = (val) => { setPickup(val); if (val.trim().length > 1) { const filtered = MOCK_ADDRESSES.filter(addr => addr.toLowerCase().includes(val.toLowerCase()) ); setPickupSuggestions(filtered); setShowPickupList(true); } else { setPickupSuggestions([]); setShowPickupList(false); } }; const handleDropoffChange = (val) => { setDropoff(val); if (val.trim().length > 1) { const filtered = MOCK_ADDRESSES.filter(addr => addr.toLowerCase().includes(val.toLowerCase()) ); setDropoffSuggestions(filtered); setShowDropoffList(true); } else { setDropoffSuggestions([]); setShowDropoffList(false); } }; const selectPickup = (val) => { setPickup(val); setShowPickupList(false); triggerAlert(`Selected Pickup: ${val}`); if (dropoff) setMapRunning(true); }; const selectDropoff = (val) => { setDropoff(val); setShowDropoffList(false); triggerAlert(`Selected Dropoff: ${val}`); if (pickup) setMapRunning(true); }; const triggerAlert = (msg) => { setShowNotification(msg); setTimeout(() => { setShowNotification(null); }, 4000); }; // Distance estimation based on addresses or defaults const getEstimatedDistance = () => { if (serviceType === 'flat') { const route = FLAT_RATES.find(r => r.id === flatRouteId); return route ? route.distance : 15; } if (pickup && dropoff) { // Return pseudo deterministic distance const combinedLength = pickup.length + dropoff.length; return (combinedLength % 25) + 8; // Between 8 and 33 miles } return 15; // default estimate }; // --- CALCULATION OF FARES --- const calculateCarQuote = (car) => { let total = 0; if (serviceType === 'hourly') { total = (car.hourlyRate * hourlyDuration) + car.baseFee; } else if (serviceType === 'distance') { const dist = getEstimatedDistance(); total = car.baseFee + (dist * car.mileRate); } else { // Flat Rate const route = FLAT_RATES.find(r => r.id === flatRouteId); const baseRouteCost = route ? route.baseCost : 120; // Class modifiers const modifier = car.id === 'rolls-ghost' ? 2.5 : car.id === 'sprinter' ? 1.5 : car.id === 'escalade' ? 1.25 : 1.0; total = baseRouteCost * modifier; } return Math.round(total); }; const calculateExtrasTotal = () => { return selectedExtras.reduce((sum, extraId) => { const extra = EXTRAS_LIST.find(e => e.id === extraId); return sum + (extra ? extra.price : 0); }, 0); }; const calculateGrandTotal = () => { if (!selectedVehicle) return 0; const base = calculateCarQuote(selectedVehicle); const extras = calculateExtrasTotal(); const subtotal = base + extras; const discountAmount = subtotal * couponDiscount; return Math.round(subtotal - discountAmount); }; // --- PROMO CODE --- const applyPromo = () => { const code = couponCode.trim().toUpperCase(); if (code === 'LUXRIDE15' || code === 'WELCOME') { setCouponApplied(true); setCouponDiscount(0.15); // 15% off setPromoError(''); triggerAlert('Elegant 15% VIP discount applied successfully!'); } else if (code === 'ROYAL') { setCouponApplied(true); setCouponDiscount(0.20); // 20% off setPromoError(''); triggerAlert('Royal concierge 20% discount applied!'); } else if (code === '') { setPromoError('Please type a code'); } else { setPromoError('Invalid luxury promotional code'); setCouponApplied(false); setCouponDiscount(0); } }; const removePromo = () => { setCouponApplied(false); setCouponDiscount(0); setCouponCode(''); }; // --- GO TO NEXT STEPS --- const handleProceedToFleet = () => { if (serviceType !== 'flat' && !pickup) { triggerAlert('Please provide a luxury pick-up location.'); return; } if (serviceType === 'distance' && !dropoff) { triggerAlert('Please provide a secure drop-off destination.'); return; } setBookingStep(2); }; const handleSelectCar = (car) => { setSelectedVehicle(car); setBookingStep(3); triggerAlert(`Reserved ${car.name} class. Excellent selection.`); }; const handleToggleExtra = (id) => { if (selectedExtras.includes(id)) { setSelectedExtras(prev => prev.filter(e => e !== id)); } else { setSelectedExtras(prev => [...prev, id]); } }; // --- SUBMIT FINAL BOOKING --- const handleFinalCheckout = (e) => { e.preventDefault(); if (!customerName || !customerEmail || !customerPhone) { triggerAlert('Please fill out all mandatory guest information.'); return; } if (!ccNumber || !ccExpiry || !ccCvc) { triggerAlert('Secured payment card credentials are required.'); return; } setIsProcessing(true); // Simulate luxury processing timers setTimeout(() => { const generatedId = 'LR-' + Math.floor(100000 + Math.random() * 900000); const chauffeurs = [ { name: 'Michael Vance', rating: 4.9, avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=200', phone: '+1 (555) 302-8812' }, { name: 'Arthur Pendelton', rating: 5.0, avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=200', phone: '+1 (555) 902-1249' }, { name: 'Clarissa Sterling', rating: 4.9, avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=200', phone: '+1 (555) 831-2940' } ]; const randomChauffeur = chauffeurs[Math.floor(Math.random() * chauffeurs.length)]; const newBooking = { id: generatedId, date: bookingDate, time: bookingTime, serviceType, pickup: serviceType === 'flat' ? FLAT_RATES.find(r => r.id === flatRouteId).label.split('⇄')[0] : pickup, dropoff: serviceType === 'flat' ? FLAT_RATES.find(r => r.id === flatRouteId).label.split('⇄')[1] : (serviceType === 'hourly' ? `Chauffeur Hired (${hourlyDuration} Hours)` : dropoff), vehicle: selectedVehicle, extras: selectedExtras.map(id => EXTRAS_LIST.find(e => e.id === id).name), total: calculateGrandTotal(), status: 'Confirmed & Chauffeur En Route', driver: randomChauffeur }; setConfirmedBookingId(generatedId); setAssignedDriver(randomChauffeur); setHistoryBookings(prev => [newBooking, ...prev]); setIsProcessing(false); setBookingStep(5); triggerAlert('Your elite Chauffeur booking has been secured!'); }, 3000); }; const resetBookingWizard = () => { setBookingStep(1); setSelectedVehicle(null); setSelectedExtras([]); setPickup(''); setDropoff(''); setCouponApplied(false); setCouponDiscount(0); setCouponCode(''); setCustomerName(''); setCustomerEmail(''); setCustomerPhone(''); setCabinVibeInput(''); setCuratedAmbience(null); setItineraryResult(''); setArrivalNotice(''); setCustomerNotes(''); setCcNumber(''); setCcExpiry(''); setCcCvc(''); setMapRunning(false); }; // --- GEMINI: AI CONCIERGE CHAT --- const handleSendChatMessage = async (e) => { if (e) e.preventDefault(); if (!chatInput.trim()) return; const userText = chatInput; setChatInput(''); // Add user message to screen const userMsg = { sender: 'user', text: userText, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; setChatMessages(prev => [...prev, userMsg]); setChatLoading(true); const systemPrompt = `You are 'Genevieve', the elite virtual concierge for LuxRide, a global luxury limousine, private aviation transport, and prestige chauffeur service. You speak with high society manners, sophistication, absolute politeness, and high-end hospitality. Keep your answers highly professional, reasonably brief, clear, and reassuring. Always maintain an ultra-premium tone. Refer to the active vehicles we offer: - Mercedes-Benz S-Class (First Class sedan: $125/hr) - Cadillac Escalade ESV (Luxury SUV: $150/hr) - Mercedes-Benz Sprinter Executive (Sprinter Class Van: $195/hr) - Rolls-Royce Ghost (VIP Royal Class: $350/hr) - Range Rover Autobiography (Luxury SUV: $165/hr) Suggest specific luxury extras (Champagne, Terminal Meet & Greet, child safety seats, discreet mode) when appropriate.`; try { const response = await callGeminiWithRetry(userText, systemPrompt); setChatMessages(prev => [...prev, { sender: 'assistant', text: response, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }]); } catch (error) { const fallbackReply = "I am at your service. Our fleet of pristine Mercedes S-Class and Rolls-Royce vehicles with professional chauffeurs are at your full disposal. You may use our custom booking panel directly on the main screen to secure your ride in just minutes."; setChatMessages(prev => [...prev, { sender: 'assistant', text: fallbackReply, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }]); } finally { setChatLoading(false); } }; // --- GEMINI: AI AMBIENT CABIN VIBE CURATOR --- const handleCurateCabinAmbience = async () => { if (!cabinVibeInput.trim()) return; setCuratingAmbienceLoading(true); const systemInstruction = `You are the AI Onboard Ambience Curator for LuxRide. Based on the guest's state of mind, mood, or travel purpose, output a premium luxury configuration inside the car cabin in JSON format. You must output a raw, clean JSON object with the following exact keys (no markdown packaging, just pure JSON): { "colorCode": "A valid CSS color name/hex suited for premium LED floor & roof lighting", "colorLabel": "A poetical name for the lighting (e.g., 'Warm Sandstone', 'Midnight Sapphire')", "temperature": "A refined, specific temperature (e.g., '69.5°F (20.8°C)')", "aromaSelection": "Bespoke botanical/woodland scents suitable for high-society travel", "massageMode": "Specific luxury therapeutic setting for the executive reclining seats", " refreshmentPairing": "Prestige drinks or snacks waiting chilled in the rear console", "audioRecommendation": "Musical style/ambient soundscape that aligns beautifully with their mood" }`; try { const response = await callGeminiWithRetry(cabinVibeInput, systemInstruction); // Strip out any markdown block wraps if the model returned them const cleanJsonStr = response.replace(/```json/g, '').replace(/```/g, '').trim(); const parsed = JSON.parse(cleanJsonStr); setCuratedAmbience(parsed); triggerAlert("✨ Your bespoke cabin environment is custom-configured."); } catch (error) { // Elegant fallback structure setCuratedAmbience({ colorCode: "#C5A880", colorLabel: "Classic Royal Amber", temperature: "70.0°F (21°C)", aromaSelection: "Madagascan Vanilla & Sandalwood Mists", massageMode: "Soft Shiatsu Spine Traction", refreshmentPairing: "Chilled Elderflower Elixir & Salted Almonds", audioRecommendation: "Ambient Classical Cello & Lo-Fi Neo-Soul fusion" }); } finally { setCuratingAmbienceLoading(false); } }; // --- GEMINI: AI BESPOKE VIP ITINERARY GENERATOR --- const handleGenerateVIPItinerary = async () => { setGeneratingItinerary(true); const systemPrompt = `You are 'Genevieve', elite personal assistant for LuxRide. Build a marvelous, ultra-premium day travel schedule. Focus on absolute luxury. Format your output with clear, beautiful typography: bold titles, clean bullet points, and high-society flair. Tailor it specifically to this ride info: - Pickup: ${pickup || 'Luxury Private Airport'} - Dropoff: ${dropoff || 'High-End Hotel Suite'} - Vehicle Selected: ${selectedVehicle?.name || 'Mercedes S-Class'} Suggest elegant stopovers, boutique fine dining, and elite scenic detours. Keep it under 250 words, yet highly detailed and custom.`; try { const response = await callGeminiWithRetry( `Generate an elite travel itinerary for my trip from ${pickup} to ${dropoff} in my pristine ${selectedVehicle?.name}.`, systemPrompt ); setItineraryResult(response); } catch (error) { setItineraryResult(`### LuxRide Elite Travel Blueprint\n\n* **12:00 PM** — Your pristine ${selectedVehicle?.name || 'Mercedes S-Class'} departs ${pickup || 'Airport Terminal'} in whisper-quiet luxury.\n* **12:30 PM** — High-end detour via the scenic parkways, enjoying complementary chilled beverages.\n* **01:15 PM** — Arrival at ${dropoff || 'The Ritz-Carlton'}. Our Chauffeur manages all luggage arrangements with the hotel concierge directly.\n\n*Safe travels under the LuxRide shield.*`); } finally { setGeneratingItinerary(false); } }; // --- GEMINI: AI ARRIVAL NOTICE GENERATOR --- const handleGenerateArrivalNotice = async () => { setGeneratingNotice(true); const systemPrompt = `You are a high-society personal secretary. Draft an exceptionally polished, ultra-premium text message and email update to notify family or an assistant that the guest is en route. Include details such as: - Passenger: ${customerName || 'VVIP Guest'} - Vehicle: ${selectedVehicle?.name} - ETA details: departing at ${bookingTime} on ${bookingDate} Keep the style refined, professional, and sophisticated. Include a subject line.`; try { const response = await callGeminiWithRetry( `Draft an arrival notice for passenger ${customerName || 'Executive Guest'} who is riding in a ${selectedVehicle?.name} departing at ${bookingTime} on ${bookingDate}.`, systemPrompt ); setArrivalNotice(response); } catch (error) { setArrivalNotice(`**Subject:** VIP Transit Update: ${customerName || 'Guest'} En Route\n\nThis is to confirm that ${customerName || 'our distinguished passenger'} is now en route aboard a pristine ${selectedVehicle?.name || 'Mercedes S-Class'}. Departure was initiated smoothly at ${bookingTime} today. The chauffeur will maintain continuous telemetry and secure arrival protocols.`); } finally { setGeneratingNotice(false); } }; const quickActionMsg = (text) => { setChatInput(text); setTimeout(() => { const mockEvent = { preventDefault: () => {} }; handleSendChatMessage(mockEvent); }, 100); }; const copyToClipboard = (text) => { const dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); triggerAlert("Copied to your clipboard secure ledger."); }; return (
{/* --- FLOATING PREMIUM NOTIFICATION BAR --- */} {showNotification && (

LuxRide VIP System

{showNotification}

)} {/* --- TOP BRAND HEADER BAR --- */}
setCurrentTab('home')}>
LUXRIDE Chauffeur & Limo
{/* --- DESKTOP NAV --- */} {/* --- SETTINGS & CTA --- */}
{/* ==================== HOME PAGE LAYOUT ==================== */} {currentTab === 'home' && (
{/* HERO PRESTIGE AREA */}
{/* HERO LEFT TEXT */}
The Platinum Standard of Ride Excellence

First Class
Chauffeur Service

Experience immaculate private luxury transit. From executive airport dropoffs to hourly state commissions, enjoy meticulously groomed drivers and pristine new-generation vehicles.

{/* Micro Perks Row */}
Flight Tracking Included
Complimentary 60m Wait
Free Cancellation (4h)
Concierge-Trained Drivers
{/* HERO RIGHT: DYNAMIC WIZARD COMPONENT */}
{/* Decorative golden accent bars */}
{/* Wizard Header / Step Indicator */}
Step {bookingStep} of 5 {bookingStep === 1 && 'Transfer Details'} {bookingStep === 2 && 'Class Selection'} {bookingStep === 3 && 'Luxury Accoutrements'} {bookingStep === 4 && 'Confirm & Secure'} {bookingStep === 5 && 'Voucher Ready'}
{/* Progress bars */}
{[1, 2, 3, 4, 5].map((step) => (
= step ? 'bg-amber-500' : 'bg-neutral-800'}`} /> ))}
{/* ================= STEP 1: TRANSFER DETAILS ================= */} {bookingStep === 1 && (
{/* Service Type Tab Selection */}
{/* Input fields based on service type */} {serviceType === 'distance' && (
{/* Pickup Address */}
handlePickupChange(e.target.value)} onFocus={() => setShowPickupList(true)} placeholder="E.g. JFK Airport, Ritz-Carlton, etc..." className="w-full bg-neutral-950 border border-neutral-800 focus:border-amber-500 rounded pl-10 pr-4 py-2.5 text-sm text-stone-200 placeholder-stone-600 outline-none" />
{/* Suggestions Dropdown */} {showPickupList && pickupSuggestions.length > 0 && (
{pickupSuggestions.map((addr, idx) => ( ))}
)}
{/* Drop-off Address */}
handleDropoffChange(e.target.value)} onFocus={() => setShowDropoffList(true)} placeholder="E.g. Penthouse Hotel, Broadway..." className="w-full bg-neutral-950 border border-neutral-800 focus:border-amber-500 rounded pl-10 pr-4 py-2.5 text-sm text-stone-200 placeholder-stone-600 outline-none" />
{/* Suggestions Dropdown */} {showDropoffList && dropoffSuggestions.length > 0 && (
{dropoffSuggestions.map((addr, idx) => ( ))}
)}
)} {serviceType === 'hourly' && (
{/* Pickup Address */}
setPickup(e.target.value)} placeholder="Starting location..." className="w-full bg-neutral-950 border border-neutral-800 focus:border-amber-500 rounded pl-10 pr-4 py-2.5 text-sm text-stone-200 outline-none" />
{/* Hours Slider */}
Hourly Duration {hourlyDuration} Hours
setHourlyDuration(parseInt(e.target.value))} className="w-full accent-amber-500 cursor-pointer" />
Min: 2 hrs Max: 24 hrs (Full-day commissions available)
)} {serviceType === 'flat' && (
)} {/* Date & Time picking */}
setBookingDate(e.target.value)} className="w-full bg-neutral-950 border border-neutral-800 text-stone-300 text-xs rounded pl-9 pr-2 py-2 focus:border-amber-500 outline-none" />
setBookingTime(e.target.value)} className="w-full bg-neutral-950 border border-neutral-800 text-stone-300 text-xs rounded pl-9 pr-2 py-2 focus:border-amber-500 outline-none" />
{/* Live Visualizer Panel (A premium mini map route mockup) */}
Corridor Telemetry {mapRunning ? 'Tracking Active' : 'Standby'}
{/* Fake Map Canvas / Visualized route */}
{/* Route paths vector simulated */} {/* Animated car marker beacon */} {mapRunning && ( )}
{pickup || 'Pick-up'}
{serviceType === 'hourly' ? `Duration: ${hourlyDuration}h` : (dropoff || 'Drop-off')}
{!pickup && ( Ready to trace journey... )}
{/* Action trigger */}
)} {/* ================= STEP 2: FLEET SELECTION ================= */} {bookingStep === 2 && (
Estimated distance: {getEstimatedDistance()} miles

Please choose your desired vehicle class for {bookingDate} @ {bookingTime}:

{FLEET_CARS.map((car) => { const quote = calculateCarQuote(car); return (
{car.name}
{car.name} {car.class}
Max {car.passengers} Max {car.luggage}
{formatPrice(quote)}
); })}
)} {/* ================= STEP 3: LUXURY ADD-ONS & AI CONFIGURATION ================= */} {bookingStep === 3 && (
Class: {selectedVehicle?.name}
{/* AI VIBE CURATION SECTION */}

✨ AI Cabin Mood Curator

Tell Genevieve your purpose or mood, and we will automatically program the climate controls, LED floor glow, fragrance mists, and massage seats for arrival.

setCabinVibeInput(e.target.value)} className="flex-1 bg-neutral-950 border border-neutral-850 rounded px-2.5 py-1.5 text-xs text-stone-300 placeholder-stone-600 focus:border-amber-500 outline-none" />
{curatedAmbience && (
Ambient Glow: {curatedAmbience.colorLabel}
{curatedAmbience.temperature}
{curatedAmbience.aromaSelection}
Audio Vibe: {curatedAmbience.audioRecommendation}
)}

Standard Amenities Accoutrements

{EXTRAS_LIST.map((extra) => { const isSelected = selectedExtras.includes(extra.id); return (
handleToggleExtra(extra.id)} className={`bg-neutral-950 border p-3 rounded-lg flex items-start space-x-3 cursor-pointer transition-all ${isSelected ? 'border-amber-500 bg-amber-500/5' : 'border-neutral-800 hover:border-neutral-700'}`} >
{isSelected && }
{extra.name} {extra.price === 0 ? 'Included' : `+${formatPrice(extra.price)}`}

{extra.desc}

); })}
Selected Extras: {selectedExtras.length}
Running Total {formatPrice(calculateCarQuote(selectedVehicle) + calculateExtrasTotal())}
)} {/* ================= STEP 4: REVIEW & CHECKOUT ================= */} {bookingStep === 4 && (
Secure Gateway
{/* Luxury Itemized Invoice Breakdown */}
Chauffeur Service ({selectedVehicle?.name}) {formatPrice(calculateCarQuote(selectedVehicle))}
{selectedExtras.map((extraId) => { const ext = EXTRAS_LIST.find(e => e.id === extraId); return (
+ {ext?.name} {ext?.price === 0 ? 'Complimentary' : formatPrice(ext?.price)}
); })} {couponApplied && (
Promotional Discount (15%) -{formatPrice((calculateCarQuote(selectedVehicle) + calculateExtrasTotal()) * couponDiscount)}
)}
Grand Concierge Total {formatPrice(calculateGrandTotal())}
{/* Promo Code input field */}
setCouponCode(e.target.value)} className="flex-1 bg-neutral-950 border border-neutral-800 focus:border-amber-500 rounded px-3 py-1.5 text-xs text-stone-300 outline-none uppercase" /> {couponApplied ? ( ) : ( )}
{promoError &&

{promoError}

} {/* Client details form fields */}

Lead Passenger Credentials

setCustomerName(e.target.value)} className="w-full bg-neutral-950 border border-neutral-850 text-xs rounded p-2 focus:border-amber-500 outline-none text-stone-200" />
setCustomerEmail(e.target.value)} className="w-full bg-neutral-950 border border-neutral-850 text-xs rounded p-2 focus:border-amber-500 outline-none text-stone-200" />
setCustomerPhone(e.target.value)} className="w-full bg-neutral-950 border border-neutral-850 text-xs rounded p-2 focus:border-amber-500 outline-none text-stone-200" />
setCustomerNotes(e.target.value)} className="w-full bg-neutral-950 border border-neutral-850 text-xs rounded p-2 focus:border-amber-500 outline-none text-stone-200" />

Payment Card Securitization

{/* CC Details inputs */}
setCcNumber(e.target.value)} className="w-full bg-neutral-950 border border-neutral-850 text-xs rounded pl-9 pr-2 py-2 focus:border-amber-500 outline-none text-stone-200 font-mono" />
setCcExpiry(e.target.value)} className="w-full bg-neutral-950 border border-neutral-850 text-xs rounded p-2 focus:border-amber-500 outline-none text-stone-200 font-mono" /> setCcCvc(e.target.value)} className="w-full bg-neutral-950 border border-neutral-850 text-xs rounded p-2 focus:border-amber-500 outline-none text-stone-200 font-mono" />
{/* Loading status screen during mock submission */} {isProcessing ? (

Assigning Elite Chauffeur...

Securing SSL Corridor Encryption

) : ( )}
)} {/* ================= STEP 5: BOOKING SUCCESS STATE with LLM Tools ================= */} {bookingStep === 5 && (

Reservation Secured

Voucher ID: {confirmedBookingId}

{/* Display assigned Chauffeur Profile */} {assignedDriver && (
{assignedDriver.name}
Assigned Professional Chauffeur

{assignedDriver.name}

{assignedDriver.phone} {assignedDriver.rating}
)} {/* AI INTEGRATIONS FOR SUCCESS VOUCHER VIEW */}
{/* Itinerary result viewer */} {itineraryResult && (
✨ Curated Schedule Plan
{itineraryResult}
)} {/* Arrival Notice result viewer */} {arrivalNotice && (
✨ Pre-Drafted Arrival Update
{arrivalNotice}
)}
An elegant digital reservation voucher, chauffeur dispatch telemetry link, and corporate invoice have been transmitted to {customerEmail}.
)}
{/* SECTION: BRAND PILLARS / BADGES */}

Full Security Guard

Rigorous background checks & NDA confidentiality for ultimate safety.

5.0 Star Concierge

Chauffeurs trained in luxury hospitality protocol and defensive transit.

Guaranteed Punctuality

Advanced satellite routing & airline systems integration prevents delays.

Pristine Fleet

Showroom condition luxury sedans, prestige SUVs, & high-tech Sprinters.

{/* SECTION: CHOOSE SERVICE TYPE VISUAL SHOWCASE */}
Tailored Class

Our Elite Mobility Solutions

{SERVICES.map((srv, idx) => (
{srv.title}

{srv.title}

{srv.description}

))}
{/* SECTION: PRESTIGE STATS GRID */}
280+ Showroom-Pristine Vehicles
14k+ Distinguished VIP Guests
32 Premium Airport Terminals Covered
100% Discreet NDA Confidentiality
{/* SECTION: ELITE CHAUFFEUR STANDARDS */}
Polished chauffeur
Full Background Clear

Department of Transport registered & security vetted.

Vetted Professionals

Chauffeurs Trained In Luxury Hospitality

Our drivers are not mere transport pilots. They are fully vetted corporate concierges trained in elite guest protocol, defensive road protection, luggage logistics, and multilingual diplomacy.

Meticulous Grooming Codes Chauffeurs dressed in tailored black corporate suits, ties, and leather shoes.
Zero Intrusion Guarantee Absolute privacy. No unrequested conversation or audio interruption during flight transits.
Real-time Flight Tracking We adjust pick-ups dynamically for private jet streams or commercial deviations.
Defensive Security Training Certified tactical evasive driver training ensures safety against roadway hazards.
{/* SECTION: CLIENT TESTIMONIAL REVIEWS */}
Client Voice

The Ultimate Passenger Verdict

{REVIEWS.map((rev, idx) => (
{[...Array(rev.rating)].map((_, i) => ( ))}

"{rev.text}"

{rev.name}

{rev.name}

{rev.role}
))}
)} {/* ==================== FLEET PAGE LAYOUT ==================== */} {currentTab === 'fleet' && (
Exquisite Fleet

The LuxRide Prestige Fleet

Explore pristine showroom engineering designed to elevate travel into premium sensory comfort.

{/* Fleet category filters and live search */}
{['all', 'sedan', 'suv', 'van'].map((tab) => ( ))}
Prices listed reflect standard starting hourly / mile metrics in {currency}
{/* Fleet Grid */}
{FLEET_CARS.filter(car => activeFleetTab === 'all' || car.type === activeFleetTab).map((car) => (
{car.name}
{car.class}

{car.name}

{car.tagline}

Up to {car.passengers} Passengers
Up to {car.luggage} Cases
{/* Show itemized amenities */}
Cabin Amenities:
    {car.amenities.map((amenity, i) => (
  • • {amenity}
    • ))}
Starting Hourly Rate {formatPrice(car.hourlyRate)}/hr
))}
)} {/* ==================== SERVICES DETAILED PAGE ==================== */} {currentTab === 'services' && (
Our Portfolio

Bespoke Transportation Offerings

Custom luxury service models tailored to individual private itineraries and corporate transport logistics.

{SERVICES.map((srv, idx) => (
{srv.title}

{srv.title}

{srv.description}

Complimentary onboarding beverages & high-speed Wi-Fi
Full real-time vehicle GPS tracking links via SMS/Email
Complimentary guest baggage assistance
))}
)} {/* ==================== MY BOOKINGS HISTORY LOGS ==================== */} {currentTab === 'bookings' && (

My Active Bookings

Review your secured chauffeur vouchers, active itineraries, and assigned driver details.

{historyBookings.length > 0 && ( )}
{historyBookings.length === 0 ? (

No Bookings Recorded This Session

Secure your first luxury chauffeur booking on our Home Page to see real-time updates and active chauffeur coordination here.

) : (
{historyBookings.map((bk) => (
{/* Card Header Info */}
VOUCHER ID: {bk.id}

Departing: {bk.date} @ {bk.time}

{bk.status}
{/* Route & Details Grid */}
{/* Left Column: Routing */}
Chauffeur Route Details
Pickup: {bk.pickup}
Drop-off: {bk.dropoff}
{/* Display Selected Extras */} {bk.extras.length > 0 && (
Onboard Extras Requested
{bk.extras.map((ex, i) => ( {ex} ))}
)}
{/* Middle Column: Chauffeur Card */}
Your Concierge Driver
{bk.driver.name}

{bk.driver.name}

Contact: {bk.driver.phone} {bk.driver.rating} VIP Star Rating
{/* Card Bottom Panel / Invoice summary */}
Vehicle Class Rescheduled {bk.vehicle?.name}
Paid Total (Secured) {formatPrice(bk.total)}
))}
)}
)} {/* ==================== FOOTER CORPORATE AREA ==================== */} {/* ==================== AI CONCIERGE FLOATING BUTTON ==================== */} {/* ==================== AI CONCIERGE CHAT WINDOW ==================== */} {chatOpen && (
{/* Header */}

Genevieve AI Concierge

Elite LuxRide Representative

{/* Quick-action helper buttons */}
{/* Messages Box */}
{chatMessages.map((msg, i) => (

{msg.text}

{msg.time}
))} {chatLoading && (
Genevieve is thinking...
)}
{/* Chat Form Input */}
setChatInput(e.target.value)} placeholder="Inquire with private concierge..." className="flex-1 bg-neutral-900 border border-neutral-800 focus:border-amber-500 rounded-xl px-4 py-2.5 text-xs text-stone-200 outline-none placeholder-stone-600" />
)}
); }