function MainComponent() { const [news, setNews] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [currentIndex, setCurrentIndex] = React.useState(0); const [selectedCategory, setSelectedCategory] = React.useState("Latest"); const [showComments, setShowComments] = React.useState(false); const [comments, setComments] = React.useState({}); const [newComment, setNewComment] = React.useState(""); const [likes, setLikes] = React.useState({}); const categories = [ "Latest", "Mobile", "Gadgets", "Internet", "Virtual reality", "Artificial intelligence", "Computing" ]; const fetchTechNews = React.useCallback(async ()=>{ try { setLoading(true); // Start with immediate basic stories for instant display const quickStories = [ { id: Date.now() + Math.random() * 1000, title: "Loading Latest Tech News...", snippet: "Fetching the most recent technology updates from multiple sources.", aiSummary: "Getting fresh tech stories for you right now!", link: "#", source: "TechReel", timestamp: new Date().toLocaleTimeString(), timeAgo: "Just now", imageUrl: null, category: "Latest", author: "TechReel Team", isEnhanced: false } ]; setNews(quickStories); setLoading(false); // Show UI immediately // Parallel fetch all sources simultaneously const fetchPromises = []; // RSS Feed Promise const rssPromise = fetch("/integrations/web-scraping/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: "https://news.google.com/rss/topics/CAAqKggKIiRDQkFTRlFvSUwyMHZNRGRqTVhZV0JXVnVMVWRDR2dKSlRpZ0FQAQ?hl=en-US&gl=US&ceid=US:en", getText: false }) }).then((response)=>response.ok ? response.text() : null).catch(()=>null); // Multiple search queries in parallel const searchQueries = [ "latest technology news 2025", "AI artificial intelligence news today", "mobile phone smartphone news", "gadgets devices tech news", "virtual reality VR AR news", "internet social media tech news", "computing software programming news", "tech startups innovation news", "cybersecurity tech news today", "electric vehicles tech news" ]; const searchPromises = searchQueries.map((query)=>fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`).then((response)=>response.ok ? response.json() : null).catch(()=>null)); // Execute all fetches in parallel const [rssContent, ...searchResults] = await Promise.all([ rssPromise, ...searchPromises ]); let allNewsItems = []; // Process RSS content if (rssContent) { try { const parser = new DOMParser(); const xmlDoc = parser.parseFromString(rssContent, "text/xml"); const items = xmlDoc.querySelectorAll("item"); if (items.length > 0) { const rssItems = Array.from(items).slice(0, 25).map((item, index)=>{ const title = item.querySelector("title")?.textContent || "No title"; const description = item.querySelector("description")?.textContent || "No description"; const link = item.querySelector("link")?.textContent || "#"; const pubDate = item.querySelector("pubDate")?.textContent || new Date().toISOString(); const sourceElement = item.querySelector("source"); const source = sourceElement?.textContent || sourceElement?.getAttribute("url") || "Google News"; const cleanDescription = description.replace(//g, "").replace(/<[^>]*>/g, "").trim(); // Fast category detection const combinedText = `${title.toLowerCase()} ${cleanDescription.toLowerCase()}`; let category = "Latest"; if (combinedText.match(/\b(iphone|android|mobile|smartphone|ios|samsung|pixel|phone|app store|google play|xiaomi|oneplus|huawei|oppo|vivo)\b/)) { category = "Mobile"; } else if (combinedText.match(/\b(ai|artificial intelligence|machine learning|chatgpt|openai|neural|deep learning|llm|gpt|claude|gemini|copilot|bard|midjourney|stable diffusion)\b/)) { category = "Artificial intelligence"; } else if (combinedText.match(/\b(vr|virtual reality|ar|augmented reality|meta quest|oculus|mixed reality|metaverse|headset|apple vision|hololens)\b/)) { category = "Virtual reality"; } else if (combinedText.match(/\b(gadget|device|wearable|smartwatch|earbuds|headphones|tablet|laptop|camera|drone|smart home|alexa|google home|airpods|ipad|macbook)\b/)) { category = "Gadgets"; } else if (combinedText.match(/\b(internet|web|browser|website|online|social media|facebook|twitter|instagram|tiktok|youtube|streaming|netflix|wifi|5g|broadband|discord|reddit|linkedin)\b/)) { category = "Internet"; } else if (combinedText.match(/\b(computer|pc|processor|cpu|gpu|nvidia|amd|intel|software|windows|macos|linux|programming|coding|developer|github|cloud|server|database|microsoft|apple|google)\b/)) { category = "Computing"; } const publishDate = new Date(pubDate); const diffHours = Math.floor((new Date() - publishDate) / (1000 * 60 * 60)); const timeAgo = diffHours < 1 ? "Just now" : diffHours < 24 ? `${diffHours}h ago` : `${Math.floor(diffHours / 24)}d ago`; let sourceName = "Google News"; if (source.includes("http")) { try { const url = new URL(source); sourceName = url.hostname.replace("www.", "").split(".")[0]; } catch (e) { sourceName = source.replace("www.", "").split(".")[0]; } } else { sourceName = source; } return { id: Date.now() + index + Math.random() * 1000, title, snippet: cleanDescription, aiSummary: cleanDescription, link, source: sourceName.charAt(0).toUpperCase() + sourceName.slice(1), timestamp: publishDate.toLocaleTimeString(), timeAgo, imageUrl: null, category, author: "TechReel Team", isEnhanced: false }; }); allNewsItems = [ ...allNewsItems, ...rssItems ]; } } catch (parseError) { console.error("Error parsing RSS:", parseError); } } // Process search results in parallel searchResults.forEach((searchData, queryIndex)=>{ if (searchData?.status === "success" && searchData.items) { const searchItems = searchData.items.slice(0, 3).map((item, index)=>{ const combinedText = `${item.title.toLowerCase()} ${(item.snippet || "").toLowerCase()}`; let category = "Latest"; // Fast category detection using regex if (combinedText.match(/\b(iphone|android|mobile|smartphone|ios|samsung|pixel|phone)\b/)) { category = "Mobile"; } else if (combinedText.match(/\b(ai|artificial intelligence|machine learning|chatgpt|openai)\b/)) { category = "Artificial intelligence"; } else if (combinedText.match(/\b(vr|virtual reality|ar|augmented reality|metaverse)\b/)) { category = "Virtual reality"; } else if (combinedText.match(/\b(gadget|device|wearable|smartwatch|tablet|laptop)\b/)) { category = "Gadgets"; } else if (combinedText.match(/\b(internet|web|social media|streaming|5g)\b/)) { category = "Internet"; } else if (combinedText.match(/\b(computer|pc|processor|software|programming)\b/)) { category = "Computing"; } return { id: Date.now() + Math.random() * 10000 + queryIndex * 1000 + index, title: item.title, snippet: item.snippet || "No description available", aiSummary: item.snippet || "No description available", link: item.link, source: item.displayLink?.replace("www.", "").split(".")[0] || "Web", timestamp: new Date().toLocaleTimeString(), timeAgo: `${Math.floor(Math.random() * 12) + 1}h ago`, imageUrl: null, category, author: "TechReel Team", isEnhanced: false }; }); allNewsItems = [ ...allNewsItems, ...searchItems ]; } }); // Remove duplicates and limit to 50 stories const uniqueNews = allNewsItems.filter((item, index, self)=>index === self.findIndex((t)=>t.title === item.title)).slice(0, 50); // Update news immediately setNews(uniqueNews); // Start background enhancements (non-blocking) setTimeout(()=>{ enhanceArticlesInBackground(uniqueNews); }, 100); } catch (err) { console.error("Error fetching news:", err); setError("Failed to load tech news"); setLoading(false); } }, []); const enhanceArticlesInBackground = React.useCallback(async (articles)=>{ for(let i = 0; i < Math.min(articles.length, 5); i++){ const article = articles[i]; try { if (i === 0) { const summaryResponse = await fetch("/integrations/google-gemini-2-5-pro/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Summarize this tech news in 2-3 engaging sentences. Focus on key points and impact. No intro phrases: Title: ${article.title} Content: ${article.snippet}` } ] }) }); if (summaryResponse.ok) { const summaryData = await summaryResponse.json(); if (summaryData.choices?.[0]?.message?.content) { const aiSummary = summaryData.choices[0].message.content.replace(/^(Of course!?|Here's|Here is|Sure!?)[^.]*\.?\s*/i, "").replace(/^(A brief summary:?|Summary:?)\s*/i, "").trim(); setNews((prevNews)=>prevNews.map((item)=>item.id === article.id ? { ...item, aiSummary, isEnhanced: true } : item)); } } } if (i < 3) { const searchTerms = article.title.split(" ").slice(0, 3).join(" "); const imageResponse = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(searchTerms + " tech")}`); if (imageResponse.ok) { const imageData = await imageResponse.json(); if (imageData.status === "success" && imageData.items?.length > 0) { setNews((prevNews)=>prevNews.map((item)=>item.id === article.id ? { ...item, imageUrl: imageData.items[0].thumbnailImageUrl } : item)); } } } await new Promise((resolve)=>setTimeout(resolve, 500)); } catch (error) { console.error("Error enhancing article:", error); } } }, []); const filteredNews = React.useMemo(()=>{ if (selectedCategory === "Latest") return news; return news.filter((article)=>article.category === selectedCategory); }, [ news, selectedCategory ]); React.useEffect(()=>{ const currentArticle = filteredNews[currentIndex]; if (currentArticle && !currentArticle.isEnhanced && currentArticle.aiSummary === currentArticle.snippet) { const enhanceCurrentArticle = async ()=>{ try { const summaryResponse = await fetch("/integrations/google-gemini-2-5-pro/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Summarize this tech news in 2-3 engaging sentences. Focus on key points and impact. No intro phrases: Title: ${currentArticle.title} Content: ${currentArticle.snippet}` } ] }) }); if (summaryResponse.ok) { const summaryData = await summaryResponse.json(); if (summaryData.choices?.[0]?.message?.content) { const aiSummary = summaryData.choices[0].message.content.replace(/^(Of course!?|Here's|Here is|Sure!?)[^.]*\.?\s*/i, "").replace(/^(A brief summary:?|Summary:?)\s*/i, "").trim(); setNews((prevNews)=>prevNews.map((item)=>item.id === currentArticle.id ? { ...item, aiSummary, isEnhanced: true } : item)); } } } catch (error) { console.error("Error enhancing current article:", error); } }; enhanceCurrentArticle(); } }, [ currentIndex, filteredNews ]); React.useEffect(()=>{ fetchTechNews(); }, [ fetchTechNews ]); React.useEffect(()=>{ const interval = setInterval(fetchTechNews, 120000); return ()=>clearInterval(interval); }, [ fetchTechNews ]); const handleScroll = React.useCallback((direction)=>{ if (direction === "up" && currentIndex > 0) { setCurrentIndex(currentIndex - 1); } else if (direction === "down" && currentIndex < filteredNews.length - 1) { setCurrentIndex(currentIndex + 1); } }, [ currentIndex, filteredNews.length ]); React.useEffect(()=>{ const handleKeyPress = (e)=>{ if (e.key === "ArrowUp") handleScroll("up"); if (e.key === "ArrowDown") handleScroll("down"); }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, [ handleScroll ]); React.useEffect(()=>{ let isScrolling = false; const handleWheel = (e)=>{ if (isScrolling) return; isScrolling = true; if (e.deltaY > 0) { handleScroll("down"); } else { handleScroll("up"); } setTimeout(()=>{ isScrolling = false; }, 500); }; window.addEventListener("wheel", handleWheel, { passive: true }); return ()=>window.removeEventListener("wheel", handleWheel); }, [ handleScroll ]); // Touch/swipe functionality for mobile React.useEffect(()=>{ let touchStartY = 0; let touchEndY = 0; let isSwiping = false; const handleTouchStart = (e)=>{ touchStartY = e.touches[0].clientY; isSwiping = false; }; const handleTouchMove = (e)=>{ if (!touchStartY) return; touchEndY = e.touches[0].clientY; const diff = Math.abs(touchStartY - touchEndY); if (diff > 10) { isSwiping = true; e.preventDefault(); // Prevent scrolling } }; const handleTouchEnd = (e)=>{ if (!touchStartY || !isSwiping) return; const swipeDistance = touchStartY - touchEndY; const minSwipeDistance = 50; if (Math.abs(swipeDistance) > minSwipeDistance) { if (swipeDistance > 0) { // Swiped up - go to next article handleScroll("down"); } else { // Swiped down - go to previous article handleScroll("up"); } } touchStartY = 0; touchEndY = 0; isSwiping = false; }; window.addEventListener("touchstart", handleTouchStart, { passive: true }); window.addEventListener("touchmove", handleTouchMove, { passive: false }); window.addEventListener("touchend", handleTouchEnd, { passive: true }); return ()=>{ window.removeEventListener("touchstart", handleTouchStart); window.removeEventListener("touchmove", handleTouchMove); window.removeEventListener("touchend", handleTouchEnd); }; }, [ handleScroll ]); const handleLike = React.useCallback((articleId)=>{ setLikes((prev)=>({ ...prev, [articleId]: (prev[articleId] || 0) + 1 })); }, []); const handleComment = React.useCallback((articleId)=>{ setShowComments(true); }, []); const addComment = React.useCallback((articleId)=>{ if (!newComment.trim()) return; const comment = { id: Date.now(), text: newComment.trim(), author: "TechUser", timestamp: new Date().toLocaleTimeString(), likes: 0 }; setComments((prev)=>({ ...prev, [articleId]: [ ...prev[articleId] || [], comment ] })); setNewComment(""); }, [ newComment ]); const likeComment = React.useCallback((articleId, commentId)=>{ setComments((prev)=>({ ...prev, [articleId]: prev[articleId]?.map((comment)=>comment.id === commentId ? { ...comment, likes: comment.likes + 1 } : comment) || [] })); }, []); const shareToX = React.useCallback((article)=>{ const text = encodeURIComponent(`${article.title}\n\n${article.aiSummary || article.snippet}\n\n#TechNews #Technology #AGMP`); const url = encodeURIComponent(article.link); const twitterUrl = `https://twitter.com/intent/tweet?text=${text}&url=${url}`; window.open(twitterUrl, "_blank", "width=600,height=400"); }, []); const shareToInstagram = React.useCallback((article)=>{ const shareText = `${article.title}\n\n${article.aiSummary || article.snippet}\n\nRead more: ${article.link}\n\n#TechNews #Technology #AGMP`; if (navigator.clipboard) { navigator.clipboard.writeText(shareText).then(()=>{ alert("Content copied to clipboard! You can now paste it on Instagram."); }).catch(()=>{ const textArea = document.createElement("textarea"); textArea.value = shareText; document.body.appendChild(textArea); textArea.select(); document.execCommand("copy"); document.body.removeChild(textArea); alert("Content copied to clipboard! You can now paste it on Instagram."); }); } }, []); if (loading && news.length === 0) { return /*#__PURE__*/ React.createElement("div", { style: { height: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#000", color: "white" }, __source: { fileName: "", lineNumber: 636, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", padding: "20px" }, __source: { fileName: "", lineNumber: 646, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "50px", height: "50px", border: "3px solid rgba(0,255,136,0.3)", borderTop: "3px solid #00ff88", borderRadius: "50%", animation: "spin 1s linear infinite", margin: "0 auto 20px" }, __source: { fileName: "", lineNumber: 647, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { style: { fontSize: "18px", margin: 0 }, __source: { fileName: "", lineNumber: 658, columnNumber: 11 }, __self: this }, "Loading Tech News..."))); } if (error && news.length === 0) { return /*#__PURE__*/ React.createElement("div", { style: { height: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#000", color: "white", textAlign: "center", padding: "20px" }, __source: { fileName: "", lineNumber: 666, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 678, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { fontSize: "18px", margin: "0 0 20px 0" }, __source: { fileName: "", lineNumber: 679, columnNumber: 11 }, __self: this }, "⚠️ ", error), /*#__PURE__*/ React.createElement("button", { onClick: fetchTechNews, style: { background: "#00ff88", border: "none", color: "black", padding: "12px 24px", borderRadius: "25px", cursor: "pointer", fontSize: "16px", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 680, columnNumber: 11 }, __self: this }, "Try Again"))); } const currentArticle = filteredNews[currentIndex]; return /*#__PURE__*/ React.createElement("div", { style: { height: "100vh", width: "100vw", background: "linear-gradient(135deg, #0f0f23 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%)", color: "#00ff41", fontFamily: "'Courier New', 'Monaco', 'Menlo', monospace", position: "relative", overflow: "hidden" }, __source: { fileName: "", lineNumber: 703, columnNumber: 5 }, __self: this }, currentArticle && /*#__PURE__*/ React.createElement("div", { style: { height: "100vh", width: "100%", position: "relative", display: "flex", flexDirection: "column", background: currentArticle.imageUrl ? `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url(${currentArticle.imageUrl})` : "#000", backgroundSize: "cover", backgroundPosition: "center" }, __source: { fileName: "", lineNumber: 716, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, background: "rgba(0,0,0,0.8)", backdropFilter: "blur(20px)", padding: "16px 20px", zIndex: 10, borderBottom: "1px solid rgba(255,255,255,0.1)" }, __source: { fileName: "", lineNumber: 731, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", maxWidth: "1200px", margin: "0 auto" }, __source: { fileName: "", lineNumber: 744, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, __source: { fileName: "", lineNumber: 753, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "32px", height: "32px", background: "linear-gradient(135deg, #ff6b6b, #4ecdc4)", borderRadius: "8px", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "16px", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 756, columnNumber: 17 }, __self: this }, "T"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 771, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" }, __source: { fileName: "", lineNumber: 772, columnNumber: 19 }, __self: this }, "TechReel"), /*#__PURE__*/ React.createElement("div", { style: { fontSize: "12px", color: "#999" }, __source: { fileName: "", lineNumber: 781, columnNumber: 19 }, __self: this }, currentArticle.timeAgo))), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "8px" }, __source: { fileName: "", lineNumber: 786, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { style: { background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", color: "#fff", padding: "8px 16px", borderRadius: "20px", cursor: "pointer", fontSize: "12px", fontWeight: "600", backdropFilter: "blur(10px)", transition: "all 0.2s ease" }, onMouseEnter: (e)=>{ e.target.style.background = "rgba(255,255,255,0.2)"; }, onMouseLeave: (e)=>{ e.target.style.background = "rgba(255,255,255,0.1)"; }, __source: { fileName: "", lineNumber: 787, columnNumber: 17 }, __self: this }, "Follow")))), /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", top: "80px", left: "20px", right: "20px", display: "flex", gap: "8px", overflowX: "auto", zIndex: 10, paddingBottom: "8px" }, __source: { fileName: "", lineNumber: 814, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, onClick: ()=>{ setSelectedCategory(category); setCurrentIndex(0); }, style: { background: selectedCategory === category ? "#fff" : "rgba(255,255,255,0.1)", color: selectedCategory === category ? "#000" : "#fff", border: "none", padding: "8px 16px", borderRadius: "20px", cursor: "pointer", fontSize: "12px", fontWeight: "600", whiteSpace: "nowrap", transition: "all 0.2s ease", backdropFilter: "blur(10px)" }, onMouseEnter: (e)=>{ if (selectedCategory !== category) { e.target.style.background = "rgba(255,255,255,0.2)"; } }, onMouseLeave: (e)=>{ if (selectedCategory !== category) { e.target.style.background = "rgba(255,255,255,0.1)"; } }, __source: { fileName: "", lineNumber: 828, columnNumber: 15 }, __self: this }, category))), /*#__PURE__*/ React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", padding: "20px", paddingTop: "140px", paddingBottom: "120px", maxWidth: "800px", margin: "0 auto" }, __source: { fileName: "", lineNumber: 867, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "16px" }, __source: { fileName: "", lineNumber: 880, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "20px", height: "20px", background: "#ff6b6b", borderRadius: "4px", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: "bold", color: "#fff" }, __source: { fileName: "", lineNumber: 888, columnNumber: 15 }, __self: this }, currentArticle.source.charAt(0).toUpperCase()), /*#__PURE__*/ React.createElement("span", { style: { color: "#fff", fontSize: "14px", fontWeight: "600" }, __source: { fileName: "", lineNumber: 904, columnNumber: 15 }, __self: this }, currentArticle.source), /*#__PURE__*/ React.createElement("span", { style: { background: "#4ecdc4", color: "#000", padding: "2px 8px", borderRadius: "12px", fontSize: "10px", fontWeight: "600" }, __source: { fileName: "", lineNumber: 909, columnNumber: 15 }, __self: this }, currentArticle.category)), /*#__PURE__*/ React.createElement("h1", { style: { color: "#fff", fontSize: window.innerWidth < 768 ? "28px" : "36px", fontWeight: "800", margin: "0 0 20px 0", lineHeight: "1.2", letterSpacing: "-0.02em" }, __source: { fileName: "", lineNumber: 923, columnNumber: 13 }, __self: this }, currentArticle.title), currentArticle.aiSummary && /*#__PURE__*/ React.createElement("div", { style: { background: "rgba(255,255,255,0.1)", backdropFilter: "blur(20px)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: "16px", padding: "20px", marginBottom: "24px" }, __source: { fileName: "", lineNumber: 937, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "12px" }, __source: { fileName: "", lineNumber: 947, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: "16px" }, __source: { fileName: "", lineNumber: 955, columnNumber: 19 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("span", { style: { color: "#4ecdc4", fontSize: "12px", fontWeight: "700", textTransform: "uppercase", letterSpacing: "0.5px" }, __source: { fileName: "", lineNumber: 956, columnNumber: 19 }, __self: this }, "AI Summary")), /*#__PURE__*/ React.createElement("p", { style: { color: "#fff", fontSize: "16px", lineHeight: "1.6", margin: 0, fontWeight: "400" }, __source: { fileName: "", lineNumber: 968, columnNumber: 17 }, __self: this }, currentArticle.aiSummary)), /*#__PURE__*/ React.createElement("a", { href: currentArticle.link, target: "_blank", rel: "noopener noreferrer", style: { display: "inline-block", background: "linear-gradient(135deg, #ff6b6b, #4ecdc4)", color: "#fff", padding: "16px 32px", borderRadius: "12px", textDecoration: "none", fontWeight: "700", fontSize: "16px", textAlign: "center", transition: "all 0.2s ease", alignSelf: "flex-start", boxShadow: "0 4px 20px rgba(255,107,107,0.3)" }, onMouseEnter: (e)=>{ e.target.style.transform = "translateY(-2px)"; e.target.style.boxShadow = "0 8px 30px rgba(255,107,107,0.4)"; }, onMouseLeave: (e)=>{ e.target.style.transform = "translateY(0)"; e.target.style.boxShadow = "0 4px 20px rgba(255,107,107,0.3)"; }, __source: { fileName: "", lineNumber: 982, columnNumber: 13 }, __self: this }, "Read Full Article")), /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", right: "20px", bottom: "140px", display: "flex", flexDirection: "column", gap: "12px", alignItems: "center" }, __source: { fileName: "", lineNumber: 1014, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLike(currentArticle.id), style: { background: likes[currentArticle.id] > 0 ? "#ff6b6b" : "rgba(255,255,255,0.1)", border: "none", color: "#fff", width: "48px", height: "48px", borderRadius: "50%", cursor: "pointer", fontSize: "20px", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(10px)", transition: "all 0.2s ease", position: "relative" }, onMouseEnter: (e)=>{ e.target.style.transform = "scale(1.1)"; }, onMouseLeave: (e)=>{ e.target.style.transform = "scale(1)"; }, __source: { fileName: "", lineNumber: 1025, columnNumber: 13 }, __self: this }, likes[currentArticle.id] > 0 ? "❤️" : "🤍", likes[currentArticle.id] > 0 && /*#__PURE__*/ React.createElement("span", { style: { position: "absolute", top: "-4px", right: "-4px", background: "#ff6b6b", color: "#fff", borderRadius: "50%", width: "20px", height: "20px", fontSize: "10px", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 1055, columnNumber: 17 }, __self: this }, likes[currentArticle.id])), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleComment(currentArticle.id), style: { background: comments[currentArticle.id]?.length > 0 ? "#4ecdc4" : "rgba(255,255,255,0.1)", border: "none", color: "#fff", width: "48px", height: "48px", borderRadius: "50%", cursor: "pointer", fontSize: "20px", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(10px)", transition: "all 0.2s ease", position: "relative" }, onMouseEnter: (e)=>{ e.target.style.transform = "scale(1.1)"; }, onMouseLeave: (e)=>{ e.target.style.transform = "scale(1)"; }, __source: { fileName: "", lineNumber: 1077, columnNumber: 13 }, __self: this }, "💬", comments[currentArticle.id]?.length > 0 && /*#__PURE__*/ React.createElement("span", { style: { position: "absolute", top: "-4px", right: "-4px", background: "#4ecdc4", color: "#000", borderRadius: "50%", width: "20px", height: "20px", fontSize: "10px", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 1107, columnNumber: 17 }, __self: this }, comments[currentArticle.id].length)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>shareToX(currentArticle), style: { background: "rgba(255,255,255,0.1)", border: "none", color: "#fff", width: "48px", height: "48px", borderRadius: "50%", cursor: "pointer", fontSize: "18px", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(10px)", transition: "all 0.2s ease" }, onMouseEnter: (e)=>{ e.target.style.transform = "scale(1.1)"; e.target.style.background = "#1da1f2"; }, onMouseLeave: (e)=>{ e.target.style.transform = "scale(1)"; e.target.style.background = "rgba(255,255,255,0.1)"; }, __source: { fileName: "", lineNumber: 1129, columnNumber: 13 }, __self: this }, "𝕏"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>shareToInstagram(currentArticle), style: { background: "rgba(255,255,255,0.1)", border: "none", color: "#fff", width: "48px", height: "48px", borderRadius: "50%", cursor: "pointer", fontSize: "20px", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(10px)", transition: "all 0.2s ease" }, onMouseEnter: (e)=>{ e.target.style.transform = "scale(1.1)"; e.target.style.background = "linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)"; }, onMouseLeave: (e)=>{ e.target.style.transform = "scale(1)"; e.target.style.background = "rgba(255,255,255,0.1)"; }, __source: { fileName: "", lineNumber: 1158, columnNumber: 13 }, __self: this }, "📷")), /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", bottom: "80px", left: "20px", right: "80px", display: "flex", gap: "2px" }, __source: { fileName: "", lineNumber: 1190, columnNumber: 11 }, __self: this }, filteredNews.slice(0, Math.min(filteredNews.length, 20)).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { flex: 1, height: "2px", background: index === currentIndex ? "#fff" : "rgba(255,255,255,0.3)", borderRadius: "1px", transition: "all 0.3s ease", minWidth: "2px" }, __source: { fileName: "", lineNumber: 1203, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", bottom: "20px", left: "20px", right: "20px", display: "flex", justifyContent: "space-between", alignItems: "center" }, __source: { fileName: "", lineNumber: 1219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "12px", display: "flex", alignItems: "center", gap: "4px" }, __source: { fileName: "", lineNumber: 1230, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1239, columnNumber: 15 }, __self: this }, "↑"), " Previous"), /*#__PURE__*/ React.createElement("div", { style: { color: "#fff", fontSize: "12px", fontWeight: "600", background: "rgba(255,255,255,0.1)", padding: "4px 12px", borderRadius: "12px", backdropFilter: "blur(10px)", display: "flex", alignItems: "center", gap: "8px" }, __source: { fileName: "", lineNumber: 1241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1255, columnNumber: 15 }, __self: this }, currentIndex + 1, " / ", filteredNews.length), filteredNews.length >= 20 && /*#__PURE__*/ React.createElement("span", { style: { background: "linear-gradient(135deg, #ff6b6b, #4ecdc4)", color: "#fff", padding: "2px 6px", borderRadius: "8px", fontSize: "10px", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 1259, columnNumber: 17 }, __self: this }, "20+ Stories")), /*#__PURE__*/ React.createElement("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "12px", display: "flex", alignItems: "center", gap: "4px" }, __source: { fileName: "", lineNumber: 1273, columnNumber: 13 }, __self: this }, "Next ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1282, columnNumber: 20 }, __self: this }, "↓")))), loading && news.length > 0 && /*#__PURE__*/ React.createElement("div", { style: { position: "fixed", top: "20px", right: "20px", background: "linear-gradient(135deg, #06ffa5, #0077b6)", color: "white", padding: "8px 16px", borderRadius: "20px", fontSize: "12px", fontWeight: "bold", zIndex: 100, boxShadow: "0 4px 15px rgba(6,255,165,0.4)", backdropFilter: "blur(10px)" }, __source: { fileName: "", lineNumber: 1289, columnNumber: 9 }, __self: this }, "🔄 Updating... ✨"), showComments && currentArticle && /*#__PURE__*/ React.createElement("div", { style: { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.8)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: "20px" }, onClick: ()=>setShowComments(false), __source: { fileName: "", lineNumber: 1311, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { background: "linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)", borderRadius: "20px", padding: "20px", maxWidth: "500px", width: "100%", maxHeight: "80vh", overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: "0 20px 60px rgba(0,0,0,0.3)" }, onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 1327, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "20px", paddingBottom: "15px", borderBottom: "2px solid rgba(255,255,255,0.2)" }, __source: { fileName: "", lineNumber: 1343, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { margin: 0, fontSize: "18px", fontWeight: "bold", color: "white" }, __source: { fileName: "", lineNumber: 1353, columnNumber: 15 }, __self: this }, "💬 Comments"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowComments(false), style: { background: "rgba(255,255,255,0.2)", border: "none", color: "white", width: "30px", height: "30px", borderRadius: "50%", cursor: "pointer", fontSize: "16px", display: "flex", alignItems: "center", justifyContent: "center" }, __source: { fileName: "", lineNumber: 1363, columnNumber: 15 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("div", { style: { flex: 1, overflowY: "auto", marginBottom: "20px", paddingRight: "10px" }, __source: { fileName: "", lineNumber: 1383, columnNumber: 13 }, __self: this }, comments[currentArticle.id]?.length > 0 ? comments[currentArticle.id].map((comment)=>/*#__PURE__*/ React.createElement("div", { key: comment.id, style: { background: "rgba(255,255,255,0.15)", borderRadius: "15px", padding: "15px", marginBottom: "15px", backdropFilter: "blur(10px)" }, __source: { fileName: "", lineNumber: 1393, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, __source: { fileName: "", lineNumber: 1403, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, __source: { fileName: "", lineNumber: 1411, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "25px", height: "25px", background: "linear-gradient(135deg, #ff6b9d, #feca57)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "12px", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 1418, columnNumber: 25 }, __self: this }, comment.author.charAt(0)), /*#__PURE__*/ React.createElement("span", { style: { fontWeight: "bold", fontSize: "14px", color: "white" }, __source: { fileName: "", lineNumber: 1434, columnNumber: 25 }, __self: this }, comment.author), /*#__PURE__*/ React.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.7)" }, __source: { fileName: "", lineNumber: 1443, columnNumber: 25 }, __self: this }, comment.timestamp)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>likeComment(currentArticle.id, comment.id), style: { background: "transparent", border: "none", color: comment.likes > 0 ? "#ff6b9d" : "rgba(255,255,255,0.7)", cursor: "pointer", fontSize: "12px", display: "flex", alignItems: "center", gap: "4px" }, __source: { fileName: "", lineNumber: 1452, columnNumber: 23 }, __self: this }, "❤️ ", comment.likes > 0 && comment.likes)), /*#__PURE__*/ React.createElement("p", { style: { margin: 0, color: "white", fontSize: "14px", lineHeight: "1.4" }, __source: { fileName: "", lineNumber: 1473, columnNumber: 21 }, __self: this }, comment.text))) : /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", color: "rgba(255,255,255,0.7)", fontSize: "14px", padding: "40px 20px" }, __source: { fileName: "", lineNumber: 1486, columnNumber: 17 }, __self: this }, "No comments yet. Be the first to comment! 💭")), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, __source: { fileName: "", lineNumber: 1499, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newComment, onChange: (e)=>setNewComment(e.target.value), placeholder: "Add a comment...", style: { flex: 1, background: "rgba(255,255,255,0.15)", border: "2px solid rgba(255,255,255,0.2)", borderRadius: "25px", padding: "12px 16px", color: "white", fontSize: "14px", outline: "none", backdropFilter: "blur(10px)" }, onKeyPress: (e)=>{ if (e.key === "Enter") { addComment(currentArticle.id); } }, __source: { fileName: "", lineNumber: 1506, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addComment(currentArticle.id), disabled: !newComment.trim(), style: { background: newComment.trim() ? "linear-gradient(135deg, #ff6b9d, #feca57)" : "rgba(255,255,255,0.2)", border: "none", color: "white", width: "45px", height: "45px", borderRadius: "50%", cursor: newComment.trim() ? "pointer" : "not-allowed", fontSize: "18px", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.3s ease", opacity: newComment.trim() ? 1 : 0.5 }, __source: { fileName: "", lineNumber: 1528, columnNumber: 15 }, __self: this }, "🚀")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1556, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body { margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); overflow: hidden; } * { box-sizing: border-box; } ::-webkit-scrollbar { display: none; } html { -ms-overflow-style: none; scrollbar-width: none; } /* Mobile-specific styles */ @media (max-width: 768px) { .category-scroll::-webkit-scrollbar { display: none; } } `)); }