function MainComponent() { const [streamingMessage, setStreamingMessage] = useState(""); const [messages, setMessages] = useState([]); const { data: user, loading } = useUser(); const [groups, setGroups] = useState([ { id: 1, name: "Anxiety Support", members: [], messages: [], description: "A safe space to share and support each other through anxiety", isPrivate: false }, { id: 2, name: "Language Exchange", members: [], messages: [], description: "Practice different languages with others", isPrivate: false }, { id: 3, name: "Cultural Connect", members: [], messages: [], description: "Share and learn about different cultures", isPrivate: false } ]); const [posts, setPosts] = React.useState([ { id: 1, user: "John", content: "Just completed a challenging hike. Feeling accomplished!", mood: 8, timestamp: "2024-03-01 10:30:00", likes: 15, comments: [], audioURL: null }, { id: 2, user: "Sarah", content: "Found a quiet spot in the park for meditation. So peaceful.", mood: 9, timestamp: "2024-03-01 11:45:00", likes: 22, comments: [], audioURL: null } ]); const [newPost, setNewPost] = React.useState(""); const [moodRating, setMoodRating] = React.useState(5); const [moodEmoji, setMoodEmoji] = React.useState("😊"); const [moodColor, setMoodColor] = React.useState("#FFD700"); const [moodDescription, setMoodDescription] = React.useState("I'm feeling good!"); const [isDarkMode, setIsDarkMode] = useState(false); const [showSettings, setShowSettings] = useState(false); const [activeTab, setActiveTab] = useState("home"); const [fontSize, setFontSize] = useState("medium"); const [notificationEnabled, setNotificationEnabled] = useState(true); const [soundEnabled, setSoundEnabled] = useState(true); const [newMessage, setNewMessage] = useState(""); const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [friends, setFriends] = useState([]); const [friendRequests, setFriendRequests] = useState([]); const [privateChats, setPrivateChats] = useState([]); const [activePrivateChat, setActivePrivateChat] = useState(null); const [activeGroup, setActiveGroup] = useState(null); const [currentSound, setCurrentSound] = useState(null); const [pageTransition, setPageTransition] = useState(false); const [dailyChallenges, setDailyChallenges] = useState([]); const [completedChallenges, setCompletedChallenges] = useState([]); const [mindfulnessScore, setMindfulnessScore] = useState(0); const [quotes, setQuotes] = useState([]); const [newQuote, setNewQuote] = useState(""); const [displayedPosts, setDisplayedPosts] = useState([]); const [notification, setNotification] = useState(""); const [newChatRoom, setNewChatRoom] = useState(""); const [newChatRoomDescription, setNewChatRoomDescription] = useState(""); const [isPrivateRoom, setIsPrivateRoom] = useState(false); const [motivationalQuote, setMotivationalQuote] = useState(""); const [showRelaxingSounds, setShowRelaxingSounds] = useState(false); const [searchUsers, setSearchUsers] = useState(""); const [foundUsers, setFoundUsers] = useState([]); const [newComment, setNewComment] = useState(""); const [emotionalLandscape, setEmotionalLandscape] = useState({ joy: 50, sadness: 30, anger: 20, fear: 25, love: 60 }); const [highlightedFeature, setHighlightedFeature] = useState(null); const [bubbleScore, setBubbleScore] = useState(0); const [highScore, setHighScore] = useState(0); const [lastPoints, setLastPoints] = useState(0); // Auth state is handled by useUser hook React.useEffect(()=>{ const updatePosts = ()=>{ setDisplayedPosts(posts); }; updatePosts(); const interval = setInterval(()=>{ if (Math.random() < 0.05) { triggerConfetti(); } }, 60000); return ()=>clearInterval(interval); }, [ posts ]); React.useEffect(()=>{ generateDailyChallenges(); const audio = new Audio("/ambient-nature.mp3"); audio.loop = true; audio.volume = 0.1; setAmbientSound(audio); if (soundEnabled) { audio.play(); } getMotivationalQuote(); return ()=>{ if (audio) { audio.pause(); audio.currentTime = 0; } }; }, [ soundEnabled ]); React.useEffect(()=>{ if (highlightedFeature) { const element = document.querySelector(`[data-feature="${highlightedFeature}"]`); if (element) { element.scrollIntoView({ behavior: "smooth", block: "center" }); } } }, [ highlightedFeature ]); const chatContainerRef = React.useRef(null); const [isTyping, setIsTyping] = React.useState(false); const [confettiInterval, setConfettiInterval] = React.useState(null); const [ambientSound, setAmbientSound] = React.useState(null); const [achievementUnlocked, setAchievementUnlocked] = React.useState(false); const [userLevel, setUserLevel] = React.useState(1); const [experiencePoints, setExperiencePoints] = React.useState(0); const [isRecording, setIsRecording] = React.useState(false); const [audioURL, setAudioURL] = React.useState(""); const mediaRecorderRef = React.useRef(null); const audioChunksRef = React.useRef([]); const scrollToBottom = React.useCallback(()=>{ if (chatContainerRef.current) { chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; } }, []); React.useEffect(()=>{ scrollToBottom(); }, [ groups, activeGroup, streamingMessage, privateChats, activePrivateChat, scrollToBottom ]); const startRecording = React.useCallback(async ()=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorderRef.current = new MediaRecorder(stream); audioChunksRef.current = []; mediaRecorderRef.current.ondataavailable = (event)=>{ audioChunksRef.current.push(event.data); }; mediaRecorderRef.current.onstop = ()=>{ const audioBlob = new Blob(audioChunksRef.current, { type: "audio/wav" }); const url = URL.createObjectURL(audioBlob); setAudioURL(url); }; mediaRecorderRef.current.start(); setIsRecording(true); } catch (error) { console.error("Error accessing microphone:", error); showNotification("Unable to access microphone 🎤"); } }, []); const stopRecording = React.useCallback(()=>{ if (mediaRecorderRef.current && isRecording) { mediaRecorderRef.current.stop(); setIsRecording(false); mediaRecorderRef.current.stream.getTracks().forEach((track)=>track.stop()); } }, [ isRecording ]); const triggerConfetti = React.useCallback(()=>{ confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, colors: [ "#2563eb", "#000000", "#eab308", "#ec4899" ] }); }, []); const checkAchievements = React.useCallback((points)=>{ const newExperience = experiencePoints + points; if (newExperience >= userLevel * 100) { setUserLevel((prev)=>prev + 1); setExperiencePoints(0); setAchievementUnlocked(true); setTimeout(()=>setAchievementUnlocked(false), 3000); triggerConfetti(); showNotification(`🎉 Level Up! You're now level ${userLevel + 1}!`); } else { setExperiencePoints(newExperience); } }, [ experiencePoints, userLevel, triggerConfetti ]); const onEmojiClick = React.useCallback((emoji)=>{ setNewMessage((prev)=>prev + emoji); }, []); const generateDailyChallenges = React.useCallback(()=>{ const challenges = [ "Practice deep breathing for 5 minutes", "Write down 3 things you're grateful for", "Compliment a stranger", "Try a new healthy recipe", "Meditate for 10 minutes", "Take a mindful walk in nature", "Write a kind note to yourself", "Practice active listening", "Do a random act of kindness", "Try a new yoga pose" ]; setDailyChallenges(challenges.sort(()=>0.5 - Math.random()).slice(0, 3)); }, []); const updateEmotionalLandscape = React.useCallback((emotion, value)=>{ setEmotionalLandscape((prev)=>({ ...prev, [emotion]: Math.max(0, Math.min(100, prev[emotion] + value)) })); }, []); const toggleDarkMode = React.useCallback(()=>{ setIsDarkMode((prev)=>!prev); }, []); const createNewChatRoom = React.useCallback(()=>{ if (newChatRoom.trim() && user) { const newGroup = { id: groups.length + 1, name: newChatRoom.trim(), members: [ user.username ], messages: [] }; setGroups((prev)=>[ ...prev, newGroup ]); setNewChatRoom(""); showNotification("✨ New chat room created!"); } }, [ newChatRoom, user, groups ]); const getMotivationalQuote = React.useCallback(async ()=>{ try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: "Give me a short, uplifting motivational quote (max 15 words) about mindfulness, peace, or personal growth." } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error fetching motivational quote:", error); } }, []); const filterExplicitContent = React.useCallback((text)=>{ const badWords = [ "explicit", "offensive", "inappropriate", "damn", "hell", "shit", "fuck", "hate", "stupid", "idiot" ]; let filteredText = text; badWords.forEach((word)=>{ const regex = new RegExp(word, "gi"); filteredText = filteredText.replace(regex, "*".repeat(word.length)); }); return filteredText; }, []); const addQuote = React.useCallback(()=>{ if (newQuote.trim()) { setQuotes((prev)=>[ ...prev, { text: newQuote.trim(), author: user?.username || "Anonymous" } ]); setNewQuote(""); showNotification("💭 Quote added to your collection!"); } }, [ newQuote, user ]); const likePost = React.useCallback((postId)=>{ const post = posts.find((post)=>post.id === postId); if (post && !post.liked) { setPosts((prev)=>prev.map((p)=>p.id === postId ? { ...p, likes: p.likes + 1, liked: true } : p)); updateEmotionalLandscape("joy", 2); showNotification("💖 You spread some love!"); } }, [ posts, updateEmotionalLandscape ]); const addComment = React.useCallback((postId)=>{ if (newComment.trim() && user) { setPosts((prev)=>prev.map((post)=>post.id === postId ? { ...post, comments: [ ...post.comments, { id: post.comments.length + 1, user: user.username, content: filterExplicitContent(newComment.trim()), timestamp: new Date().toISOString() } ] } : post)); setNewComment(""); updateEmotionalLandscape("love", 1); showNotification("💭 Your thoughts have been shared!"); } }, [ newComment, user, filterExplicitContent, updateEmotionalLandscape ]); const handleTabChange = React.useCallback((tab)=>{ setPageTransition(true); setTimeout(()=>{ setActiveTab(tab); setPageTransition(false); }, 200); }, []); const { signInWithCredentials, signUpWithCredentials } = useAuth(); const sendMessage = React.useCallback(async (groupId, message)=>{ if (message.trim() && user) { try { await saveChatMessage({ roomId: groupId, content: filterExplicitContent(message.trim()), user: user.username, timestamp: new Date().toISOString() }); setNewMessage(""); if (message.toLowerCase().includes("@ai")) { setIsTyping(true); const aiResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: message.replace("@ai", "").trim() } ], stream: true }) }); handleStreamResponse(aiResponse); setIsTyping(false); } const messagesData = await getChatMessages({ roomId: groupId }); setMessages(messagesData || []); } catch (error) { console.error("Error handling message:", error); showNotification("Failed to send message 😢"); } } }, [ user, filterExplicitContent ]); React.useEffect(()=>{ if (activeGroup) { const fetchMessages = async ()=>{ try { const messages = await getChatMessages({ roomId: activeGroup.id }); setMessages(messages || []); } catch (error) { console.error("Error fetching messages:", error); showNotification("Failed to load messages 😢"); } }; fetchMessages(); } }, [ activeGroup ]); const showNotification = React.useCallback((message)=>{ setNotification(message); setTimeout(()=>setNotification(""), 3000); }, []); const updateMoodIndicators = React.useCallback((value)=>{ setMoodRating(value); const moodMap = { 1: { emoji: "😢", color: "#2563eb", desc: "I'm feeling down" }, 3: { emoji: "😕", color: "#000000", desc: "Could be better" }, 5: { emoji: "😊", color: "#eab308", desc: "I'm feeling good!" }, 7: { emoji: "😃", color: "#2563eb", desc: "Pretty great!" }, 10: { emoji: "🤗", color: "#ec4899", desc: "Absolutely amazing!" } }; const nearestMood = Object.keys(moodMap).reduce((a, b)=>Math.abs(b - value) < Math.abs(a - value) ? b : a); setMoodEmoji(moodMap[nearestMood].emoji); setMoodColor(moodMap[nearestMood].color); setMoodDescription(moodMap[nearestMood].desc); }, []); const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen font-sans bg-gradient-to-br ${isDarkMode ? "from-black via-gray-900 to-black text-white" : "from-gray-50 to-gray-100 text-black"} ${fontSize === "large" ? "text-lg" : fontSize === "small" ? "text-sm" : "text-base"}`, __source: { fileName: "", lineNumber: 473, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative z-0 min-h-screen", __source: { fileName: "", lineNumber: 486, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-500/10 via-yellow-500/10 to-pink-500/10 pointer-events-none", __source: { fileName: "", lineNumber: 487, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 pointer-events-none", __source: { fileName: "", lineNumber: 488, columnNumber: 9 }, __self: this }), notification && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-50", __source: { fileName: "", lineNumber: 490, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-blue-500/90 to-purple-600/90 backdrop-blur-lg px-6 py-3 rounded-2xl shadow-2xl border border-white/20 flex items-center gap-3 transform hover:scale-105 transition-all duration-300", __source: { fileName: "", lineNumber: 491, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl animate-pulse", __source: { fileName: "", lineNumber: 492, columnNumber: 15 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("div", { className: "font-medium text-white", __source: { fileName: "", lineNumber: 493, columnNumber: 15 }, __self: this }, notification))), !user ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen p-4", __source: { fileName: "", lineNumber: 499, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-full max-w-md p-8 rounded-2xl shadow-2xl backdrop-blur-lg bg-white/10 dark:bg-gray-800/10 border border-white/20 transform hover:scale-[1.02] transition-all duration-300`, __source: { fileName: "", lineNumber: 500, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-8", __source: { fileName: "", lineNumber: 501, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center mb-4 shadow-xl", __source: { fileName: "", lineNumber: 502, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-brain text-4xl text-white", __source: { fileName: "", lineNumber: 503, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 text-center", __source: { fileName: "", lineNumber: 505, columnNumber: 17 }, __self: this }, "Welcome to Anxify"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 dark:text-gray-400 mt-4 text-center text-lg", __source: { fileName: "", lineNumber: 508, columnNumber: 17 }, __self: this }, "Your daily sanctuary for mindfulness and connection")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 513, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 514, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "flex items-center justify-center w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl hover:opacity-90 transform hover:scale-[1.02] transition-all duration-300 font-semibold text-center shadow-lg group", __source: { fileName: "", lineNumber: 515, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-in-alt mr-2 group-hover:translate-x-1 transition-transform", __source: { fileName: "", lineNumber: 519, columnNumber: 21 }, __self: this }), "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "flex items-center justify-center w-full px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl hover:opacity-90 transform hover:scale-[1.02] transition-all duration-300 font-semibold text-center shadow-lg group", __source: { fileName: "", lineNumber: 522, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus mr-2 group-hover:translate-x-1 transition-transform", __source: { fileName: "", lineNumber: 526, columnNumber: 21 }, __self: this }), "Create Account")), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 531, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center", __source: { fileName: "", lineNumber: 532, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full border-t border-gray-300 dark:border-gray-700", __source: { fileName: "", lineNumber: 533, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-center text-sm", __source: { fileName: "", lineNumber: 535, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "px-2 bg-white dark:bg-gray-800 text-gray-500", __source: { fileName: "", lineNumber: 536, columnNumber: 21 }, __self: this }, "or continue with"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 540, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-300 group", __source: { fileName: "", lineNumber: 541, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google text-xl text-gray-600 dark:text-gray-400 group-hover:text-blue-500 transition-colors", __source: { fileName: "", lineNumber: 542, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-300 group", __source: { fileName: "", lineNumber: 544, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook text-xl text-gray-600 dark:text-gray-400 group-hover:text-blue-500 transition-colors", __source: { fileName: "", lineNumber: 545, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 549, columnNumber: 17 }, __self: this }, "By continuing, you agree to our", " ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-500 hover:text-blue-600 transition-colors", __source: { fileName: "", lineNumber: 551, columnNumber: 19 }, __self: this }, "Terms of Service"), " ", "and", " ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-500 hover:text-blue-600 transition-colors", __source: { fileName: "", lineNumber: 553, columnNumber: 19 }, __self: this }, "Privacy Policy"))))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 z-10 backdrop-blur-lg border-b border-white/10", __source: { fileName: "", lineNumber: 560, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-3", __source: { fileName: "", lineNumber: 561, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 562, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-logo relative inline-block", __source: { fileName: "", lineNumber: 563, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 animate-gradient-x bg-clip-text text-transparent hover:animate-pulse transition-all duration-300", __source: { fileName: "", lineNumber: 564, columnNumber: 21 }, __self: this }, "Anxify"), /*#__PURE__*/ React.createElement("div", { className: "absolute -inset-1 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 rounded-lg opacity-20 group-hover:opacity-30 blur animate-pulse", __source: { fileName: "", lineNumber: 567, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 569, columnNumber: 19 }, __self: this }, user ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 571, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "px-4 py-2 text-sm rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:opacity-90 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl text-center", __source: { fileName: "", lineNumber: 572, columnNumber: 25 }, __self: this }, "Logout"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettings(!showSettings), className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors duration-300 backdrop-blur-lg", __source: { fileName: "", lineNumber: 578, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-gray-300", __source: { fileName: "", lineNumber: 582, columnNumber: 27 }, __self: this }))) : /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-sm rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:opacity-90 transform hover:scale-105 transition-all duration-300", onClick: ()=>setUser({ username: "MindfulUser" }), __source: { fileName: "", lineNumber: 586, columnNumber: 23 }, __self: this }, "Enter Anxify"))))), showSettings && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 599, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isDarkMode ? "bg-gray-800 text-gray-100" : "bg-white"} p-8 rounded-xl w-[90%] max-w-md shadow-2xl`, __source: { fileName: "", lineNumber: 600, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 605, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-blue-500", __source: { fileName: "", lineNumber: 606, columnNumber: 21 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettings(false), className: "text-gray-400 hover:text-gray-600 transition-colors", __source: { fileName: "", lineNumber: 609, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 613, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 616, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 617, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 618, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-violet-500 text-xl", __source: { fileName: "", lineNumber: 619, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 620, columnNumber: 25 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setNotificationEnabled(!notificationEnabled), className: `w-14 h-7 rounded-full transition-colors duration-200 ${notificationEnabled ? "bg-green-500" : "bg-gray-300"}`, __source: { fileName: "", lineNumber: 622, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-5 h-5 rounded-full bg-white shadow-md transform transition-transform duration-200 ${notificationEnabled ? "translate-x-8" : "translate-x-1"}`, __source: { fileName: "", lineNumber: 630, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 639, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 640, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-pink-500 text-xl", __source: { fileName: "", lineNumber: 641, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 642, columnNumber: 25 }, __self: this }, "Sound Effects")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSoundEnabled(!soundEnabled), className: `w-14 h-7 rounded-full transition-colors duration-200 ${soundEnabled ? "bg-green-500" : "bg-gray-300"}`, __source: { fileName: "", lineNumber: 644, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-5 h-5 rounded-full bg-white shadow-md transform transition-transform duration-200 ${soundEnabled ? "translate-x-8" : "translate-x-1"}`, __source: { fileName: "", lineNumber: 650, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `${isDarkMode ? "bg-gray-700" : "bg-gray-50"} p-4 rounded-lg`, __source: { fileName: "", lineNumber: 657, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mb-3", __source: { fileName: "", lineNumber: 662, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-text-height text-purple-500 text-xl", __source: { fileName: "", lineNumber: 663, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 664, columnNumber: 25 }, __self: this }, "Font Size")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 666, columnNumber: 23 }, __self: this }, [ "small", "medium", "large" ].map((size)=>/*#__PURE__*/ React.createElement("button", { key: size, onClick: ()=>setFontSize(size), className: `flex-1 py-2 px-3 rounded-lg font-medium transition-colors duration-200 ${fontSize === size ? "bg-blue-500 text-white" : "bg-white border border-gray-200 hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 668, columnNumber: 27 }, __self: this }, size.charAt(0).toUpperCase() + size.slice(1))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 682, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 683, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-moon text-indigo-500 text-xl", __source: { fileName: "", lineNumber: 684, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 685, columnNumber: 25 }, __self: this }, "Dark Mode")), /*#__PURE__*/ React.createElement("button", { onClick: toggleDarkMode, className: `w-14 h-7 rounded-full transition-colors duration-200 ${isDarkMode ? "bg-green-500" : "bg-gray-300"}`, __source: { fileName: "", lineNumber: 687, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-5 h-5 rounded-full bg-white shadow-md transform transition-transform duration-200 ${isDarkMode ? "translate-x-8" : "translate-x-1"}`, __source: { fileName: "", lineNumber: 693, columnNumber: 25 }, __self: this })))))), /*#__PURE__*/ React.createElement("main", { className: "pt-16 pb-20 px-4 max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 705, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 706, columnNumber: 15 }, __self: this }, activeTab === "challenges" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 708, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-2xl ${isDarkMode ? "bg-gray-800/80 text-gray-100" : "bg-white/80"} shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-lg border border-[#4a90e2]/30`, __source: { fileName: "", lineNumber: 709, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent mb-6", __source: { fileName: "", lineNumber: 712, columnNumber: 23 }, __self: this }, "Daily Challenges"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4", __source: { fileName: "", lineNumber: 715, columnNumber: 23 }, __self: this }, dailyChallenges.map((challenge, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 rounded-xl bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-700/50 dark:to-gray-600/50 relative overflow-hidden group", __source: { fileName: "", lineNumber: 717, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-[#00F5A0] to-[#00D9F5] opacity-0 group-hover:opacity-20 transition-opacity duration-500", __source: { fileName: "", lineNumber: 721, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex items-center justify-between", __source: { fileName: "", lineNumber: 722, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 723, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-xl", __source: { fileName: "", lineNumber: 724, columnNumber: 33 }, __self: this }, completedChallenges.includes(index) ? "✓" : "🎯"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 729, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 730, columnNumber: 35 }, __self: this }, challenge), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 733, columnNumber: 35 }, __self: this }, "+50 mindfulness points"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (!completedChallenges.includes(index)) { setCompletedChallenges([ ...completedChallenges, index ]); setMindfulnessScore((prev)=>prev + 50); triggerConfetti(); showNotification("🎉 Challenge completed! +50 points"); checkAchievements(50); } }, disabled: completedChallenges.includes(index), className: `px-6 py-2 rounded-lg transition-all duration-300 ${completedChallenges.includes(index) ? "bg-green-500 text-white cursor-default" : "bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:opacity-90 transform hover:scale-105"}`, __source: { fileName: "", lineNumber: 738, columnNumber: 31 }, __self: this }, completedChallenges.includes(index) ? "Completed" : "Complete"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 rounded-xl bg-gradient-to-r from-[#2C3E50] to-[#3498DB] text-white", __source: { fileName: "", lineNumber: 768, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 769, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 770, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 771, columnNumber: 29 }, __self: this }, "Total Mindfulness Score"), /*#__PURE__*/ React.createElement("p", { className: "text-blue-200", __source: { fileName: "", lineNumber: 774, columnNumber: 29 }, __self: this }, "Keep completing challenges to level up!")), /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 778, columnNumber: 27 }, __self: this }, mindfulnessScore)), /*#__PURE__*/ React.createElement("div", { className: "mt-4 h-2 bg-gray-700 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 782, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#00F5A0] to-[#00D9F5] transition-all duration-500", style: { width: `${mindfulnessScore % 100}%` }, __source: { fileName: "", lineNumber: 783, columnNumber: 27 }, __self: this }))))), activeTab === "friends" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 793, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-2xl ${isDarkMode ? "bg-gray-800 text-gray-100" : "bg-white"} shadow-lg`, __source: { fileName: "", lineNumber: 794, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 799, columnNumber: 23 }, __self: this }, "Find Friends"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 802, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchUsers, onChange: (e)=>{ setSearchUsers(e.target.value); setFoundUsers(registeredUsers.filter((u)=>u.username.toLowerCase().includes(e.target.value.toLowerCase()) && u.username !== user.username && !friends.includes(u.username))); }, placeholder: "Search users...", className: `flex-1 p-2 rounded-lg ${isDarkMode ? "bg-gray-700" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 803, columnNumber: 25 }, __self: this })), foundUsers.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 826, columnNumber: 25 }, __self: this }, foundUsers.map((foundUser)=>/*#__PURE__*/ React.createElement("div", { key: foundUser.username, className: "flex justify-between items-center p-2 rounded-lg bg-gray-100", __source: { fileName: "", lineNumber: 828, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 832, columnNumber: 31 }, __self: this }, foundUser.username), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setFriendRequests([ ...friendRequests, { from: user.username, to: foundUser.username } ]); showNotification("Friend request sent! 🤝"); }, className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 833, columnNumber: 31 }, __self: this }, "Add Friend"))))), friendRequests.length > 0 && /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-2xl ${isDarkMode ? "bg-gray-800 text-gray-100" : "bg-white"} shadow-lg`, __source: { fileName: "", lineNumber: 855, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 860, columnNumber: 25 }, __self: this }, "Friend Requests"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 863, columnNumber: 25 }, __self: this }, friendRequests.filter((request)=>request.to === user.username).map((request)=>/*#__PURE__*/ React.createElement("div", { key: request.from, className: "flex justify-between items-center p-2 rounded-lg bg-gray-100", __source: { fileName: "", lineNumber: 867, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 871, columnNumber: 33 }, __self: this }, request.from), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 872, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setFriends([ ...friends, request.from ]); setFriendRequests(friendRequests.filter((r)=>r.from !== request.from)); setPrivateChats([ ...privateChats, { id: privateChats.length + 1, participants: [ user.username, request.from ], messages: [] } ]); showNotification("Friend added! 🎉"); }, className: "px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600", __source: { fileName: "", lineNumber: 873, columnNumber: 35 }, __self: this }, "Accept"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setFriendRequests(friendRequests.filter((r)=>r.from !== request.from)); showNotification("Friend request declined"); }, className: "px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600", __source: { fileName: "", lineNumber: 898, columnNumber: 35 }, __self: this }, "Decline")))))), friends.length > 0 && /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-2xl ${isDarkMode ? "bg-gray-800 text-gray-100" : "bg-white"} shadow-lg`, __source: { fileName: "", lineNumber: 921, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 926, columnNumber: 25 }, __self: this }, "Friends"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 927, columnNumber: 25 }, __self: this }, friends.map((friend)=>/*#__PURE__*/ React.createElement("div", { key: friend, className: "flex justify-between items-center p-4 rounded-lg bg-gray-100", __source: { fileName: "", lineNumber: 929, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 933, columnNumber: 31 }, __self: this }, friend), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const chat = privateChats.find((c)=>c.participants.includes(user.username) && c.participants.includes(friend)); setActivePrivateChat(chat); setActiveTab("chat"); }, className: "px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600", __source: { fileName: "", lineNumber: 934, columnNumber: 31 }, __self: this }, "Chat")))))), activeTab === "chat" && /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 957, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 958, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange("home"), className: "p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", __source: { fileName: "", lineNumber: 959, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-gray-500", __source: { fileName: "", lineNumber: 963, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "ml-4 text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 965, columnNumber: 23 }, __self: this }, "Chat")), !activeGroup ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 970, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 971, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 972, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 973, columnNumber: 29 }, __self: this }, "Create New Chat Room")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 977, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newChatRoom, onChange: (e)=>setNewChatRoom(e.target.value), placeholder: "Enter chat room name...", className: "flex-1 px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700", __source: { fileName: "", lineNumber: 978, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: createNewChatRoom, className: "px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:opacity-90 transform hover:scale-105 transition-all duration-300", __source: { fileName: "", lineNumber: 985, columnNumber: 29 }, __self: this }, "Create Room"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 994, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 995, columnNumber: 27 }, __self: this }, "Available Chat Rooms"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4", __source: { fileName: "", lineNumber: 998, columnNumber: 27 }, __self: this }, groups.map((group)=>/*#__PURE__*/ React.createElement("div", { key: group.id, className: "flex items-center justify-between p-4 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-300", __source: { fileName: "", lineNumber: 1000, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1004, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 1005, columnNumber: 35 }, __self: this }, group.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 1008, columnNumber: 35 }, __self: this }, group.members.length, " members")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (!group.members.includes(user.username)) { setGroups(groups.map((g)=>g.id === group.id ? { ...g, members: [ ...g.members, user.username ] } : g)); } setActiveGroup(group); showNotification(`✨ Welcome to ${group.name}!`); }, className: "px-6 py-2 bg-gradient-to-r from-green-500 to-blue-500 text-white rounded-lg hover:opacity-90 transform hover:scale-105 transition-all duration-300", __source: { fileName: "", lineNumber: 1012, columnNumber: 33 }, __self: this }, group.members.includes(user.username) ? "Enter Chat" : "Join Room")))))) : /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 1048, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[calc(100vh-8rem)]", __source: { fileName: "", lineNumber: 1049, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 border-b dark:border-gray-700", __source: { fileName: "", lineNumber: 1050, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 1051, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveGroup(null), className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full", __source: { fileName: "", lineNumber: 1052, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-gray-500", __source: { fileName: "", lineNumber: 1056, columnNumber: 33 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center text-white font-bold", __source: { fileName: "", lineNumber: 1058, columnNumber: 31 }, __self: this }, activeGroup?.name?.charAt(0) || "C"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1061, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 1062, columnNumber: 33 }, __self: this }, activeGroup?.name || "Community Chat"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 1065, columnNumber: 33 }, __self: this }, activeGroup?.members?.length || 0, " members")))), /*#__PURE__*/ React.createElement("div", { ref: chatContainerRef, className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 1072, columnNumber: 27 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 1077, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-2xl px-4 py-2 ${message.role === "user" ? "bg-blue-500 text-white" : "bg-gray-100 dark:bg-gray-800"}`, __source: { fileName: "", lineNumber: 1085, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 1092, columnNumber: 35 }, __self: this }, message.content)))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 1099, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[70%] rounded-2xl px-4 py-2 bg-gray-100 dark:bg-gray-800", __source: { fileName: "", lineNumber: 1100, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 1101, columnNumber: 35 }, __self: this }, streamingMessage))), isTyping && /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 p-2", __source: { fileName: "", lineNumber: 1108, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 1109, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 1110, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 1114, columnNumber: 33 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t dark:border-gray-700", __source: { fileName: "", lineNumber: 1122, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 1123, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowEmojiPicker(!showEmojiPicker), className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full", __source: { fileName: "", lineNumber: 1124, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-smile text-gray-500", __source: { fileName: "", lineNumber: 1130, columnNumber: 33 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Message...", className: "flex-1 bg-gray-100 dark:bg-gray-800 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500", onKeyPress: (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); if (newMessage.trim() && user) { sendMessage(activeGroup.id, newMessage); } } }, __source: { fileName: "", lineNumber: 1132, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (newMessage.trim() && user) { sendMessage(activeGroup.id, newMessage); } }, className: "p-2 text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 1147, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 1155, columnNumber: 33 }, __self: this }))), showEmojiPicker && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-20 left-4 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-xl border dark:border-gray-700", __source: { fileName: "", lineNumber: 1159, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-2", __source: { fileName: "", lineNumber: 1160, columnNumber: 33 }, __self: this }, [ "😊", "😂", "🥰", "😎", "🤔", "😅", "👍", "❤️", "🎉", "✨", "🌟", "💪", "🙏", "🌈", "🎨", "🎭" ].map((emoji)=>/*#__PURE__*/ React.createElement("button", { key: emoji, onClick: ()=>onEmojiClick(emoji), className: "text-2xl hover:scale-125 transition-transform duration-200", __source: { fileName: "", lineNumber: 1179, columnNumber: 37 }, __self: this }, emoji)))))))), activeTab === "bubbleGame" && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900", __source: { fileName: "", lineNumber: 1198, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 right-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 1199, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 1200, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 1201, columnNumber: 25 }, __self: this }, "Score: ", bubbleScore), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-yellow-500", __source: { fileName: "", lineNumber: 1204, columnNumber: 25 }, __self: this }, "High Score: ", highScore), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-pink-500", __source: { fileName: "", lineNumber: 1207, columnNumber: 25 }, __self: this }, "Level: ", Math.floor(bubbleScore / 100) + 1)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setBubbleScore(0); showNotification("Game Reset! Try to beat your high score!"); }, className: "px-4 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition-colors", __source: { fileName: "", lineNumber: 1211, columnNumber: 23 }, __self: this }, "Restart")), /*#__PURE__*/ React.createElement("div", { className: "w-full h-full relative", __source: { fileName: "", lineNumber: 1224, columnNumber: 21 }, __self: this }, Array.from({ length: Math.min(20 + Math.floor(bubbleScore / 50), 40) }).map((_, index)=>{ const bubbleType = Math.random() < 0.2 ? "special" : Math.random() < 0.1 ? "bomb" : Math.random() < 0.05 ? "golden" : "normal"; const points = bubbleType === "golden" ? 10 : bubbleType === "special" ? 5 : bubbleType === "bomb" ? -10 : 1; const color = bubbleType === "golden" ? "bg-yellow-400" : bubbleType === "special" ? "bg-purple-400" : bubbleType === "bomb" ? "bg-red-500" : "bg-blue-400"; return /*#__PURE__*/ React.createElement("button", { key: index, className: `absolute w-16 h-16 rounded-full ${color} opacity-80 hover:opacity-100 transition-all duration-300 transform hover:scale-110 cursor-pointer`, style: { left: `${Math.random() * 90}%`, top: `${Math.random() * 90}%`, animation: `float ${2 + Math.random() * 2}s infinite ease-in-out` }, onClick: (e)=>{ const newScore = Math.max(0, bubbleScore + points); setBubbleScore(newScore); if (newScore > highScore) { setHighScore(newScore); showNotification("🏆 New High Score!"); triggerConfetti(); } const popup = document.createElement("div"); popup.className = `absolute text-2xl font-bold ${points > 0 ? "text-green-500" : "text-red-500"}`; popup.textContent = points > 0 ? `+${points}` : points; popup.style.left = "50%"; popup.style.top = "50%"; popup.style.transform = "translate(-50%, -50%)"; e.currentTarget.appendChild(popup); setTimeout(()=>{ popup.style.transform = "translate(-50%, -100%)"; popup.style.opacity = "0"; }, 50); setTimeout(()=>popup.remove(), 500); e.currentTarget.style.visibility = "hidden"; setTimeout(()=>{ e.currentTarget.style.left = `${Math.random() * 90}%`; e.currentTarget.style.top = `${Math.random() * 90}%`; e.currentTarget.style.visibility = "visible"; }, 1000); const audio = new Audio("/pop.mp3"); audio.volume = 0.3; audio.play(); if (points > 0) { triggerConfetti(); } if (navigator.vibrate) { navigator.vibrate(50); } }, __source: { fileName: "", lineNumber: 1256, columnNumber: 27 }, __self: this }, bubbleType === "bomb" && "💣", bubbleType === "golden" && "⭐", bubbleType === "special" && "✨"); })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 right-4 bg-white/10 backdrop-blur-md rounded-xl p-4", __source: { fileName: "", lineNumber: 1322, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around text-sm", __source: { fileName: "", lineNumber: 1323, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1324, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 rounded-full bg-blue-400", __source: { fileName: "", lineNumber: 1325, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1326, columnNumber: 27 }, __self: this }, "Normal (+1)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1328, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 rounded-full bg-purple-400", __source: { fileName: "", lineNumber: 1329, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1330, columnNumber: 27 }, __self: this }, "Special (+5)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1332, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 rounded-full bg-yellow-400", __source: { fileName: "", lineNumber: 1333, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1334, columnNumber: 27 }, __self: this }, "Golden (+10)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1336, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 rounded-full bg-red-500", __source: { fileName: "", lineNumber: 1337, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1338, columnNumber: 27 }, __self: this }, "Bomb (-10)"))))), showRelaxingSounds ? /*#__PURE__*/ React.createElement("div", { className: `rounded-lg p-4 ${isDarkMode ? "bg-gray-800 text-gray-100" : "bg-white"} shadow`, __source: { fileName: "", lineNumber: 1346, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-blue-500", __source: { fileName: "", lineNumber: 1351, columnNumber: 21 }, __self: this }, "Relaxation Center"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 1354, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2 text-purple-500", __source: { fileName: "", lineNumber: 1355, columnNumber: 23 }, __self: this }, "Ocean Views"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 1358, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-video bg-gray-100 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 1359, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://www.youtube.com/embed/LXb3EKWsInQ", title: "Calming ocean waves on tropical beach", className: "w-full h-full", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 1360, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "aspect-video bg-gray-100 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 1369, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://www.youtube.com/embed/WHPEKLQID4U", title: "Peaceful underwater coral reef scene", className: "w-full h-full", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 1370, columnNumber: 27 }, __self: this })))), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2 text-violet-500", __source: { fileName: "", lineNumber: 1381, columnNumber: 21 }, __self: this }, "Relaxing Sounds"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 1384, columnNumber: 21 }, __self: this }, [ "Rain", "Ocean", "Forest", "White Noise" ].map((sound)=>/*#__PURE__*/ React.createElement("button", { key: sound, onClick: ()=>playSound(sound.toLowerCase()), className: "p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-300", __source: { fileName: "", lineNumber: 1387, columnNumber: 27 }, __self: this }, sound))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-6", __source: { fileName: "", lineNumber: 1397, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: stopSound, className: "w-1/2 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition-colors duration-300", __source: { fileName: "", lineNumber: 1398, columnNumber: 23 }, __self: this }, "Stop Sound"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowRelaxingSounds(false), className: "w-1/2 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors duration-300", __source: { fileName: "", lineNumber: 1404, columnNumber: 23 }, __self: this }, "Back to Home"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, activeTab === "home" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 1415, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-2xl p-6 ${isDarkMode ? "bg-gray-800/80 text-gray-100" : "bg-white/80"} shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-lg border border-[#4a90e2]/30`, __source: { fileName: "", lineNumber: 1416, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 1423, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 1424, columnNumber: 29 }, __self: this }, "Chat Rooms"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange("chat"), className: "px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:opacity-90 transform hover:scale-105 transition-all duration-300", __source: { fileName: "", lineNumber: 1427, columnNumber: 29 }, __self: this }, "Open Chat")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 1434, columnNumber: 27 }, __self: this }, groups.map((group)=>/*#__PURE__*/ React.createElement("div", { key: group.id, onClick: ()=>{ setActiveGroup(group); handleTabChange("chat"); }, className: "flex items-center justify-between p-4 rounded-xl cursor-pointer transform hover:scale-[1.02] transition-all duration-300 bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-700/50 dark:to-gray-600/50", __source: { fileName: "", lineNumber: 1436, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 1444, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-xl", __source: { fileName: "", lineNumber: 1445, columnNumber: 35 }, __self: this }, group.name.charAt(0)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1448, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 1449, columnNumber: 37 }, __self: this }, group.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 1452, columnNumber: 37 }, __self: this }, group.description))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1457, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 1458, columnNumber: 35 }, __self: this }, group.members.length, " members"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-gray-400", __source: { fileName: "", lineNumber: 1461, columnNumber: 35 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: `rounded-2xl p-6 ${isDarkMode ? "bg-gray-800/80 text-gray-100" : "bg-white/80"} shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-lg border border-[#4a90e2]/30`, __source: { fileName: "", lineNumber: 1468, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 1475, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 1476, columnNumber: 29 }, __self: this }, "Bubble Pop Game"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTabChange("bubbleGame"), className: "px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:opacity-90 transform hover:scale-105 transition-all duration-300", __source: { fileName: "", lineNumber: 1479, columnNumber: 29 }, __self: this }, "Play Game")), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl p-6", __source: { fileName: "", lineNumber: 1486, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 1487, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 1488, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 flex items-center justify-center text-white text-xl", __source: { fileName: "", lineNumber: 1489, columnNumber: 33 }, __self: this }, "🎮"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1492, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 1493, columnNumber: 35 }, __self: this }, "Pop Bubbles, Reduce Stress"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 1496, columnNumber: 35 }, __self: this }, "A relaxing game to help calm your mind"))), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 1501, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 1502, columnNumber: 33 }, __self: this }, "High Score"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500", __source: { fileName: "", lineNumber: 1505, columnNumber: 33 }, __self: this }, bubbleScore))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-3", __source: { fileName: "", lineNumber: 1510, columnNumber: 29 }, __self: this }, [ { type: "Normal", color: "bg-blue-400", points: "+1", icon: "" }, { type: "Special", color: "bg-purple-400", points: "+5", icon: "✨" }, { type: "Golden", color: "bg-yellow-400", points: "+10", icon: "⭐" }, { type: "Bomb", color: "bg-red-500", points: "-10", icon: "💣" } ].map((bubble)=>/*#__PURE__*/ React.createElement("div", { key: bubble.type, className: "text-center p-3 rounded-lg bg-white/10 backdrop-blur-sm", __source: { fileName: "", lineNumber: 1537, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 mx-auto rounded-full mb-2 ${bubble.color} flex items-center justify-center`, __source: { fileName: "", lineNumber: 1541, columnNumber: 35 }, __self: this }, bubble.icon), /*#__PURE__*/ React.createElement("div", { className: "text-xs font-medium", __source: { fileName: "", lineNumber: 1546, columnNumber: 35 }, __self: this }, bubble.points)))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 1555, columnNumber: 25 }, __self: this }, displayedPosts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: `p-6 rounded-2xl ${isDarkMode ? "bg-gray-800/90 text-gray-100" : "bg-white/90"} shadow-xl hover:shadow-2xl transform hover:scale-[1.02] transition-all duration-300 backdrop-blur-lg border border-[#4a90e2]/30`, __source: { fileName: "", lineNumber: 1557, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-6 rounded-xl bg-gradient-to-r from-[#2C3E50] to-[#3498DB] relative overflow-hidden group", __source: { fileName: "", lineNumber: 1565, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-[#00F5A0] to-[#00D9F5] opacity-0 group-hover:opacity-20 transition-opacity duration-500", __source: { fileName: "", lineNumber: 1566, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex items-center justify-between", __source: { fileName: "", lineNumber: 1567, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 1568, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-gradient-to-r from-[#00F5A0] to-[#00D9F5] flex items-center justify-center text-2xl", __source: { fileName: "", lineNumber: 1569, columnNumber: 37 }, __self: this }, post.moodEmoji), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1572, columnNumber: 37 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-white text-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 1573, columnNumber: 39 }, __self: this }, post.user, post.user !== user?.username && !friends.includes(post.user) && /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setFriendRequests([ ...friendRequests, { from: user.username, to: post.user } ]); showNotification("Friend request sent! 🤝"); }, className: "px-2 py-1 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded-full transition-colors duration-300", __source: { fileName: "", lineNumber: 1577, columnNumber: 45 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus", __source: { fileName: "", lineNumber: 1592, columnNumber: 47 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-blue-200 text-sm", __source: { fileName: "", lineNumber: 1596, columnNumber: 39 }, __self: this }, new Date(post.timestamp).toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 1603, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 1604, columnNumber: 37 }, __self: this }, "Mood Level"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold bg-gradient-to-r from-[#00F5A0] to-[#00D9F5] text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 1607, columnNumber: 37 }, __self: this }, post.mood, "/10")))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-lg leading-relaxed backdrop-blur-sm p-4 rounded-xl border border-[#4a90e2]/20", __source: { fileName: "", lineNumber: 1613, columnNumber: 31 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 1616, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>likePost(post.id), className: `group flex items-center space-x-2 px-4 py-2 rounded-full bg-gradient-to-r from-[#FF0080] to-[#7928CA] text-white transform hover:scale-105 transition-all duration-300 ${post.liked ? "animate-heartBeat" : ""}`, __source: { fileName: "", lineNumber: 1617, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart group-hover:animate-heartBeat", __source: { fileName: "", lineNumber: 1623, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1624, columnNumber: 35 }, __self: this }, post.likes)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 mx-4", __source: { fileName: "", lineNumber: 1626, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Share your thoughts...", value: newComment, onChange: (e)=>setNewComment(e.target.value), className: `w-full px-6 py-3 rounded-full ${isDarkMode ? "bg-gray-700 text-white" : "bg-gray-100"} focus:ring-2 focus:ring-[#4a90e2] transition-all duration-300 border border-[#4a90e2]/30`, onKeyPress: (e)=>{ if (e.key === "Enter") { addComment(post.id); } }, __source: { fileName: "", lineNumber: 1627, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addComment(post.id), className: "px-4 py-2 rounded-full bg-gradient-to-r from-[#7928CA] to-[#FF0080] text-white transform hover:scale-105 transition-all duration-300", __source: { fileName: "", lineNumber: 1646, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 1650, columnNumber: 35 }, __self: this }))), post.comments.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-3", __source: { fileName: "", lineNumber: 1654, columnNumber: 33 }, __self: this }, post.comments.map((comment)=>/*#__PURE__*/ React.createElement("div", { key: comment.id, className: `p-4 rounded-xl backdrop-blur-sm ${isDarkMode ? "bg-gray-700/50 text-gray-100" : "bg-gray-100/50"} border border-[#4a90e2]/20 transform hover:scale-[1.01] transition-all duration-300`, __source: { fileName: "", lineNumber: 1656, columnNumber: 37 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-2", __source: { fileName: "", lineNumber: 1664, columnNumber: 39 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold bg-gradient-to-r from-[#7928CA] to-[#FF0080] text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 1665, columnNumber: 41 }, __self: this }, comment.user), /*#__PURE__*/ React.createElement("span", { className: "text-xs opacity-50", __source: { fileName: "", lineNumber: 1668, columnNumber: 41 }, __self: this }, new Date(comment.timestamp).toLocaleString())), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 1674, columnNumber: 39 }, __self: this }, comment.content)))))))), activeTab === "mindfulPost" && /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-lg ${isDarkMode ? "bg-gray-800 text-gray-100" : "bg-white"} shadow`, __source: { fileName: "", lineNumber: 1687, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900", __source: { fileName: "", lineNumber: 1692, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 1693, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 1694, columnNumber: 29 }, __self: this }, moodEmoji), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold", style: { color: moodColor }, __source: { fileName: "", lineNumber: 1695, columnNumber: 29 }, __self: this }, moodDescription))), /*#__PURE__*/ React.createElement("textarea", { value: newPost, onChange: (e)=>setNewPost(e.target.value), placeholder: "What's on your mind? Share your journey...", className: `w-full p-3 rounded-lg ${isDarkMode ? "bg-gray-700 text-gray-100" : "bg-gray-100"} focus:ring-2 focus:ring-blue-500 transition-all duration-300`, rows: 4, __source: { fileName: "", lineNumber: 1703, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 1714, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 1715, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 1716, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 1717, columnNumber: 31 }, __self: this }, "Mood:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "10", value: moodRating, onChange: (e)=>updateMoodIndicators(parseInt(e.target.value, 10)), className: "w-32", style: { background: `linear-gradient(to right, ${moodColor} ${moodRating / 10 * 100}%, #ddd ${moodRating / 10 * 100}%)` }, __source: { fileName: "", lineNumber: 1718, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 1735, columnNumber: 31 }, __self: this }, moodRating, "/10")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1737, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: isRecording ? stopRecording : startRecording, className: `p-2 rounded-full ${isRecording ? "bg-red-500" : "bg-blue-500"} text-white hover:opacity-80 transition-opacity`, __source: { fileName: "", lineNumber: 1738, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-microphone${isRecording ? "-slash" : ""}`, __source: { fileName: "", lineNumber: 1746, columnNumber: 33 }, __self: this })), audioURL && /*#__PURE__*/ React.createElement("audio", { src: audioURL, controls: true, className: "h-8 w-32", __source: { fileName: "", lineNumber: 1753, columnNumber: 33 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if ((newPost.trim() || audioURL) && user) { const post = { id: posts.length + 1, user: user.username, content: filterExplicitContent(newPost.trim()), mood: moodRating, moodEmoji, moodDescription, timestamp: new Date().toISOString(), likes: 0, comments: [], audioURL }; setPosts([ post, ...posts ]); setNewPost(""); setAudioURL(""); updateMoodIndicators(5); playSound("post"); updateEmotionalLandscape("joy", 3); triggerConfetti(); showNotification("✨ Your thoughts have been shared!"); } }, className: "px-6 py-3 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white rounded-full hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center gap-2 group", __source: { fileName: "", lineNumber: 1761, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-feather-alt transform group-hover:-rotate-12 transition-transform duration-300", __source: { fileName: "", lineNumber: 1792, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1793, columnNumber: 29 }, __self: this }, "Share Journey"))))))), /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 left-0 right-0 backdrop-blur-lg border-t border-white/10", __source: { fileName: "", lineNumber: 1803, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 1804, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center py-3", __source: { fileName: "", lineNumber: 1805, columnNumber: 17 }, __self: this }, [ { id: "home", icon: "fa-home", color: "blue", label: "Home" }, { id: "challenges", icon: "fa-tasks", color: "green", label: "Challenges" }, { id: "chat", icon: "fa-comments", color: "purple", label: "Chat" }, { id: "friends", icon: "fa-user-friends", color: "green", label: "Friends" }, { id: "bubbleGame", icon: "fa-circle", color: "cyan", label: "Game" }, { id: "mindfulPost", icon: "fa-plus", color: "pink", label: "Post" } ].map((item)=>/*#__PURE__*/ React.createElement("button", { key: item.id, "data-feature": item.id, onClick: ()=>{ handleTabChange(item.id); setHighlightedFeature(highlightedFeature === item.id ? null : item.id); }, className: `p-3 rounded-xl transition-all duration-300 flex flex-col items-center gap-1 ${activeTab === item.id ? `bg-${item.color}-500/20 text-${item.color}-500` : "text-gray-400 hover:text-gray-300"} ${highlightedFeature === item.id ? `ring-2 ring-${item.color}-400/50 animate-pulse` : ""}`, __source: { fileName: "", lineNumber: 1814, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} text-xl`, __source: { fileName: "", lineNumber: 1833, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 1834, columnNumber: 23 }, __self: this }, item.label))))))))); }