function MainComponent() { const [currentCity, setCurrentCity] = useState("Madrid"); const [passport, setPassport] = useState([]); const [freeTripsUsed, setFreeTripsUsed] = useState(0); const [language, setLanguage] = useState("es"); const [showError, setShowError] = useState(false); const [showSuccess, setShowSuccess] = useState(false); const cities = [ { name: "Madrid", country: "Spain", challenge: { es: "¿Qué famoso museo de arte se encuentra en Madrid?", en: "What famous art museum is located in Madrid?" }, answer: "El Prado", hint: { es: "Es uno de los museos de arte más importantes del mundo", en: "It's one of the most important art museums in the world" }, stamp: "/stamps/madrid.png", coordinates: [ 40.4168, -3.7038 ] }, { name: "Mexico City", country: "Mexico", challenge: { es: "¿Qué antigua civilización construyó Teotihuacán?", en: "Which ancient civilization built Teotihuacán?" }, answer: "Los Aztecas", hint: { es: "Fueron uno de los imperios más poderosos de Mesoamérica", en: "They were one of the most powerful empires in Mesoamerica" }, stamp: "/stamps/mexicocity.png", coordinates: [ 19.4326, -99.1332 ] }, { name: "Buenos Aires", country: "Argentina", challenge: { es: "¿Qué baile tradicional nació en Buenos Aires?", en: "What traditional dance was born in Buenos Aires?" }, answer: "Tango", hint: { es: "Es un baile de pareja muy apasionado", en: "It's a very passionate partner dance" }, stamp: "/stamps/buenosaires.png", coordinates: [ -34.6037, -58.3816 ] }, { name: "Lima", country: "Peru", challenge: { es: "¿Qué antigua ciudad inca es el símbolo de Perú?", en: "Which ancient Incan city is the symbol of Peru?" }, answer: "Machu Picchu", hint: { es: "Es una de las nuevas maravillas del mundo", en: "It's one of the new wonders of the world" }, stamp: "/stamps/lima.png", coordinates: [ -12.0464, -77.0428 ] }, { name: "Santiago", country: "Chile", challenge: { es: "¿Qué desierto se encuentra en el norte de Chile?", en: "What desert is located in northern Chile?" }, answer: "Atacama", hint: { es: "Es el desierto más árido del mundo", en: "It's the driest desert in the world" }, stamp: "/stamps/santiago.png", coordinates: [ -33.4489, -70.6693 ] }, { name: "Bogotá", country: "Colombia", challenge: { es: "¿Qué bebida es el principal producto de exportación de Colombia?", en: "What drink is Colombia's main export product?" }, answer: "Café", hint: { es: "Es una bebida muy popular en todo el mundo", en: "It's a very popular drink worldwide" }, stamp: "/stamps/bogota.png", coordinates: [ 4.711, -74.0721 ] }, { name: "Caracas", country: "Venezuela", challenge: { es: "¿Cuál es la cascada más alta del mundo ubicada en Venezuela?", en: "What is the highest waterfall in the world located in Venezuela?" }, answer: "Angel", hint: { es: "Lleva el nombre del piloto que la descubrió", en: "It's named after the pilot who discovered it" }, stamp: "/stamps/caracas.png", coordinates: [ 10.4806, -66.9036 ] }, { name: "Quito", country: "Ecuador", challenge: { es: "¿En qué línea imaginaria se encuentra Ecuador?", en: "On which imaginary line is Ecuador located?" }, answer: "Ecuador", hint: { es: "Divide el planeta en hemisferio norte y sur", en: "It divides the planet into northern and southern hemispheres" }, stamp: "/stamps/quito.png", coordinates: [ -0.1807, -78.4678 ] }, { name: "La Paz", country: "Bolivia", challenge: { es: "¿Cuál es el lago navegable más alto del mundo en Bolivia?", en: "What is the highest navigable lake in the world in Bolivia?" }, answer: "Titicaca", hint: { es: "Es compartido con Perú", en: "It's shared with Peru" }, stamp: "/stamps/lapaz.png", coordinates: [ -16.4897, -68.1193 ] }, { name: "Asunción", country: "Paraguay", challenge: { es: "¿Qué bebida tradicional paraguaya se hace con yerba mate?", en: "What traditional Paraguayan drink is made with yerba mate?" }, answer: "Tereré", hint: { es: "Se toma fría", en: "It's served cold" }, stamp: "/stamps/asuncion.png", coordinates: [ -25.2867, -57.3333 ] }, { name: "Montevideo", country: "Uruguay", challenge: { es: "¿Qué carne es famosa en Uruguay?", en: "What meat is famous in Uruguay?" }, answer: "Vacuna", hint: { es: "Proviene de las vacas", en: "It comes from cows" }, stamp: "/stamps/montevideo.png", coordinates: [ -34.9011, -56.1645 ] }, { name: "San José", country: "Costa Rica", challenge: { es: "¿Qué frase típica usan los costarricenses para decir todo está bien?", en: "What typical phrase do Costa Ricans use to say everything is fine?" }, answer: "Pura vida", hint: { es: "Se usa como saludo y despedida", en: "It's used as a greeting and farewell" }, stamp: "/stamps/sanjose.png", coordinates: [ 9.9281, -84.0907 ] }, { name: "Panama City", country: "Panama", challenge: { es: "¿Qué canal une los océanos Atlántico y Pacífico?", en: "What canal connects the Atlantic and Pacific oceans?" }, answer: "Panama", hint: { es: "Lleva el mismo nombre que el país", en: "It has the same name as the country" }, stamp: "/stamps/panama.png", coordinates: [ 8.9824, -79.5199 ] }, { name: "San Salvador", country: "El Salvador", challenge: { es: "¿Qué comida típica salvadoreña es una tortilla rellena?", en: "What typical Salvadoran food is a stuffed tortilla?" }, answer: "Pupusa", hint: { es: "Puede llevar queso, frijoles o chicharrón", en: "It can be filled with cheese, beans, or pork" }, stamp: "/stamps/sansalvador.png", coordinates: [ 13.6929, -89.2182 ] }, { name: "Tegucigalpa", country: "Honduras", challenge: { es: "¿Qué ruinas mayas se encuentran en Copán, Honduras?", en: "What Mayan ruins are found in Copán, Honduras?" }, answer: "Copán", hint: { es: "Es un importante sitio arqueológico maya", en: "It's an important Mayan archaeological site" }, stamp: "/stamps/tegucigalpa.png", coordinates: [ 14.0723, -87.1921 ] }, { name: "Managua", country: "Nicaragua", challenge: { es: "¿Cuál es el lago más grande de América Central?", en: "What is the largest lake in Central America?" }, answer: "Nicaragua", hint: { es: "Tiene el mismo nombre que el país", en: "It has the same name as the country" }, stamp: "/stamps/managua.png", coordinates: [ 12.1149, -86.2362 ] }, { name: "Guatemala City", country: "Guatemala", challenge: { es: "¿Qué lago está rodeado por volcanes en Guatemala?", en: "What lake is surrounded by volcanoes in Guatemala?" }, answer: "Atitlán", hint: { es: "Es considerado uno de los más bellos del mundo", en: "It's considered one of the most beautiful in the world" }, stamp: "/stamps/guatemala.png", coordinates: [ 14.6349, -90.5069 ] }, { name: "Santo Domingo", country: "Dominican Republic", challenge: { es: "¿Qué baile es originario de República Dominicana?", en: "What dance originated in the Dominican Republic?" }, answer: "Merengue", hint: { es: "Es un ritmo alegre y rápido", en: "It's a happy and fast rhythm" }, stamp: "/stamps/santodomingo.png", coordinates: [ 18.4861, -69.9312 ] }, { name: "San Juan", country: "Puerto Rico", challenge: { es: "¿Qué fortaleza española del siglo XVI protege San Juan?", en: "What 16th century Spanish fortress protects San Juan?" }, answer: "El Morro", hint: { es: "Se encuentra junto al mar", en: "It's located by the sea" }, stamp: "/stamps/sanjuan.png", coordinates: [ 18.4655, -66.1057 ] }, { name: "Havana", country: "Cuba", challenge: { es: "¿Qué calle famosa de La Habana es conocida por sus bares?", en: "What famous street in Havana is known for its bars?" }, answer: "Obispo", hint: { es: "Es una de las calles más antiguas de La Habana Vieja", en: "It's one of the oldest streets in Old Havana" }, stamp: "/stamps/havana.png", coordinates: [ 23.1136, -82.3666 ] }, { name: "Malabo", country: "Equatorial Guinea", challenge: { es: "¿En qué continente se encuentra Guinea Ecuatorial?", en: "On which continent is Equatorial Guinea located?" }, answer: "África", hint: { es: "Es el único país africano donde el español es lengua oficial", en: "It's the only African country where Spanish is the official language" }, stamp: "/stamps/malabo.png", coordinates: [ 3.7523, 8.7742 ] } ]; const [userAnswer, setUserAnswer] = useState(""); const [showHint, setShowHint] = useState(false); const checkAnswer = (e)=>{ e.preventDefault(); const currentCityData = cities.find((city)=>city.name === currentCity); if (userAnswer.toLowerCase() === currentCityData.answer.toLowerCase()) { if (!passport.includes(currentCity)) { setPassport([ ...passport, currentCity ]); setShowSuccess(true); setTimeout(()=>setShowSuccess(false), 2000); } setUserAnswer(""); setShowHint(false); setShowError(false); } else { setShowError(true); setTimeout(()=>setShowError(false), 2000); } }; const useFreeTrip = (cityName)=>{ if (freeTripsUsed < 3 && !passport.includes(cityName)) { setPassport([ ...passport, cityName ]); setFreeTripsUsed(freeTripsUsed + 1); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFE5E5] p-4", __source: { fileName: "", lineNumber: 353, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "data:image/svg+xml,", __source: { fileName: "", lineNumber: 354, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 358, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 359, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 360, columnNumber: 11 }, __self: this }, language === "es" ? "Pasaporte Hispano" : "Hispanic Passport"), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "p-2 border rounded bg-white", __source: { fileName: "", lineNumber: 363, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 368, columnNumber: 13 }, __self: this }, "🇪🇸 Español"), /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 369, columnNumber: 13 }, __self: this }, "🇬🇧 English"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 bg-white rounded-lg p-4", __source: { fileName: "", lineNumber: 372, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 373, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#4ECDC4] h-2.5 rounded-full transition-all duration-500", style: { width: `${passport.length / cities.length * 100}%` }, __source: { fileName: "", lineNumber: 374, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 379, columnNumber: 11 }, __self: this }, passport.length, " / ", cities.length, " ", language === "es" ? "ciudades visitadas" : "cities visited")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFE0] rounded-lg shadow-lg p-6 mb-8", __source: { fileName: "", lineNumber: 384, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#2c3e50] mb-6 text-center font-crimson-text", __source: { fileName: "", lineNumber: 385, columnNumber: 11 }, __self: this }, language === "es" ? "¡Responde preguntas sobre cada ciudad en español! Las respuestas pueden ser una o dos palabras. 🎯" : "Answer questions about each city in Spanish! Answers can be one or two words. 🎯"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 390, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 391, columnNumber: 13 }, __self: this }, "📍 ", currentCity), /*#__PURE__*/ React.createElement("select", { value: currentCity, onChange: (e)=>setCurrentCity(e.target.value), className: "p-2 border rounded", __source: { fileName: "", lineNumber: 392, columnNumber: 13 }, __self: this }, cities.filter((city)=>!passport.includes(city.name)).map((city)=>/*#__PURE__*/ React.createElement("option", { key: city.name, value: city.name, __source: { fileName: "", lineNumber: 400, columnNumber: 19 }, __self: this }, city.name)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 406, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { title: "City Location", width: "100%", height: "300", frameBorder: "0", scrolling: "no", marginHeight: "0", marginWidth: "0", src: `https://maps.google.com/maps?q=${cities.find((city)=>city.name === currentCity).coordinates[0]},${cities.find((city)=>city.name === currentCity).coordinates[1]}&z=5&output=embed`, __source: { fileName: "", lineNumber: 407, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: checkAnswer, className: "space-y-4", __source: { fileName: "", lineNumber: 419, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "challenge-box bg-[#E6FFFA] p-4 rounded-lg", __source: { fileName: "", lineNumber: 420, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 421, columnNumber: 15 }, __self: this }, cities.find((city)=>city.name === currentCity).challenge[language]), showHint && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#4A5568] italic", __source: { fileName: "", lineNumber: 429, columnNumber: 17 }, __self: this }, language === "es" ? "Pista: " : "Hint: ", cities.find((city)=>city.name === currentCity).hint[language])), /*#__PURE__*/ React.createElement("input", { type: "text", name: "answer", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), className: "w-full p-2 border rounded", placeholder: language === "es" ? "Tu respuesta aquí..." : "Your answer here...", __source: { fileName: "", lineNumber: 440, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 453, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#FF6B6B] text-white px-4 py-2 rounded hover:bg-[#FF8787]", __source: { fileName: "", lineNumber: 454, columnNumber: 15 }, __self: this }, language === "es" ? "Comprobar" : "Check"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowHint(true), className: "bg-[#4ECDC4] text-white px-4 py-2 rounded hover:bg-[#45B7AF]", __source: { fileName: "", lineNumber: 460, columnNumber: 15 }, __self: this }, language === "es" ? "Pista" : "Hint")), showError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-center", __source: { fileName: "", lineNumber: 469, columnNumber: 15 }, __self: this }, language === "es" ? "¡Inténtalo de nuevo!" : "Try again!"), showSuccess && /*#__PURE__*/ React.createElement("p", { className: "text-green-500 text-center", __source: { fileName: "", lineNumber: 474, columnNumber: 15 }, __self: this }, language === "es" ? "¡Correcto!" : "Correct!"))), /*#__PURE__*/ React.createElement("div", { className: "passport bg-[#FFB347] p-6 rounded-lg", __source: { fileName: "", lineNumber: 480, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-crimson-text text-white mb-4", __source: { fileName: "", lineNumber: 481, columnNumber: 11 }, __self: this }, language === "es" ? "Mi Pasaporte 📘" : "My Passport 📘", " ", freeTripsUsed < 3 && /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 484, columnNumber: 15 }, __self: this }, language === "es" ? `(${3 - freeTripsUsed} viajes gratis restantes)` : `(${3 - freeTripsUsed} free trips remaining)`)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 491, columnNumber: 11 }, __self: this }, cities.map((city)=>/*#__PURE__*/ React.createElement("div", { key: city.name, className: `stamp-spot bg-[#FFE4B5] p-4 rounded-lg text-center ${passport.includes(city.name) ? "opacity-100" : "opacity-50 cursor-pointer"}`, onClick: ()=>!passport.includes(city.name) && setCurrentCity(city.name), __source: { fileName: "", lineNumber: 493, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this }, city.name), passport.includes(city.name) ? /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 506, columnNumber: 19 }, __self: this }, "✅") : freeTripsUsed < 3 && /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); useFreeTrip(city.name); }, className: "bg-[#4ECDC4] text-white px-2 py-1 rounded text-sm mt-2 hover:bg-[#45B7AF]", __source: { fileName: "", lineNumber: 509, columnNumber: 21 }, __self: this }, language === "es" ? "Usar viaje gratis" : "Use free trip"))))), passport.length === cities.length && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 527, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg text-center", __source: { fileName: "", lineNumber: 528, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4", __source: { fileName: "", lineNumber: 529, columnNumber: 15 }, __self: this }, "🎉"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 530, columnNumber: 15 }, __self: this }, language === "es" ? "¡Felicitaciones! Has completado todas las ciudades!" : "Congratulations! You've completed all cities!"))))); }

Pasaporte Hispano

📍 Madrid

Mi Pasaporte 📘 (3 viajes gratis restantes)