function MainComponent() { const [selectedLocation, setSelectedLocation] = useState(null); const [forecast, setForecast] = useState(null); const [loading, setLoading] = useState(false); const [mapCenter, setMapCenter] = useState({ lat: 65, lng: -100 }); const [zoom, setZoom] = useState(3); const [stars, setStars] = useState([]); const [auroraStrength, setAuroraStrength] = useState(0); const [expandedCountry, setExpandedCountry] = useState(null); const [searchTerm, setSearchTerm] = useState(""); const [selectedRegion, setSelectedRegion] = useState(null); const [regions] = useState([ "North America", "South America", "Europe", "Asia", "Africa", "Oceania" ]); const [auroraZone] = useState([ { lat: 68, lng: -160 }, { lat: 68, lng: -140 }, { lat: 67, lng: -120 }, { lat: 65, lng: -100 }, { lat: 63, lng: -80 }, { lat: 62, lng: -60 }, { lat: 61, lng: -40 }, { lat: 60, lng: -20 }, { lat: 60, lng: 0 }, { lat: 61, lng: 20 }, { lat: 62, lng: 40 }, { lat: 63, lng: 60 }, { lat: 64, lng: 80 }, { lat: 65, lng: 100 }, { lat: 66, lng: 120 }, { lat: 67, lng: 140 }, { lat: 68, lng: 160 }, { lat: 68, lng: 180 } ]); const [topLocations] = useState({ "North America": [ { country: "Canada", city: "Yellowknife", likelihood: 70, lat: 62.4, lng: -114.4 }, { country: "Canada", city: "Whitehorse", likelihood: 68, lat: 60.7, lng: -135.0 }, { country: "Canada", city: "Churchill", likelihood: 65, lat: 58.7, lng: -94.1 }, { country: "USA", city: "Fairbanks", likelihood: 75, lat: 64.8, lng: -147.7 }, { country: "USA", city: "Anchorage", likelihood: 65, lat: 61.2, lng: -149.9 }, { country: "Greenland", city: "Nuuk", likelihood: 72, lat: 64.2, lng: -51.7 } ], "South America": [ { country: "Chile", city: "Punta Arenas", likelihood: 35, lat: -53.2, lng: -70.9 }, { country: "Argentina", city: "Ushuaia", likelihood: 33, lat: -54.8, lng: -68.3 } ], Europe: [ { country: "Iceland", city: "Reykjavik", likelihood: 85, lat: 64.1, lng: -21.9 }, { country: "Iceland", city: "Akureyri", likelihood: 82, lat: 65.7, lng: -18.1 }, { country: "Norway", city: "Tromsø", likelihood: 80, lat: 69.6, lng: 18.9 }, { country: "Norway", city: "Alta", likelihood: 78, lat: 69.9, lng: 23.2 }, { country: "Finland", city: "Rovaniemi", likelihood: 75, lat: 66.5, lng: 25.7 }, { country: "Finland", city: "Inari", likelihood: 73, lat: 68.9, lng: 27.0 }, { country: "Sweden", city: "Kiruna", likelihood: 65, lat: 67.8, lng: 20.2 }, { country: "Sweden", city: "Abisko", likelihood: 63, lat: 68.3, lng: 18.8 }, { country: "Scotland", city: "Shetland", likelihood: 55, lat: 60.4, lng: -1.4 } ], Asia: [ { country: "Russia", city: "Murmansk", likelihood: 75, lat: 68.9, lng: 33.1 }, { country: "Russia", city: "Norilsk", likelihood: 70, lat: 69.3, lng: 88.2 }, { country: "Russia", city: "Yakutsk", likelihood: 65, lat: 62.0, lng: 129.7 }, { country: "Russia", city: "Anadyr", likelihood: 64, lat: 64.7, lng: 177.5 } ], Africa: [ { country: "South Africa", city: "Cape Town", likelihood: 15, lat: -33.9, lng: 18.4 }, { country: "South Africa", city: "Port Elizabeth", likelihood: 12, lat: -33.9, lng: 25.6 } ], Oceania: [ { country: "New Zealand", city: "Invercargill", likelihood: 40, lat: -46.4, lng: 168.4 }, { country: "New Zealand", city: "Dunedin", likelihood: 38, lat: -45.9, lng: 170.5 }, { country: "Australia", city: "Hobart", likelihood: 35, lat: -42.9, lng: 147.3 }, { country: "Australia", city: "Melbourne", likelihood: 30, lat: -37.8, lng: 145.0 } ] }); useEffect(()=>{ const newStars = Array.from({ length: 100 }).fill().map(()=>({ left: Math.random() * 100, top: Math.random() * 100, animationDuration: 2 + Math.random() * 3 })); }, []); const checkForecast = async (lat, lng)=>{ setLoading(true); try { const weatherResponse = await WeatherByCity({ location: `${lat},${lng}` }); const conditions = weatherResponse?.data?.current; const cloudCover = conditions?.cloud || 0; const visibility = conditions?.visibility || 0; setForecast({ cloudCover, visibility, idealViewing: cloudCover < 30 && visibility > 8, temperature: conditions?.temp_c }); } catch (error) { console.error(error); } setLoading(false); }; const handleMapClick = (e)=>{ const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const lng = x / rect.width * 360 - 180; const lat = 90 - y / rect.height * 180; setSelectedLocation({ lat, lng }); checkForecast(lat, lng); setAuroraStrength(Math.random() * 100); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0B0B2E] text-white relative", __source: { fileName: "", lineNumber: 283, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-10", __source: { fileName: "", lineNumber: 284, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full w-full", __source: { fileName: "", lineNumber: 285, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d40000000.0!2d-100!3d65!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1635000000000!5m2!1sen!2sus", width: "100%", height: "100%", style: { border: 0 }, allowFullScreen: "", loading: "lazy", className: "opacity-80", __source: { fileName: "", lineNumber: 286, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-[#0B0B2E]/80 to-transparent", __source: { fileName: "", lineNumber: 296, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-20 p-6", __source: { fileName: "", lineNumber: 299, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-aurora mb-8 text-[#7ee787] text-center", __source: { fileName: "", lineNumber: 300, columnNumber: 9 }, __self: this }, "Aurora Watch"), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto relative", __source: { fileName: "", lineNumber: 304, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[600px] rounded-xl overflow-hidden relative mb-8 border-2 border-[#7ee787]/30", __source: { fileName: "", lineNumber: 305, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "map", className: "h-full w-full", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 cursor-crosshair", onClick: handleMapClick, __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, auroraZone.map((point, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute w-4 h-4", style: { left: `${(point.lng + 180) / 360 * 100}%`, top: `${(90 - point.lat) / 180 * 100}%` }, __source: { fileName: "", lineNumber: 312, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-[#7ee787] rounded-full opacity-75", __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#7ee787] rounded-full animate-ping", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-8 bg-[#7ee787] rounded-full opacity-10 animate-pulse", __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this }))), selectedLocation && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "absolute w-40 h-40 -translate-x-1/2 -translate-y-1/2 transition-all duration-1000", style: { left: `${(selectedLocation.lng + 180) / 360 * 100}%`, top: `${(90 - selectedLocation.lat) / 180 * 100}%` }, __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full rounded-full animate-ping opacity-20", style: { background: `radial-gradient(circle, rgba(126,231,135,0.3) 0%, rgba(126,231,135,0) 70%)` }, __source: { fileName: "", lineNumber: 335, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute w-6 h-6 transform -translate-x-1/2 -translate-y-1/2 z-30", style: { left: `${(selectedLocation.lng + 180) / 360 * 100}%`, top: `${(90 - selectedLocation.lat) / 180 * 100}%` }, __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-red-500 rounded-full animate-pulse", __source: { fileName: "", lineNumber: 349, columnNumber: 21 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-lg bg-[#2a2a40]/30 rounded-lg p-6 border border-[#7ee787]/20", __source: { fileName: "", lineNumber: 356, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", placeholder: "Search for a location...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full p-3 rounded bg-[#343450]/50 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#7ee787]", __source: { fileName: "", lineNumber: 357, columnNumber: 13 }, __self: this })), forecast && /*#__PURE__*/ React.createElement("div", { className: "mt-6 backdrop-blur-lg bg-[#2a2a40]/30 rounded-lg p-6 border border-[#7ee787]/20", __source: { fileName: "", lineNumber: 368, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between gap-6", __source: { fileName: "", lineNumber: 369, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 370, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#7ee787] mb-2", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this }, "Current Conditions"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 374, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 375, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-temperature-low text-[#7ee787]", __source: { fileName: "", lineNumber: 376, columnNumber: 23 }, __self: this }), "Temperature: ", forecast.temperature, "°C"), /*#__PURE__*/ React.createElement("p", { className: "text-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 379, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud text-[#7ee787]", __source: { fileName: "", lineNumber: 380, columnNumber: 23 }, __self: this }), "Cloud Cover: ", forecast.cloudCover, "%"), /*#__PURE__*/ React.createElement("p", { className: "text-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 383, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-location-dot text-[#7ee787]", __source: { fileName: "", lineNumber: 384, columnNumber: 23 }, __self: this }), selectedLocation?.lat.toFixed(2), "°N,", " ", selectedLocation?.lng.toFixed(2), "°E"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-700 rounded-full h-2.5 mt-4", __source: { fileName: "", lineNumber: 388, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#7ee787] h-2.5 rounded-full transition-all duration-1000", style: { width: `${auroraStrength}%` }, __source: { fileName: "", lineNumber: 389, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 394, columnNumber: 21 }, __self: this }, "Aurora Activity Level"))), /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-lg ${forecast.idealViewing ? "bg-[#285c37]/50" : "bg-[#5c2828]/50"} transform hover:scale-105 transition-all duration-300`, __source: { fileName: "", lineNumber: 399, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-center", __source: { fileName: "", lineNumber: 402, columnNumber: 19 }, __self: this }, forecast.idealViewing ? "✨ Potential Aurora Visible" : "❌ Poor Viewing Conditions")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 backdrop-blur-lg bg-[#2a2a40]/30 rounded-lg p-6 border border-[#7ee787]/20", __source: { fileName: "", lineNumber: 412, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mb-6", __source: { fileName: "", lineNumber: 413, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search locations...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "flex-1 p-3 rounded bg-[#343450]/50 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#7ee787]", __source: { fileName: "", lineNumber: 414, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 flex-wrap", __source: { fileName: "", lineNumber: 421, columnNumber: 15 }, __self: this }, regions.map((region)=>/*#__PURE__*/ React.createElement("button", { key: region, onClick: ()=>setSelectedRegion(selectedRegion === region ? null : region), className: `px-4 py-2 rounded-lg transition-colors ${selectedRegion === region ? "bg-[#7ee787] text-[#0B0B2E]" : "bg-[#7ee787]/20 text-[#7ee787] hover:bg-[#7ee787]/30"}`, __source: { fileName: "", lineNumber: 423, columnNumber: 19 }, __self: this }, region)))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#7ee787] mb-6 flex items-center gap-2", __source: { fileName: "", lineNumber: 441, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-[#7ee787]", __source: { fileName: "", lineNumber: 442, columnNumber: 15 }, __self: this }), "Top Aurora Viewing Locations"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 445, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 446, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 447, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b border-[#7ee787]/20", __source: { fileName: "", lineNumber: 448, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left", __source: { fileName: "", lineNumber: 449, columnNumber: 21 }, __self: this }, "Country"), /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left", __source: { fileName: "", lineNumber: 450, columnNumber: 21 }, __self: this }, "City"), /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left", __source: { fileName: "", lineNumber: 451, columnNumber: 21 }, __self: this }, "Likelihood"), /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left", __source: { fileName: "", lineNumber: 452, columnNumber: 21 }, __self: this }, "Action"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 455, columnNumber: 17 }, __self: this }, Object.entries(topLocations).filter(([country])=>(!selectedRegion || country.includes(selectedRegion)) && (!searchTerm || country.toLowerCase().includes(searchTerm.toLowerCase()))).map(([country, cities])=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("tr", { key: country, className: "border-b border-[#7ee787]/10 hover:bg-[#7ee787]/5 transition-colors cursor-pointer", onClick: ()=>setExpandedCountry(expandedCountry === country ? null : country), __source: { fileName: "", lineNumber: 467, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4", __source: { fileName: "", lineNumber: 476, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 477, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-${expandedCountry === country ? "down" : "right"} text-[#7ee787]`, __source: { fileName: "", lineNumber: 478, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-globe text-[#7ee787]", __source: { fileName: "", lineNumber: 481, columnNumber: 31 }, __self: this }), country)), /*#__PURE__*/ React.createElement("td", { className: "py-4", __source: { fileName: "", lineNumber: 485, columnNumber: 27 }, __self: this }, cities[0].city), /*#__PURE__*/ React.createElement("td", { className: "py-4", __source: { fileName: "", lineNumber: 486, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 487, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-24 bg-gray-700 rounded-full h-2", __source: { fileName: "", lineNumber: 488, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#7ee787] h-2 rounded-full", style: { width: `${cities[0].likelihood}%` }, __source: { fileName: "", lineNumber: 489, columnNumber: 33 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 494, columnNumber: 31 }, __self: this }, cities[0].likelihood, "%"))), /*#__PURE__*/ React.createElement("td", { className: "py-4", __source: { fileName: "", lineNumber: 497, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); setSelectedLocation({ lat: cities[0].lat, lng: cities[0].lng }); checkForecast(cities[0].lat, cities[0].lng); }, className: "px-4 py-2 rounded-lg bg-[#7ee787]/20 hover:bg-[#7ee787]/30 transition-colors text-[#7ee787]", __source: { fileName: "", lineNumber: 498, columnNumber: 29 }, __self: this }, "Check Now"))), expandedCountry === country && cities.filter((city)=>!searchTerm || city.city.toLowerCase().includes(searchTerm.toLowerCase())).map((city, index)=>/*#__PURE__*/ React.createElement("tr", { key: `${country}-${city.city}`, className: "border-b border-[#7ee787]/10 bg-[#7ee787]/5", __source: { fileName: "", lineNumber: 523, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4 pl-10", __source: { fileName: "", lineNumber: 527, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("td", { className: "py-4", __source: { fileName: "", lineNumber: 528, columnNumber: 33 }, __self: this }, city.city), /*#__PURE__*/ React.createElement("td", { className: "py-4", __source: { fileName: "", lineNumber: 529, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 530, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-24 bg-gray-700 rounded-full h-2", __source: { fileName: "", lineNumber: 531, columnNumber: 37 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#7ee787] h-2 rounded-full", style: { width: `${city.likelihood}%` }, __source: { fileName: "", lineNumber: 532, columnNumber: 39 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 537, columnNumber: 37 }, __self: this }, city.likelihood, "%"))), /*#__PURE__*/ React.createElement("td", { className: "py-4", __source: { fileName: "", lineNumber: 540, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedLocation({ lat: city.lat, lng: city.lng }); checkForecast(city.lat, city.lng); }, className: "px-4 py-2 rounded-lg bg-[#7ee787]/20 hover:bg-[#7ee787]/30 transition-colors text-[#7ee787]", __source: { fileName: "", lineNumber: 541, columnNumber: 35 }, __self: this }, "Check Now")))))))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 565, columnNumber: 7 }, __self: this }, ` @keyframes aurora { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } `), /*#__PURE__*/ React.createElement("script", { __source: { fileName: "", lineNumber: 572, columnNumber: 7 }, __self: this }, ` function initMap() { const map = new google.maps.Map(document.getElementById('map'), { center: { lat: ${mapCenter.lat}, lng: ${mapCenter.lng} }, zoom: ${zoom}, styles: [ { elementType: 'geometry', stylers: [{ color: '#242f3e' }] }, { elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] }, { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] }, { featureType: 'water', elementType: 'geometry', stylers: [{ color: '#17263c' }] } ] }); } `), /*#__PURE__*/ React.createElement("script", { src: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap", async: true, defer: true, __source: { fileName: "", lineNumber: 599, columnNumber: 7 }, __self: this })); }

Country	City	Likelihood
North America	Yellowknife	70%
South America	Punta Arenas	35%
Europe	Reykjavik	85%
Asia	Murmansk	75%
Africa	Cape Town	15%
Oceania	Invercargill	40%