import React, { useState, useCallback, useEffect, useRef } from "react" import { useFireproof } from "use-fireproof" import { callAI } from "call-ai" const TRANSIT_ICONS = { car: '🚗', bus: '🚌', ferry: '⛴️', plane: '✈️', train: '🚂', walk: '🚶', overnight_ferry: '🛳️', overnight_train: '🚃', cruise: '🛳️' } const TRANSIT_COLORS = { car: '#dc2626', bus: '#f59e0b', ferry: '#06b6d4', plane: '#7c3aed', train: '#10b981', walk: '#6b7280', overnight_ferry: '#06b6d4', overnight_train: '#10b981', cruise: '#06b6d4' } function MapWithTiles({ stops, selectedStop, onSelectStop }) { const containerRef = useRef(null) const [dimensions, setDimensions] = useState({ width: 800, height: 500 }) const [viewState, setViewState] = useState({ lat: 48, lon: 8, zoom: 5 }) const isDragging = useRef(false) const lastPos = useRef({ x: 0, y: 0 }) const zoomAccumulator = useRef(0) useEffect(() => { const updateDimensions = () => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect() setDimensions({ width: rect.width || 800, height: rect.height || 500 }) } } updateDimensions() window.addEventListener('resize', updateDimensions) return () => window.removeEventListener('resize', updateDimensions) }, []) useEffect(() => { if (stops.length === 0) return const lats = stops.map(s => s.lat) const lons = stops.map(s => s.lon) const minLat = Math.min(...lats), maxLat = Math.max(...lats) const minLon = Math.min(...lons), maxLon = Math.max(...lons) const spread = Math.max(maxLat - minLat, (maxLon - minLon) * 0.6) let newZoom = spread > 60 ? 2 : spread > 40 ? 3 : spread > 20 ? 4 : spread > 10 ? 5 : spread > 5 ? 6 : spread > 2 ? 7 : spread > 1 ? 8 : 9 setViewState({ lat: (minLat + maxLat) / 2, lon: (minLon + maxLon) / 2, zoom: newZoom }) }, [stops]) const { width, height } = dimensions const tileSize = 256 const { lat: centerLat, lon: centerLon, zoom } = viewState const lonToTileX = (lon, z) => ((lon + 180) / 360) * Math.pow(2, z) const latToTileY = (lat, z) => { const rad = lat * Math.PI / 180 return (1 - Math.log(Math.tan(rad) + 1 / Math.cos(rad)) / Math.PI) / 2 * Math.pow(2, z) } const centerTileX = lonToTileX(centerLon, zoom) const centerTileY = latToTileY(centerLat, zoom) const tilesX = Math.ceil(width / tileSize) + 2 const tilesY = Math.ceil(height / tileSize) + 2 const startTileX = Math.floor(centerTileX - tilesX / 2) const startTileY = Math.floor(centerTileY - tilesY / 2) const pixelOffsetX = (centerTileX - startTileX) * tileSize - width / 2 const pixelOffsetY = (centerTileY - startTileY) * tileSize - height / 2 const lonToX = (lon) => (lonToTileX(lon, zoom) - startTileX) * tileSize - pixelOffsetX const latToY = (lat) => (latToTileY(lat, zoom) - startTileY) * tileSize - pixelOffsetY const tiles = [] for (let x = 0; x < tilesX; x++) { for (let y = 0; y < tilesY; y++) { const tileX = startTileX + x, tileY = startTileY + y if (tileX >= 0 && tileY >= 0 && tileX < Math.pow(2, zoom) && tileY < Math.pow(2, zoom)) { tiles.push({ x: tileX, y: tileY, px: x * tileSize - pixelOffsetX, py: y * tileSize - pixelOffsetY }) } } } const getScale = () => 360 / (Math.pow(2, zoom) * tileSize) const onPointerDown = (e) => { isDragging.current = true lastPos.current = { x: e.clientX, y: e.clientY } e.currentTarget.setPointerCapture(e.pointerId) } const onPointerMove = (e) => { if (!isDragging.current) return const dx = e.clientX - lastPos.current.x const dy = e.clientY - lastPos.current.y lastPos.current = { x: e.clientX, y: e.clientY } const scale = getScale() setViewState(prev => ({ ...prev, lon: prev.lon - dx * scale, lat: prev.lat + dy * scale * Math.cos(prev.lat * Math.PI / 180) })) } const onPointerUp = (e) => { isDragging.current = false e.currentTarget.releasePointerCapture(e.pointerId) } const onWheel = (e) => { e.preventDefault() zoomAccumulator.current += e.deltaY const threshold = 150 if (Math.abs(zoomAccumulator.current) >= threshold) { const direction = zoomAccumulator.current < 0 ? 1 : -1 setViewState(prev => ({ ...prev, zoom: Math.max(2, Math.min(14, prev.zoom + direction)) })) zoomAccumulator.current = 0 } } const onDoubleClick = (e) => { e.preventDefault() e.stopPropagation() setViewState(prev => ({ ...prev, zoom: e.altKey ? Math.max(2, prev.zoom - 1) : Math.min(14, prev.zoom + 1) })) } const zoomIn = () => setViewState(v => ({ ...v, zoom: Math.min(14, v.zoom + 1) })) const zoomOut = () => setViewState(v => ({ ...v, zoom: Math.max(2, v.zoom - 1) })) if (!stops.length) { return (

🗺️

Parse an itinerary to see the map

) } return (

) } function OriginalTextPopup({ text, title, onClose }) { if (!text) return null return (

e.stopPropagation()}>

📝 {title}

{text}

) } function StopPopup({ stop, stopIndex, totalStops, rawText, onNavigateStop, onClose, onUpdateWebsite }) { const [showOriginal, setShowOriginal] = useState(null) const [originalTitle, setOriginalTitle] = useState('') const [lookingUpWebsite, setLookingUpWebsite] = useState(false) useEffect(() => { const handleKeyDown = (e) => { if (e.key === 'ArrowLeft' && stopIndex > 0) { onNavigateStop(stopIndex - 1) } else if (e.key === 'ArrowRight' && stopIndex < totalStops - 1) { onNavigateStop(stopIndex + 1) } } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, [stopIndex, totalStops, onNavigateStop]) if (!stop) return null const seed = Math.abs((stop.name || 'city').split('').reduce((a, c, i) => a + c.charCodeAt(0) * (i + 1), 0)) const buildDatePatterns = (targetDate) => { const patterns = [targetDate, targetDate.replace(/-/g, '/')] const parts = targetDate.split('-') if (parts.length === 3) { const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] const monthShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] const month = parseInt(parts[1]) - 1 const day = parseInt(parts[2]) patterns.push(`${monthNames[month]} ${day}`) patterns.push(`${monthShort[month]} ${day}`) patterns.push(`${day} ${monthNames[month]}`) patterns.push(`${day} ${monthShort[month]}`) patterns.push(`${parts[1]}-${parts[2]}`) patterns.push(`${parts[1]}/${parts[2]}`) } return patterns } const isDateLine = (line) => { const trimmed = line.trim() return /^\d{4}-\d{2}-\d{2}/.test(trimmed) || /^(Day\s+\d|January|February|March|April|May|June|July|August|September|October|November|December)\s+\d/i.test(trimmed) || /^\d{1,2}[\/-]\d{1,2}[\/-]\d{2,4}/.test(trimmed) || /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun)/i.test(trimmed) } const getTextForDate = (targetDate) => { if (!rawText || !targetDate || targetDate === 'Activities') return null const lines = rawText.split('\n') const result = [] let capturing = false const datePatterns = buildDatePatterns(targetDate) for (let i = 0; i < lines.length; i++) { const line = lines[i] const lineLower = line.toLowerCase() const hasTargetDate = datePatterns.some(p => line.includes(p) || lineLower.includes(p.toLowerCase())) if (hasTargetDate && !capturing) { capturing = true result.push(line) continue } if (capturing) { if (isDateLine(line) && result.length > 0) { break } result.push(line) } } while (result.length > 0 && !result[result.length - 1].trim()) { result.pop() } return result.length > 0 ? result.join('\n') : null } const getTextForLocation = () => { if (!rawText || !stop.arrivalDate) return null const stopDates = [] if (stop.arrivalDate) stopDates.push(stop.arrivalDate) if (stop.departureDate && stop.departureDate !== stop.arrivalDate) { const start = new Date(stop.arrivalDate) const end = new Date(stop.departureDate) const current = new Date(start) current.setDate(current.getDate() + 1) while (current <= end) { stopDates.push(current.toISOString().split('T')[0]) current.setDate(current.getDate() + 1) } } const sections = [] for (const date of stopDates) { const text = getTextForDate(date) if (text) sections.push(text) } return sections.length > 0 ? sections.join('\n\n') : null } const getPoiText = (poiName) => { if (!rawText || !poiName) return null const lines = rawText.split('\n') for (const line of lines) { if (line.toLowerCase().includes(poiName.toLowerCase())) { const trimmed = line.trim() const cleaned = trimmed .replace(/^(morning|afternoon|evening|visit|see|tour|go to|check out|breakfast|lunch|dinner)[:\s]*/i, '') .replace(new RegExp(poiName, 'i'), '') .replace(/^[:\s\-–—]+/, '') .trim() if (cleaned.length > 0) { return trimmed } } } return null } const handleDateClick = (date) => { if (date === 'Activities') return const text = getTextForDate(date) setOriginalTitle(date) setShowOriginal(text || `No details found for ${date}`) } const handlePoiClick = (poi) => { const poiName = typeof poi === 'string' ? poi : poi.name const text = getPoiText(poiName) if (text) { setOriginalTitle(poiName) setShowOriginal(text) } } const poiHasMoreInfo = (poi) => { const poiName = typeof poi === 'string' ? poi : poi.name return getPoiText(poiName) !== null } const handleHotelClick = async () => { if (stop.website) { const url = stop.website.startsWith('http') ? stop.website : `https://${stop.website}` window.open(url, '_blank', 'noopener,noreferrer') } else if (stop.hotel && !lookingUpWebsite) { setLookingUpWebsite(true) try { const response = await callAI([ { role: 'system', content: `Find the official hotel website homepage URL. - Return the English version of the website if available - Return ONLY the URL, nothing else - Do not include footnote references like [1], [2] - Do not return booking sites (booking.com, expedia, etc.) - If not found, return "not found"` }, { role: 'user', content: `Official homepage for: ${stop.hotel} in ${stop.name}` } ]) let url = response.trim().replace(/\[\d+\]/g, '').trim() if (url && url !== 'not found' && !url.includes(' ') && (url.startsWith('http') || url.includes('.'))) { const fullUrl = url.startsWith('http') ? url : `https://${url}` onUpdateWebsite(stop.name, stop.arrivalDate, fullUrl) window.open(fullUrl, '_blank', 'noopener,noreferrer') } else { alert(`Could not find official website for ${stop.hotel}`) } } catch (err) { alert(`Error: ${err.message}`) } setLookingUpWebsite(false) } } const handleLocationInfoClick = () => { const text = getTextForLocation() setOriginalTitle(`📍 ${stop.name}`) setShowOriginal(text || `No details found for ${stop.name}`) } const buildSchedule = () => { const schedule = [] if (stop.arrivalDate) { schedule.push({ date: stop.arrivalDate, type: 'arrival', items: [{ icon: '→', label: `Arrive${stop.isOvernightTransit ? ' (overnight transit)' : ''}`, time: stop.checkIn || null }] }) } const poisWithDates = {} const poisWithoutDates = [] stop.pois?.forEach(poi => { const poiObj = typeof poi === 'string' ? { name: poi } : poi if (poiObj.date) { if (!poisWithDates[poiObj.date]) poisWithDates[poiObj.date] = [] poisWithDates[poiObj.date].push(poiObj) } else { poisWithoutDates.push(poiObj) } }) Object.entries(poisWithDates).forEach(([date, pois]) => { const existing = schedule.find(s => s.date === date) if (existing) { pois.forEach(p => existing.items.push({ icon: getPoiIcon(p.name), label: p.name, time: p.time || null, poi: p })) } else { schedule.push({ date, type: 'activity', items: pois.map(p => ({ icon: getPoiIcon(p.name), label: p.name, time: p.time || null, poi: p })) }) } }) if (poisWithoutDates.length > 0) { schedule.push({ date: 'Activities', type: 'activities', items: poisWithoutDates.map(p => ({ icon: getPoiIcon(p.name), label: p.name, time: p.time || null, poi: p })) }) } if (stop.departureDate && stop.departureDate !== stop.arrivalDate) { const transitInfo = stop.transitDescription || (stop.transitTo ? `by ${stop.transitTo}` : '') const departLabel = transitInfo ? `Depart ${transitInfo}` : 'Depart' const existing = schedule.find(s => s.date === stop.departureDate) if (existing) { existing.items.push({ icon: '←', label: departLabel, time: stop.checkOut || null }) } else { schedule.push({ date: stop.departureDate, type: 'departure', items: [{ icon: '←', label: departLabel, time: stop.checkOut || null }] }) } } return schedule.sort((a, b) => { if (a.date === 'Activities') return 1 if (b.date === 'Activities') return -1 return a.date.localeCompare(b.date) }) } const getPoiIcon = (name) => { const lower = name.toLowerCase() if (lower.includes('breakfast')) return '🍳' if (lower.includes('lunch')) return '🍽️' if (lower.includes('dinner')) return '🍷' if (lower.includes('coffee') || lower.includes('café') || lower.includes('cafe')) return '☕' return '⭐' } const schedule = buildSchedule() return ( <>

{stop.isOvernightTransit && 🛳️} {stop.name}

{totalStops > 1 && (

Stop {stopIndex + 1}/{totalStops} (←→)

)}

{stop.nights > 0 && 🌙 {stop.nights}n} {stop.isOvernightTransit && Overnight Transit} {stop.arrivalDate && {stop.arrivalDate}} {stop.departureDate && stop.departureDate !== stop.arrivalDate && ( → {stop.departureDate} )}

{stop.hotel && ( )}

Schedule

{schedule.map((day, i) => (

{day.items.map((item, j) => { const hasMoreInfo = item.poi && poiHasMoreInfo(item.poi) return ( ) })}

))}

setShowOriginal(null)} /> ) } function Legend({ stops }) { const usedTransits = new Set() stops.forEach(s => { if (s.transitTo) { let transit = s.transitTo if (transit === 'overnight_ferry' || transit === 'cruise') transit = 'ferry' if (transit === 'overnight_train') transit = 'train' usedTransits.add(transit) } }) if (usedTransits.size === 0) return null const transitOrder = ['car', 'bus', 'ferry', 'plane', 'train', 'walk'] const usedList = transitOrder.filter(t => usedTransits.has(t)) return (

Legend

{usedList.map(k => (

{TRANSIT_ICONS[k]} {k}

))}

) } function calculateTotalNights(stops) { return stops.reduce((total, s) => total + (s.nights || 0), 0) } export default function ItineraryMap() { const { database, useLiveQuery } = useFireproof('itinerary-map-v21') const [inputText, setInputText] = useState('') const [selectedStop, setSelectedStop] = useState(null) const [selectedStopIndex, setSelectedStopIndex] = useState(0) const [activeId, setActiveId] = useState(null) const [parsing, setParsing] = useState(false) const [error, setError] = useState('') const [showPanel, setShowPanel] = useState(true) const itineraries = useLiveQuery('type', { key: 'itinerary' }) useEffect(() => { if (itineraries.docs.length > 0 && !activeId) { const sorted = [...itineraries.docs].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)) setActiveId(sorted[0]._id) } }, [itineraries.docs, activeId]) const current = itineraries.docs.find(d => d._id === activeId) const stops = current?.stops || [] const rawText = current?.rawText || '' const totalNights = calculateTotalNights(stops) const handleNavigateStop = useCallback((newIndex) => { if (newIndex >= 0 && newIndex < stops.length) { setSelectedStopIndex(newIndex) setSelectedStop(stops[newIndex]) } }, [stops]) const sampleText = `Europe Trip - June 2024 2024-06-10: Arrive Paris by train from London Stay at Hotel Le Marais, 15 Rue de Rivoli 2024-06-11: Full day in Paris Morning: Eiffel Tower visit Lunch: Café de Flore Afternoon: Walk along Seine Dinner: Le Comptoir du Panthéon 2024-06-12: Paris museums day Breakfast at hotel Louvre Museum Lunch: Angelina tearoom Montmartre and Sacré-Cœur Dinner: Pink Mamma 2024-06-13: Depart Paris, Train to Amsterdam Check into Canal House Inn Afternoon: Anne Frank House tour Dinner: De Kas restaurant 2024-06-14: Amsterdam exploration Breakfast: Pluk cafe Van Gogh Museum Bike tour of Jordaan in the afternoon 2024-06-15: Overnight ferry to Newcastle Board DFDS ferry, cabin accommodation Depart Amsterdam evening 2024-06-16: Arrive Newcastle morning Train to Edinburgh Check into The Balmoral Hotel Afternoon: Royal Mile walk Dinner: The Witchery 2024-06-17: Edinburgh sightseeing Edinburgh Castle Arthur's Seat hike in the afternoon Farewell dinner: Timberyard 2024-06-18: Depart Edinburgh - end of trip` const handleSelect = useCallback((stop, index) => { setSelectedStop(stop) setSelectedStopIndex(typeof index === 'number' ? index : stops.findIndex(s => s.name === stop.name && s.arrivalDate === stop.arrivalDate)) }, [stops]) const handleUpdateWebsite = useCallback(async (stopName, arrivalDate, website) => { const currentDoc = itineraries.docs.find(d => d._id === activeId) if (!currentDoc) return const updatedStops = currentDoc.stops.map(s => (s.name === stopName && s.arrivalDate === arrivalDate) ? { ...s, website } : s ) await database.put({ ...currentDoc, stops: updatedStops }) if (selectedStop?.name === stopName && selectedStop?.arrivalDate === arrivalDate) { setSelectedStop({ ...selectedStop, website }) } }, [activeId, itineraries.docs, database, selectedStop]) async function handleParse() { if (!inputText.trim()) return setParsing(true) setError('') try { const response = await callAI([ { role: 'system', content: `Parse this travel itinerary into structured JSON. For each destination stop extract: - name: city/location name - lat/lon: accurate coordinates - nights: number of nights staying at this specific location (count carefully - if arriving day X and departing day Y, nights = Y - X) - hotel: accommodation name (hotel, hostel, cabin on ferry/train, ship name for cruise) - address: address if available - website: URL if provided in the text - arrivalDate, departureDate: YYYY-MM-DD format - checkIn, checkOut: times ONLY if explicitly mentioned in the text, otherwise leave empty/null - transitTo: transport to next destination. Use: car, bus, ferry, plane, train, walk, overnight_ferry, overnight_train, cruise - transitDescription: brief description of the transit - only if details given - isOvernightTransit: true if traveler sleeps aboard (overnight ferry, overnight train, cruise ship) - pois: array with name, date (YYYY-MM-DD), time (include vague times like "morning", "afternoon", "evening" if mentioned), notes IMPORTANT: - Include breakfast, lunch, dinner, and coffee/café stops as POIs with appropriate times - Do NOT invent specific times - but DO include vague times like "morning", "afternoon", "evening" if mentioned - Overnight ferries, trains, cruise ships = SEPARATE STOPS with isOvernightTransit: true - For cruise/overnight ferry, use "overnight_ferry" as transitTo - Calculate nights accurately: arrival date to departure date` }, { role: 'user', content: inputText } ], { schema: { properties: { stops: { type: 'array', items: { type: 'object', properties: { name: { type: 'string' }, lat: { type: 'number' }, lon: { type: 'number' }, nights: { type: 'integer' }, hotel: { type: 'string' }, address: { type: 'string' }, website: { type: 'string' }, arrivalDate: { type: 'string' }, departureDate: { type: 'string' }, checkIn: { type: 'string' }, checkOut: { type: 'string' }, transitTo: { type: 'string' }, transitDescription: { type: 'string' }, isOvernightTransit: { type: 'boolean' }, pois: { type: 'array', items: { type: 'object', properties: { name: { type: 'string' }, date: { type: 'string' }, time: { type: 'string' }, notes: { type: 'string' } } }} } } } } } }) const parsed = JSON.parse(response) if (!parsed.stops?.length) { setError('No locations found.') setParsing(false) return } const doc = await database.put({ type: 'itinerary', title: parsed.stops.filter(s => !s.isOvernightTransit).map(s => s.name).join(' → '), stops: parsed.stops, rawText: inputText, createdAt: Date.now() }) setActiveId(doc.id) setInputText('') setSelectedStop(null) setSelectedStopIndex(0) } catch (err) { setError('Failed: ' + err.message) } setParsing(false) } async function handleDelete(id, title) { if (!confirm(`Delete "${title}"?`)) return await database.del(id) if (activeId === id) { setActiveId(null) setSelectedStop(null) setSelectedStopIndex(0) } } return (

🗺️ AI Itinerary Map

setSelectedStop(null)} onUpdateWebsite={handleUpdateWebsite} />

