\n {/* Tour Header */}\n

\n \n ← Back\n \n

\n {tour.city.image}\n {tour.city.name}\n

{tour.city.country} • {tour.estimatedDuration} minutes

\n \n

Progress

\n {currentStopIndex + 1} of {tour.stops.length} stops\n

\n\n

{tour.city.description}

\n\n {/* Tour Highlights */}\n

\n {tour.highlights.map((highlight, index) => (\n \n {highlight}\n \n ))}\n

\n\n {/* Tab Navigation */}\n

\n setActiveTab('stops')}\n className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${\n activeTab === 'stops'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n 🏛️ Tour Stops ({tour.stops.length})\n \n setActiveTab('food')}\n className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${\n activeTab === 'food'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n 🍽️ Food Guide ({tour.foodRecommendations.length})\n \n setActiveTab('phrases')}\n className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${\n activeTab === 'phrases'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n 💬 Phrases ({tour.phrases.length})\n \n

\n\n {/* Tab Content */}\n

\n {activeTab === 'stops' && (\n \n )}\n\n {activeTab === 'food' && (\n \n )}\n\n {activeTab === 'phrases' && (\n \n )}\n

\n\n {/* Completion Modal */}\n {showCompletionModal && (\n setShowCompletionModal(false)}\n onComplete={completeTour}\n visitedStops={visitedStops.size}\n totalTime={tourStartTime ? Math.round((Date.now() - tourStartTime) / 1000) : 0}\n />\n )}\n

\n );\n}\n\n// Stops Tab Component\ninterface StopsTabProps {\n stops: TourStop[];\n currentIndex: number;\n onStopChange: (index: number) => void;\n onNext: () => void;\n onPrev: () => void;\n visitedStops: Set;\n}\n\nfunction StopsTab({ stops, currentIndex, onStopChange, onNext, onPrev, visitedStops }: StopsTabProps) {\n const currentStop = stops[currentIndex];\n\n return (\n

\n {/* Stop Navigation */}\n

\n \n ← Previous Stop\n \n\n

\n {stops.map((_, index) => (\n onStopChange(index)}\n className={`w-3 h-3 rounded-full transition-colors ${\n index === currentIndex\n ? 'bg-blue-600'\n : visitedStops.has(stops[index].id)\n ? 'bg-green-500'\n : 'bg-gray-300'\n }`}\n />\n ))}\n

\n\n \n Next Stop →\n \n

\n\n {/* Current Stop */}\n

\n {currentStop.image}\n {currentStop.title}\n

{currentStop.description}

\n \n {visitedStops.has(currentStop.id) && (\n

\n ✓ Visited\n

\n )}\n

\n\n {/* Facts */}\n

Interesting Facts

\n {currentStop.facts.map((fact, index) => (\n

\n •\n

{fact}

\n ))}\n

\n );\n}\n\n// Food Tab Component\ninterface FoodTabProps {\n recommendations: FoodRecommendation[];\n onFoodView: (foodId: string, duration: number) => void;\n}\n\nfunction FoodTab({ recommendations, onFoodView }: FoodTabProps) {\n const [expandedFood, setExpandedFood] = useState(null);\n const [viewStartTimes, setViewStartTimes] = useState>({});\n\n const handleFoodClick = (foodId: string) => {\n if (expandedFood === foodId) {\n // Closing - track view duration\n const startTime = viewStartTimes[foodId];\n if (startTime) {\n const duration = Math.round((Date.now() - startTime) / 1000);\n onFoodView(foodId, duration);\n }\n setExpandedFood(null);\n } else {\n // Opening - start tracking\n setExpandedFood(foodId);\n setViewStartTimes(prev => ({ ...prev, [foodId]: Date.now() }));\n }\n };\n\n const getPriceRangeText = (range: string) => {\n switch (range) {\n case '$': return 'Budget-friendly';\n case '$$': return 'Moderate';\n case '$$$': return 'Upscale';\n case '$$$$': return 'Fine dining';\n default: return range;\n }\n };\n\n const getTypeIcon = (type: string) => {\n switch (type) {\n case 'restaurant': return '🍽️';\n case 'street_food': return '🥘';\n case 'market': return '🏪';\n case 'cafe': return '☕';\n case 'bar': return '🍷';\n default: return '🍴';\n }\n };\n\n return (\n

