function SpotifyPlayer({ trackId }) { const [isLoading, setIsLoading] = useState(true); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[450px] mx-auto p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full bg-white rounded-xl shadow-lg overflow-hidden", style: { paddingTop: "120%" }, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-slate-100 animate-pulse rounded-xl", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("iframe", { className: "absolute top-0 left-0 w-full h-full border-0 rounded-xl", src: `https://open.spotify.com/embed/track/${trackId}?utm_source=generator`, allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture", onLoad: ()=>setIsLoading(false), __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }))); } function SpotifyPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-slate-50 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SpotifyPlayer, { trackId: "4cOdK2wGLETKBW3PvgPWqT", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-8", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SpotifyPlayer, { trackId: "0V3wPSX9ygBnCm8psDIegu", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function SpotifySearch() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [selectedTrack, setSelectedTrack] = useState(null); const [isPlayerLoading, setIsPlayerLoading] = useState(true); const handleSearch = useCallback(async ()=>{ if (!query.trim()) return; setLoading(true); setError(null); setSelectedTrack(null); try { const authResponse = await fetch("/api/spotify/auth", { method: "POST" }); if (!authResponse.ok) { throw new Error("Failed to authenticate with Spotify"); } const { token, error: authError } = await authResponse.json(); if (authError) { throw new Error(authError); } const response = await fetch(`https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track`, { headers: { Authorization: `Bearer ${token}` } }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); setResults(data.tracks?.items || []); } catch (err) { console.error(err); setError(err.message || "Unable to search tracks. Please try again."); } finally{ setLoading(false); } }, [ query ]); const handleBackToSearch = useCallback(()=>{ setSelectedTrack(null); setIsPlayerLoading(true); }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: query, onChange: (e)=>setQuery(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSearch(), placeholder: "Search for a track...", name: "search", className: "flex-1 px-4 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-[#1DB954] focus:border-transparent", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, disabled: loading, className: "bg-[#1DB954] text-white px-6 py-2 rounded-full hover:bg-[#1ed760] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 text-red-500 rounded-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, error)), loading && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 text-center", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-4 border-[#1DB954] border-t-transparent mx-auto", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Searching...")), !loading && !selectedTrack && results.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, results.map((track)=>/*#__PURE__*/ React.createElement("div", { key: track.id, className: "bg-white rounded-xl shadow-lg p-4", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: track.album?.images?.[1]?.url || "/default-album.png", alt: `Album artwork for ${track.album?.name}`, className: "w-20 h-20 object-cover rounded-lg", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium truncate", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, track.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm truncate", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }, track.artists?.[0]?.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedTrack(track.id), className: "mt-2 bg-[#1DB954] text-white px-4 py-1 rounded-full text-sm hover:bg-[#1ed760] transition-colors", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, "Play Track")))))), selectedTrack && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleBackToSearch, className: "text-[#1DB954] hover:text-[#1ed760] transition-colors flex items-center gap-2", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }), "Back to search results"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[450px] mx-auto", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full bg-white rounded-xl shadow-lg overflow-hidden", style: { paddingTop: "120%" }, __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, isPlayerLoading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-slate-100 animate-pulse rounded-xl", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("iframe", { className: "absolute top-0 left-0 w-full h-full border-0 rounded-xl", src: `https://open.spotify.com/embed/track/${selectedTrack}?utm_source=generator`, allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture", onLoad: ()=>setIsPlayerLoading(false), __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }))))); } function SpotifySearchStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-slate-50 p-4 md:p-8", __source: { fileName: "", lineNumber: 155, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SpotifySearch, { __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this })); } function LatestNewsResults() { const [articles, setArticles] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [language, setLanguage] = useState("en"); const languages = [ { code: "ar", name: "Arabic" }, { code: "zh", name: "Chinese" }, { code: "nl", name: "Dutch" }, { code: "en", name: "English" }, { code: "fi", name: "Finnish" }, { code: "fr", name: "French" }, { code: "de", name: "German" }, { code: "hi", name: "Hindi" }, { code: "it", name: "Italian" }, { code: "ja", name: "Japanese" }, { code: "ko", name: "Korean" }, { code: "msa", name: "Malay" }, { code: "pt", name: "Portuguese" }, { code: "ru", name: "Russian" }, { code: "es", name: "Spanish" } ]; const fetchNews = async (selectedLanguage)=>{ setLoading(true); setError(null); try { const response = await fetch("/api/fetch-latest-news", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ language: selectedLanguage }) }); if (!response.ok) { throw new Error(`Failed to fetch news: [${response.status}] ${response.statusText}`); } const data = await response.json(); if (data.error) { throw new Error(data.message); } setArticles(data.articles); } catch (err) { setError("Unable to load news articles. Please try again later."); console.error(err); } finally{ setLoading(false); } }; useEffect(()=>{ fetchNews(language); }, [ language ]); const formatDate = (dateString)=>{ return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-8", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "block w-40 p-2 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md focus:outline-none", name: "language", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, languages.map((lang)=>/*#__PURE__*/ React.createElement("option", { key: lang.code, value: lang.code, __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, lang.name)))), error && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 bg-red-50 dark:bg-red-900/10 rounded-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 dark:text-red-400 font-inter text-lg mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Unable to load news articles"), /*#__PURE__*/ React.createElement("p", { className: "text-red-500/80 dark:text-red-400/80 font-inter text-sm mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Please try again later"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>fetchNews(language), className: "px-6 py-2.5 bg-red-600 hover:bg-red-700 text-white font-inter rounded-md transition-colors focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Try Again")), loading && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4, 5, 6 ].map((index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 dark:bg-gray-700 h-48 rounded-lg mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-2/3", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this })))), !loading && !error && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, articles.map((article)=>/*#__PURE__*/ React.createElement("article", { key: article.id, className: "flex flex-col bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: article.url, target: "_blank", rel: "noopener noreferrer", className: "group flex flex-col flex-1 hover:opacity-95 transition-opacity", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative pb-[56.25%] overflow-hidden", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: article.image === "None" || !article.image ? "https://images.pexels.com/photos/518543/pexels-photo-518543.jpeg" : article.image, alt: article.title, className: "absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", __source: { fileName: "", lineNumber: 128, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col flex-1", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-inter text-gray-900 dark:text-white mb-2 line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400", __source: { fileName: "", lineNumber: 139, columnNumber: 21 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-inter text-gray-700 dark:text-gray-300 mb-4 line-clamp-3", __source: { fileName: "", lineNumber: 142, columnNumber: 21 }, __self: this }, article.description), /*#__PURE__*/ React.createElement("div", { className: "mt-auto", __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-xs font-inter text-gray-500 dark:text-gray-400 mb-2", __source: { fileName: "", lineNumber: 146, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 147, columnNumber: 25 }, __self: this }, article.author || "Unknown Author"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 148, columnNumber: 25 }, __self: this }, formatDate(article.published))), /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-500", __source: { fileName: "", lineNumber: 150, columnNumber: 23 }, __self: this }, "Read more ", /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 151, columnNumber: 35 }, __self: this }, "→")))))))), !loading && !error && articles.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "No articles found")))); } function LatestNewsResultsStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 175, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LatestNewsResults, { __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this })); } const COMMON_CURRENCIES = [ { code: "USD", name: "US Dollar" }, { code: "EUR", name: "Euro" }, { code: "GBP", name: "British Pound" }, { code: "JPY", name: "Japanese Yen" }, { code: "AUD", name: "Australian Dollar" }, { code: "CAD", name: "Canadian Dollar" }, { code: "CHF", name: "Swiss Franc" }, { code: "CNY", name: "Chinese Yuan" }, { code: "INR", name: "Indian Rupee" }, { code: "NZD", name: "New Zealand Dollar" }, { code: "SGD", name: "Singapore Dollar" }, { code: "HKD", name: "Hong Kong Dollar" } ].sort((a, b)=>a.code.localeCompare(b.code)); function CurrencyExchange() { const [fromCurrency, setFromCurrency] = useState("USD"); const [toCurrency, setToCurrency] = useState("EUR"); const [amount, setAmount] = useState(1); const [exchangeData, setExchangeData] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const getExchangeRate = async ()=>{ setIsLoading(true); setError(null); const response = await fetch("/api/exchange-rate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ from: fromCurrency, to: toCurrency }) }); const data = await response.json(); if (data.error) { setError(data.error); } else { setExchangeData(data); } setIsLoading(false); }; const handleAmountChange = (e)=>{ const value = e.target.value; if (value === "" || value >= 0) { setAmount(value); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto p-6 rounded-lg bg-white dark:bg-gray-800 shadow-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-inter font-semibold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Currency Exchange"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("input", { type: "number", min: "0", step: "any", value: amount, onChange: handleAmountChange, className: "w-full p-3 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600 text-gray-900 dark:text-white font-inter", placeholder: "Enter amount", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "From"), /*#__PURE__*/ React.createElement("select", { value: fromCurrency, onChange: (e)=>setFromCurrency(e.target.value), className: "w-full p-3 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600 text-gray-900 dark:text-white font-inter appearance-none", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, COMMON_CURRENCIES.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency.code, value: currency.code, __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, currency.code, " - ", currency.name)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "To"), /*#__PURE__*/ React.createElement("select", { value: toCurrency, onChange: (e)=>setToCurrency(e.target.value), className: "w-full p-3 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600 text-gray-900 dark:text-white font-inter appearance-none", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, COMMON_CURRENCIES.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency.code, value: currency.code, __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, currency.code, " - ", currency.name)))))), /*#__PURE__*/ React.createElement("button", { onClick: getExchangeRate, disabled: isLoading || !amount, className: "w-full p-3 bg-gray-900 hover:bg-gray-800 text-white font-inter rounded-lg transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, isLoading ? "Getting Rate..." : "Get Exchange Rate"), error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 rounded-lg", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 dark:text-red-400 font-inter text-sm", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, error)), isLoading && /*#__PURE__*/ React.createElement("div", { className: "space-y-3 animate-pulse", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 dark:bg-gray-700 rounded-lg w-3/4", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded-lg w-1/2", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this })), exchangeData && !isLoading && !error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg space-y-2", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-semibold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, amount, " ", exchangeData.fromCurrency, " =", " ", (amount * exchangeData.rate).toFixed(2), " ", exchangeData.toCurrency), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Rate: 1 ", exchangeData.fromCurrency, " =", " ", exchangeData.rate.toFixed(4), " ", exchangeData.toCurrency), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, "Last updated:", " ", new Date(exchangeData.lastUpdated).toLocaleString())))); } function CurrencyExchangeStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 p-4", __source: { fileName: "", lineNumber: 165, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CurrencyExchange, { __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this })); } function YouTubePlayer({ videoId, onError }) { const [isLoading, setIsLoading] = useState(true); const [hasError, setHasError] = useState(false); useEffect(()=>{ if (!videoId) { setHasError(true); onError?.("No video ID provided"); return; } const timer = setTimeout(()=>{ setIsLoading(false); }, 1500); return ()=>clearTimeout(timer); }, [ videoId, onError ]); if (hasError) { return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white dark:bg-gray-900 rounded-lg p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Failed to load video"))); } return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white dark:bg-gray-900 rounded-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 border-4 border-gray-200 dark:border-gray-700 border-t-gray-900 dark:border-t-gray-100 rounded-full animate-spin", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })) : null, /*#__PURE__*/ React.createElement("iframe", { className: "absolute inset-0 w-full h-full", src: `https://www.youtube.com/embed/${videoId}?controls=1`, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }))); } function YouTubePlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-inter text-gray-900 dark:text-gray-100 mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Working Example"), /*#__PURE__*/ React.createElement(YouTubePlayer, { videoId: "dQw4w9WgXcQ", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-inter text-gray-900 dark:text-gray-100 mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(YouTubePlayer, { videoId: "", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [movieQuery, setMovieQuery] = useState(""); const [bookQuery, setBookQuery] = useState(""); const [gifQuery, setGifQuery] = useState(""); const [movies, setMovies] = useState([]); const [books, setBooks] = useState([]); const [gifs, setGifs] = useState([]); const [selectedMovie, setSelectedMovie] = useState(null); const [selectedMovieDetails, setSelectedMovieDetails] = useState(null); const [showModal, setShowModal] = useState(false); const [loading, setLoading] = useState({ movies: false, books: false, gifs: false }); const [error, setError] = useState({ movies: null, books: null, gifs: null }); const fetchMovieDetails = async (imdbID)=>{ try { const response = await fetch(`/integrations/movies-and-tv-series/?i=${imdbID}`); if (!response.ok) throw new Error("Failed to fetch movie details"); const data = await response.json(); setSelectedMovieDetails(data); } catch (err) { console.error("Error fetching movie details:", err); } }; const handleMovieClick = (movie)=>{ setSelectedMovie(movie); fetchMovieDetails(movie.imdbID); setShowModal(true); }; const shareGif = (gif)=>{ navigator.clipboard.writeText(gif.url); alert("GIF link copied to clipboard!"); }; const searchMovies = async (query)=>{ setLoading((prev)=>({ ...prev, movies: true })); setError((prev)=>({ ...prev, movies: null })); try { const response = await fetch(`/integrations/movies-and-tv-series/?s=${encodeURIComponent(query)}`); if (!response.ok) throw new Error("Failed to fetch movies"); const data = await response.json(); setMovies(data.Search || []); } catch (err) { setError((prev)=>({ ...prev, movies: err.message })); } finally{ setLoading((prev)=>({ ...prev, movies: false })); } }; const searchBooks = async (query)=>{ setLoading((prev)=>({ ...prev, books: true })); setError((prev)=>({ ...prev, books: null })); try { const response = await fetch(`/integrations/book-search/?q=${encodeURIComponent(query)}`); if (!response.ok) throw new Error("Failed to fetch books"); const data = await response.json(); setBooks(data.docs || []); } catch (err) { setError((prev)=>({ ...prev, books: err.message })); } finally{ setLoading((prev)=>({ ...prev, books: false })); } }; const searchGifs = async (query)=>{ setLoading((prev)=>({ ...prev, gifs: true })); setError((prev)=>({ ...prev, gifs: null })); try { const response = await fetch("/api/search-giphy", { method: "POST", body: JSON.stringify({ query }) }); if (!response.ok) throw new Error("Failed to fetch GIFs"); const data = await response.json(); setGifs(data.gifs || []); } catch (err) { setError((prev)=>({ ...prev, gifs: err.message })); } finally{ setLoading((prev)=>({ ...prev, gifs: false })); } }; useEffect(()=>{ searchMovies("trending"); searchBooks("bestseller"); searchGifs("trending"); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0A0A0A] text-white", __source: { fileName: "", lineNumber: 101, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#141414] border-b border-[#222222] py-8 px-4 md:px-6", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Entertainment Hub"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mt-2", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Discover movies, books, and trending GIFs"))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 md:px-6 py-8 space-y-12", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-[#141414] p-6 rounded-2xl border border-[#222222]", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-600", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "Movies & TV"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full md:w-auto", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: movieQuery, onChange: (e)=>setMovieQuery(e.target.value), onKeyPress: (e)=>e.key === "Enter" && searchMovies(movieQuery), placeholder: "Search movies...", className: "w-full md:w-64 bg-[#1A1A1A] rounded-xl px-4 py-2 border border-[#222222] focus:border-blue-500 focus:outline-none", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>searchMovies(movieQuery), className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-400", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, loading.movies ? Array.from({ length: 4 }).fill().map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "bg-[#1A1A1A] rounded-xl p-4 animate-pulse", __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#222222] aspect-[2/3] rounded-xl mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-[#222222] rounded-xl w-3/4 mb-2", __source: { fileName: "", lineNumber: 148, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-[#222222] rounded-xl w-1/2", __source: { fileName: "", lineNumber: 149, columnNumber: 23 }, __self: this }))) : movies.map((movie)=>/*#__PURE__*/ React.createElement("div", { key: movie.imdbID, onClick: ()=>handleMovieClick(movie), className: "cursor-pointer group bg-[#1A1A1A] rounded-xl overflow-hidden hover:scale-105 transition-all duration-300 border border-[#222222] hover:border-blue-500", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-[2/3]", __source: { fileName: "", lineNumber: 158, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: movie.Poster, alt: movie.Title, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 159, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 164, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 166, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg truncate", __source: { fileName: "", lineNumber: 167, columnNumber: 23 }, __self: this }, movie.Title), /*#__PURE__*/ React.createElement("p", { className: "text-blue-400 text-sm", __source: { fileName: "", lineNumber: 170, columnNumber: 23 }, __self: this }, movie.Year)))))), /*#__PURE__*/ React.createElement("section", { className: "bg-[#141414] p-6 rounded-2xl border border-[#222222]", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-purple-600", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, "Books"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full md:w-auto", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: bookQuery, onChange: (e)=>setBookQuery(e.target.value), onKeyPress: (e)=>e.key === "Enter" && searchBooks(bookQuery), placeholder: "Search books...", className: "w-full md:w-64 bg-[#1A1A1A] rounded-xl px-4 py-2 border border-[#222222] focus:border-purple-500 focus:outline-none", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>searchBooks(bookQuery), className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-purple-400", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 199, columnNumber: 11 }, __self: this }, loading.books ? Array.from({ length: 4 }).fill().map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "bg-[#1A1A1A] rounded-xl p-4 animate-pulse", __source: { fileName: "", lineNumber: 204, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#222222] aspect-[2/3] rounded-xl mb-4", __source: { fileName: "", lineNumber: 208, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-[#222222] rounded-xl w-3/4 mb-2", __source: { fileName: "", lineNumber: 209, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-[#222222] rounded-xl w-1/2", __source: { fileName: "", lineNumber: 210, columnNumber: 23 }, __self: this }))) : books.map((book)=>/*#__PURE__*/ React.createElement("div", { key: book.key, className: "bg-[#1A1A1A] rounded-xl overflow-hidden hover:scale-105 transition-all duration-300 border border-[#222222] hover:border-purple-500", __source: { fileName: "", lineNumber: 214, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-[2/3]", __source: { fileName: "", lineNumber: 218, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: book.cover_i ? `https://covers.openlibrary.org/b/id/${book.cover_i}-L.jpg` : "https://via.placeholder.com/300x450?text=No+Cover", alt: book.title, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 219, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 to-transparent", __source: { fileName: "", lineNumber: 228, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 230, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg truncate", __source: { fileName: "", lineNumber: 231, columnNumber: 23 }, __self: this }, book.title), /*#__PURE__*/ React.createElement("p", { className: "text-purple-400 text-sm", __source: { fileName: "", lineNumber: 234, columnNumber: 23 }, __self: this }, book.author_name?.[0] || "Unknown Author"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm mt-2", __source: { fileName: "", lineNumber: 237, columnNumber: 23 }, __self: this }, book.first_publish_year ? `First published: ${book.first_publish_year}` : "Publication year unknown")))))), /*#__PURE__*/ React.createElement("section", { className: "bg-[#141414] p-6 rounded-2xl border border-[#222222]", __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-green-600", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, "GIFs"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full md:w-auto", __source: { fileName: "", lineNumber: 253, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: gifQuery, onChange: (e)=>setGifQuery(e.target.value), onKeyPress: (e)=>e.key === "Enter" && searchGifs(gifQuery), placeholder: "Search GIFs...", className: "w-full md:w-64 bg-[#1A1A1A] rounded-xl px-4 py-2 border border-[#222222] focus:border-green-500 focus:outline-none", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>searchGifs(gifQuery), className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-green-400", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 270, columnNumber: 11 }, __self: this }, loading.gifs ? Array.from({ length: 4 }).fill().map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "bg-[#1A1A1A] rounded-xl p-4 animate-pulse", __source: { fileName: "", lineNumber: 275, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#222222] aspect-video rounded-xl", __source: { fileName: "", lineNumber: 279, columnNumber: 23 }, __self: this }))) : gifs.map((gif)=>/*#__PURE__*/ React.createElement("div", { key: gif.id, className: "group bg-[#1A1A1A] rounded-xl overflow-hidden hover:scale-105 transition-all duration-300 border border-[#222222] hover:border-green-500", __source: { fileName: "", lineNumber: 283, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-video", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: gif.url, alt: "GIF", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 288, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>shareGif(gif), className: "absolute top-2 right-2 bg-black/50 p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 293, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt text-white", __source: { fileName: "", lineNumber: 297, columnNumber: 25 }, __self: this }))))))), showModal && selectedMovie && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 306, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#141414] rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border border-[#222222]", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 308, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(false), className: "absolute top-4 right-4 text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 309, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 313, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedMovie.Poster, alt: selectedMovie.Title, className: "w-full md:w-64 rounded-xl", __source: { fileName: "", lineNumber: 318, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 323, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 324, columnNumber: 23 }, __self: this }, selectedMovie.Title), /*#__PURE__*/ React.createElement("p", { className: "text-blue-400 mb-4", __source: { fileName: "", lineNumber: 327, columnNumber: 23 }, __self: this }, selectedMovie.Year), selectedMovieDetails && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-4", __source: { fileName: "", lineNumber: 331, columnNumber: 27 }, __self: this }, selectedMovieDetails.Plot), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 text-sm", __source: { fileName: "", lineNumber: 334, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 335, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 336, columnNumber: 31 }, __self: this }, "Director"), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 337, columnNumber: 31 }, __self: this }, selectedMovieDetails.Director)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 341, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 342, columnNumber: 31 }, __self: this }, "Runtime"), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 343, columnNumber: 31 }, __self: this }, selectedMovieDetails.Runtime)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 347, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 348, columnNumber: 31 }, __self: this }, "Genre"), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 349, columnNumber: 31 }, __self: this }, selectedMovieDetails.Genre)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 353, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 354, columnNumber: 31 }, __self: this }, "Rating"), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 355, columnNumber: 31 }, __self: this }, selectedMovieDetails.imdbRating))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 361, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 362, columnNumber: 29 }, __self: this }, "Cast"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 363, columnNumber: 29 }, __self: this }, selectedMovieDetails.Actors))))))))))); }