{showPanel && (

Enter Itinerary

setInputText(e.target.value)} placeholder="Paste itinerary..."
                className="w-full h-28 p-2 border border-[#cbd5e1] rounded text-xs text-[#0f172a] bg-[#f8fafc]" disabled={parsing} />
              {error && <p className="text-[#ef4444] text-xs mt-1">{error}</p>}
              <div className="flex gap-2 mt-2">
                <button onClick={handleParse} disabled={parsing || !inputText.trim()}
                  className="flex-1 p-1.5 bg-[#0f172a] text-[#f1f5f9] font-semibold rounded text-sm disabled:opacity-50">
                  {parsing ? '🤖...' : '🤖 Parse'}
                </button>
                <button onClick={() => setInputText(sampleText)} className="p-1.5 bg-[#e2e8f0] font-semibold rounded text-sm text-[#0f172a]">Sample</button>
              </div>
            </div>

<div className="border border-[#cbd5e1] rounded p-3 bg-[#ffffff]">
              <h2 className="font-semibold mb-2 text-[#0f172a] text-sm">Saved ({itineraries.docs.length})</h2>
              {itineraries.docs.length === 0 && <p className="text-[#64748b] text-xs">No trips yet</p>}
              {[...itineraries.docs].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)).map(doc => {
                const docStops = doc.stops || []
                const docNights = calculateTotalNights(docStops)
                const destinationCount = docStops.filter(s => !s.isOvernightTransit).length
                return (
                  <div key={doc._id} onClick={() => { setActiveId(doc._id); setSelectedStop(null); setSelectedStopIndex(0) }}
                    className={`p-2 mb-2 border rounded cursor-pointer ${activeId === doc._id ? 'border-[#0f172a] bg-[#e0e7ef]' : 'border-[#e2e8f0] bg-[#f8fafc]'}`}>
                    <div className="flex justify-between items-center">
                      <span className="font-semibold text-xs truncate text-[#0f172a]">{doc.title}</span>
                      <button onClick={e => { e.stopPropagation(); handleDelete(doc._id, doc.title) }}
                        className="w-5 h-5 bg-[#f1f5f9] border border-[#cbd5e1] rounded font-bold text-xs text-[#64748b] hover:bg-[#fecaca]">✕</button>
                    </div>
                    <div className="text-[10px] text-[#64748b] mt-1">
                      {destinationCount} destinations • {docNights} nights
                    </div>
                  </div>
                )
              })}
            </div>