\n {recommendations.map((food) => (\n \n handleFoodClick(food.id)}\n >\n

\n {getTypeIcon(food.type)}\n

{food.name}

{food.description}

\n \n

{getPriceRangeText(food.priceRange)}

{food.priceRange}

\n \n {expandedFood === food.id ? '▼' : '▶'}\n \n

\n\n {expandedFood === food.id && (\n

Must Try

\n ★\n {item}\n

\n \n

Tips

\n 💡\n {tip}\n

\n \n {food.location && (\n

\n 📍 Location: {food.location}\n

\n )}\n

\n )}\n \n ))}\n \n );\n}\n\n// Phrases Tab Component\ninterface PhrasesTabProps {\n phrases: LanguagePhrase[];\n onPhraseView: (phraseId: string, duration: number) => void;\n}\n\nfunction PhrasesTab({ phrases, onPhraseView }: PhrasesTabProps) {\n const [selectedCategory, setSelectedCategory] = useState('all');\n const [playingPhrase, setPlayingPhrase] = useState(null);\n const [viewStartTimes, setViewStartTimes] = useState>({});\n\n const categories = ['all', ...Array.from(new Set(phrases.map(p => p.category)))];\n \n const filteredPhrases = selectedCategory === 'all' \n ? phrases \n : phrases.filter(p => p.category === selectedCategory);\n\n const handlePhraseClick = (phraseId: string) => {\n // Track view start\n setViewStartTimes(prev => ({ ...prev, [phraseId]: Date.now() }));\n \n // Simulate pronunciation play\n setPlayingPhrase(phraseId);\n setTimeout(() => {\n setPlayingPhrase(null);\n \n // Track view duration\n const startTime = viewStartTimes[phraseId];\n if (startTime) {\n const duration = Math.round((Date.now() - startTime) / 1000);\n onPhraseView(phraseId, duration);\n }\n }, 2000);\n };\n\n const getCategoryIcon = (category: string) => {\n switch (category) {\n case 'greetings': return '👋';\n case 'directions': return '🗺️';\n case 'food': return '🍽️';\n case 'shopping': return '🛍️';\n case 'emergency': return '🚨';\n case 'courtesy': return '🙏';\n default: return '💬';\n }\n };\n\n const getCategoryName = (category: string) => {\n return category.charAt(0).toUpperCase() + category.slice(1);\n };\n\n return (\n

\n {/* Category Filter */}\n

\n {categories.map((category) => (\n setSelectedCategory(category)}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n selectedCategory === category\n ? 'bg-blue-600 text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n >\n {category === 'all' ? '🌐 All' : `${getCategoryIcon(category)} ${getCategoryName(category)}`}\n \n ))}\n

\n\n {/* Phrases Grid */}\n

\n {filteredPhrases.map((phrase) => (\n handlePhraseClick(phrase.id)}\n >\n

\n {getCategoryIcon(phrase.category)}\n \n {getCategoryName(phrase.category)}\n \n

\n \n {playingPhrase === phrase.id ? (\n

🔊

\n ) : (\n

🔊

\n )}\n

\n \n

English

{phrase.english}

\n \n

Local

{phrase.local}

\n \n

Pronunciation

{phrase.pronunciation}

\n \n {phrase.context && (\n

\n 💡 {phrase.context}\n

\n )}\n

\n ))}\n

\n \n );\n}\n\n// Completion Modal Component\ninterface CompletionModalProps {\n tour: CityTour;\n onClose: () => void;\n onComplete: () => void;\n visitedStops: number;\n totalTime: number;\n}\n\nfunction CompletionModal({ tour, onClose, onComplete, visitedStops, totalTime }: CompletionModalProps) {\n const completionRate = (visitedStops / tour.stops.length) * 100;\n const minutes = Math.floor(totalTime / 60);\n const seconds = totalTime % 60;\n\n const handleComplete = () => {\n onComplete();\n onClose();\n };\n\n return (\n

🎉

\n Congratulations!\n

\n You've completed your virtual tour of {tour.city.name}!\n

\n \n

{visitedStops}

Stops Visited

\n {minutes}:{seconds.toString().padStart(2, '0')}\n

Time Spent

\n \n

Completion Rate

{Math.round(completionRate)}%

\n \n

\n \n Continue Exploring\n \n \n Finish Tour\n \n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Onesidededdimple/VirtualTourGuide/code/frontend/components/TourViewer.tsx","extension","actionData","errors"]