{stops.length > 0 && (
              <div className="border border-[#cbd5e1] rounded p-3 bg-[#ffffff]">
                <h2 className="font-semibold mb-2 text-[#0f172a] text-sm">
                  Stops ({totalNights} nights total)
                </h2>
                <div className="space-y-1">
                  {stops.map((s, i) => {
                    let transitIcon = TRANSIT_ICONS[s.transitTo] || '→'
                    if (s.transitTo === 'cruise') transitIcon = '🛳️'
                    const isSelected = selectedStop?.name === s.name && selectedStop?.arrivalDate === s.arrivalDate
                    return (
                      <button key={i} onClick={() => handleSelect(s, i)}
                        className={`w-full px-2 py-1.5 text-xs font-semibold border rounded text-left flex items-center gap-2 ${
                          isSelected ? 'bg-[#0f172a] text-[#f1f5f9] border-[#0f172a]' : 'bg-[#f8fafc] text-[#0f172a] border-[#cbd5e1] hover:bg-[#e2e8f0]'
                        }`}>
                        <span className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] shrink-0 text-[#ffffff]`}
                          style={{ backgroundColor: s.isOvernightTransit ? '#06b6d4' : '#dc2626' }}>{i + 1}</span>
                        <span className="flex-1 truncate">{s.isOvernightTransit ? `🛳️ ${s.name}` : s.name}</span>
                        {s.nights > 0 && <span className="text-[10px] opacity-70">{s.nights}n</span>}
                        {s.transitTo && i < stops.length - 1 && <span>{transitIcon}</span>}
                      </button>
                    )
                  })}
                </div>
              </div>
            )}

Enter Itinerary

Saved (0)