function NextPrayersSection() { const [center, setCenter] = React.useState(); const [prayerTimes, setPrayerTimes] = React.useState({ fajr: "Loading...", dhuhr: "Loading...", asr: "Loading...", maghrib: "Loading...", isha: "Loading..." }); const getPrayerTimes = async (location)=>{ const response = await fetch(`/integrations/google-search/search?q=prayer times ${location.lat},${location.lng}`); const data = await response.json(); if (data.items?.[0]) { setPrayerTimes({ fajr: data.items[0].fajr || "5:30 AM", dhuhr: data.items[0].dhuhr || "12:30 PM", asr: data.items[0].asr || "3:45 PM", maghrib: data.items[0].maghrib || "6:15 PM", isha: data.items[0].isha || "7:45 PM" }); } }; return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "p-6 rounded-3xl bg-[rgba(229,231,255,0.05)] backdrop-blur-xl border border-[rgba(229,231,255,0.1)] hover:scale-105 transition-all duration-300", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-[#E5E7FF] mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Next Prayers"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, Object.entries(prayerTimes).map(([prayer, time])=>/*#__PURE__*/ React.createElement("div", { key: prayer, className: "flex justify-between items-center py-2 px-4 rounded-xl bg-[rgba(229,231,255,0.03)] backdrop-blur-xl", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#E5E7FF] capitalize", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, prayer), /*#__PURE__*/ React.createElement("span", { className: "text-[#94A3B8]", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, time)))))); } function NextPrayersSectionStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#1A1B1E]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NextPrayersSection, { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function MainComponent() { const [emotion, setEmotion] = useState(""); const [guidance, setGuidance] = useState(null); const [loading, setLoading] = useState(false); const [charCount, setCharCount] = useState(0); const [darkMode, setDarkMode] = useState(false); const [prayerTimes, setPrayerTimes] = useState(null); const [dhikrCount, setDhikrCount] = useState(0); const [showSidebar, setShowSidebar] = useState(false); const [isMobile, setIsMobile] = useState(false); const [audioElements, setAudioElements] = useState({}); const [audioPlaying, setAudioPlaying] = useState(null); const [selectedEmotionType, setSelectedEmotionType] = useState(null); const resultsRef = React.useRef(null); useEffect(()=>{ document.title = "Imaanly - Personalized Islamic Emotional Guidance"; const metaTags = [ { name: "description", content: "Imaanly offers personalized Islamic guidance based on your emotions. Discover comforting advice rooted in Islamic values. Sign up now for peace and spiritual support." }, { name: "keywords", content: "Islamic guidance, emotional support, Imaanly, personalized Islamic advice, spiritual wellness, find peace" }, { property: "og:title", content: "Imaanly - Find Peace and Guidance for Every Emotion" }, { property: "og:description", content: "Get personalized Islamic guidance based on your feelings with Imaanly. Find comfort and spiritual support in every moment." }, { property: "og:image", content: "/imaanly-logo.png" } ]; metaTags.forEach((tag)=>{ let meta = document.querySelector(`meta[${tag.name ? "name" : "property"}="${tag.name || tag.property}"]`); if (!meta) { meta = document.createElement("meta"); if (tag.name) meta.setAttribute("name", tag.name); if (tag.property) meta.setAttribute("property", tag.property); document.head.appendChild(meta); } meta.setAttribute("content", tag.content); }); }, []); useEffect(()=>{ const handleResize = ()=>{ setIsMobile(window.innerWidth < 768); }; handleResize(); window.addEventListener("resize", handleResize); return ()=>window.removeEventListener("resize", handleResize); }, []); useEffect(()=>{ if (guidance && resultsRef.current) { resultsRef.current.scrollIntoView({ behavior: "smooth" }); } }, [ guidance ]); const handleEmotionSelect = (selectedEmotion)=>{ setEmotion(selectedEmotion); fetchGuidance(selectedEmotion); }; const handleDhikrCount = ()=>{ setDhikrCount((prev)=>(prev + 1) % 100); }; const resetDhikrCount = ()=>{ setDhikrCount(0); }; const handleSubmit = ()=>{ if (emotion.trim()) { fetchGuidance(emotion); } }; const fetchGuidance = async (emotionText)=>{ try { setLoading(true); setGuidance(null); const searchResponse = await fetch(`/integrations/google-search/search?q=islamic+guidance+quran+hadith+for+feeling+${emotionText}`); const searchData = await searchResponse.json(); const searchContext = searchData.items.map((item)=>item.snippet).join("\n"); const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `You are an Islamic guidance assistant. Based on this search context about Islamic guidance for ${emotionText}: ${searchContext}\n\nProvide comprehensive Islamic guidance for someone feeling ${emotionText}. Include complete Quranic verses, authentic hadiths, or traditional du'as that specifically address this emotion. Each piece of guidance must include the full Arabic text, accurate transliteration, and precise English translation.` } ], json_schema: { name: "islamic_guidance", schema: { type: "object", properties: { emotion: { type: "string" }, guidances: { type: "array", items: { type: "object", properties: { title: { type: "string" }, arabic: { type: "string" }, transliteration: { type: "string" }, translation: { type: "string" }, reference: { type: "string" }, context: { type: "string" }, recitationTimes: { type: "string" }, benefits: { type: "string" }, audioUrl: { type: "string" }, bookmarked: { type: "boolean" }, tags: { type: "array", items: { type: "string" } } }, required: [ "title", "arabic", "transliteration", "translation", "reference", "context", "recitationTimes", "benefits", "audioUrl", "bookmarked", "tags" ], additionalProperties: false } } }, required: [ "emotion", "guidances" ], additionalProperties: false } } }) }); if (!response.ok) { throw new Error("Failed to fetch guidance"); } const data = await response.json(); if (data.choices && data.choices[0] && data.choices[0].message) { const content = JSON.parse(data.choices[0].message.content); setGuidance(content); } else { throw new Error("Invalid response format"); } } catch (error) { console.error("Error fetching guidance:", error); } finally{ setLoading(false); } }; const handlePlayAudio = async (arabic, index)=>{ try { if (audioElements[index]) { audioElements[index].pause(); const newAudioElements = { ...audioElements }; delete newAudioElements[index]; setAudioElements(newAudioElements); setAudioPlaying(null); return; } const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(arabic)}`); if (!response.ok) throw new Error("Failed to fetch audio"); const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); const audio = new Audio(audioUrl); audio.onended = ()=>{ setAudioPlaying(null); const newAudioElements = { ...audioElements }; delete newAudioElements[index]; setAudioElements(newAudioElements); URL.revokeObjectURL(audioUrl); }; await audio.play(); setAudioElements((prev)=>({ ...prev, [index]: audio })); setAudioPlaying(index); } catch (error) { console.error("Error playing audio:", error); setAudioPlaying(null); } }; const handleKeyPress = (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSubmit(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-[#0A1029] to-[#1A1B3F] font-poppins", __source: { fileName: "", lineNumber: 228, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 z-50 bg-[rgba(229,231,255,0.05)] backdrop-blur-xl border-b border-[rgba(229,231,255,0.1)] p-4 md:hidden", __source: { fileName: "", lineNumber: 229, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold bg-gradient-to-r from-[#4F46E5] to-[#06B6D4] text-transparent bg-clip-text text-center", __source: { fileName: "", lineNumber: 230, columnNumber: 9 }, __self: this }, "Imaanly")), isMobile ? /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 z-50 bg-[rgba(229,231,255,0.05)] backdrop-blur-xl border-t border-[rgba(229,231,255,0.1)] p-6", __source: { fileName: "", lineNumber: 236, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 text-center", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#E5E7FF]", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, "0"), /*#__PURE__*/ React.createElement("button", { className: "w-11 h-11 rounded-xl bg-[#6366F1] text-white hover:bg-[#4F46E5] transition-colors flex items-center justify-center mx-auto mt-1", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-sm", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 text-center", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-14 h-14 mx-auto rounded-full bg-[#6366F1] flex items-center justify-center", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-xl text-white", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 text-center", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#E5E7FF]", __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, dhikrCount), /*#__PURE__*/ React.createElement("button", { onClick: handleDhikrCount, className: "w-11 h-11 rounded-xl bg-[#6366F1] text-white hover:bg-[#4F46E5] transition-colors flex items-center justify-center mx-auto mt-1", __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-sm", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }))))) : /*#__PURE__*/ React.createElement("div", { className: `${showSidebar ? "translate-x-0" : "-translate-x-full"} md:translate-x-0 transition-transform duration-300 fixed z-40 w-72 h-full bg-[rgba(229,231,255,0.05)] backdrop-blur-xl border-r border-[rgba(229,231,255,0.1)]`, __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 border-b border-[rgba(229,231,255,0.1)] flex justify-between items-center", __source: { fileName: "", lineNumber: 266, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold bg-gradient-to-r from-[#4F46E5] to-[#06B6D4] text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, "Imaanly"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDarkMode(!darkMode), className: "p-2 rounded-lg text-[#E5E7FF] hover:text-[#6366F1] transition-colors", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${darkMode ? "fa-sun" : "fa-moon"} text-xl`, __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-6", __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(NextPrayersSection, { __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `${isMobile ? "pb-32 pt-20" : "md:pl-72"} transition-all duration-300`, __source: { fileName: "", lineNumber: 284, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12", __source: { fileName: "", lineNumber: 287, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8 md:space-y-12", __source: { fileName: "", lineNumber: 288, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-center md:text-left ${isMobile ? "mt-4" : ""}`, __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl lg:text-6xl font-bold bg-gradient-to-r from-[#4F46E5] to-[#06B6D4] text-transparent bg-clip-text", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }, "As-salaam-alaikum, Friend"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl lg:text-[2.5rem] font-bold mt-4 text-[#E5E7FF]", __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, "How are you", " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#6366F1]", __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this }, "feeling today?")), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-base md:text-lg leading-relaxed text-[#94A3B8]", __source: { fileName: "", lineNumber: 299, columnNumber: 15 }, __self: this }, "Select a common feeling below or share your own emotions for Islamic guidance")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6", __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }, [ "anxious", "sad", "angry", "grateful" ].map((emotionType)=>/*#__PURE__*/ React.createElement("button", { key: emotionType, onClick: ()=>{ setSelectedEmotionType(emotionType); handleEmotionSelect(emotionType); }, disabled: loading, className: `p-6 rounded-3xl backdrop-blur-xl border transition-all duration-300 text-left flex items-start space-x-4 ${loading ? "opacity-50 cursor-not-allowed" : selectedEmotionType === emotionType ? "bg-[rgba(99,102,241,0.15)] border-[#6366F1] scale-105" : "bg-[rgba(229,231,255,0.05)] border-[rgba(229,231,255,0.1)] hover:scale-105"}`, __source: { fileName: "", lineNumber: 307, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${emotionType === "anxious" ? "fa-heart" : emotionType === "sad" ? "fa-pray" : emotionType === "angry" ? "fa-hand-holding-heart" : "fa-star-and-crescent"} text-xl text-[#6366F1]`, __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-lg text-[#E5E7FF]", __source: { fileName: "", lineNumber: 333, columnNumber: 19 }, __self: this }, emotionType === "anxious" && "I'm feeling anxious and need Islamic guidance", emotionType === "sad" && "Help me find peace when feeling sad", emotionType === "angry" && "Islamic guidance for managing anger", emotionType === "grateful" && "Finding gratitude in difficult times")))), /*#__PURE__*/ React.createElement("div", { className: "relative mt-12", __source: { fileName: "", lineNumber: 347, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-[#6366F1] to-[#4F46E5] opacity-10 blur-xl rounded-2xl", __source: { fileName: "", lineNumber: 348, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 349, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: emotion, onChange: (e)=>{ setEmotion(e.target.value); setCharCount(e.target.value.length); setSelectedEmotionType(null); }, onKeyDown: handleKeyPress, disabled: loading, name: "emotion", placeholder: "Share how you're feeling...", maxLength: 1000, className: `w-full min-h-[160px] p-6 rounded-3xl bg-[rgba(229,231,255,0.05)] backdrop-blur-xl border-2 border-[rgba(229,231,255,0.1)] focus:outline-none focus:ring-4 focus:ring-[#4F46E5] focus:border-transparent font-poppins text-[#E5E7FF] placeholder-[#94A3B8] resize-none hover:border-[#4F46E5] transition-all duration-300 ${loading ? "opacity-50 cursor-not-allowed" : ""}`, __source: { fileName: "", lineNumber: 350, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-6 right-6 flex items-center gap-6", __source: { fileName: "", lineNumber: 366, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 367, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-base text-[#94A3B8] bg-[rgba(229,231,255,0.05)] px-4 py-2 rounded-xl", __source: { fileName: "", lineNumber: 368, columnNumber: 21 }, __self: this }, charCount, "/1000"), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading || !emotion.trim(), className: `px-6 py-4 rounded-xl text-white text-lg transition-all duration-300 ${loading || !emotion.trim() ? "bg-[rgba(229,231,255,0.1)] cursor-not-allowed" : "bg-[#6366F1] hover:bg-[#4F46E5] hover:scale-105 shadow-lg hover:shadow-xl"}`, __source: { fileName: "", lineNumber: 371, columnNumber: 21 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-xl", __source: { fileName: "", lineNumber: 381, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right text-xl", __source: { fileName: "", lineNumber: 383, columnNumber: 25 }, __self: this }))))))), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center text-[#94A3B8] font-poppins", __source: { fileName: "", lineNumber: 393, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 394, columnNumber: 15 }, __self: this }), "Finding guidance..."), /*#__PURE__*/ React.createElement("div", { ref: resultsRef, __source: { fileName: "", lineNumber: 399, columnNumber: 11 }, __self: this }, guidance && /*#__PURE__*/ React.createElement("div", { className: "mt-12 space-y-8", __source: { fileName: "", lineNumber: 401, columnNumber: 15 }, __self: this }, guidance.guidances.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-6 md:p-8 rounded-3xl bg-[rgba(229,231,255,0.05)] backdrop-blur-xl border-2 border-[rgba(229,231,255,0.1)] hover:border-[#4F46E5] transition-all duration-300", __source: { fileName: "", lineNumber: 403, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 407, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:justify-between md:items-center gap-4", __source: { fileName: "", lineNumber: 408, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-[#E5E7FF]", __source: { fileName: "", lineNumber: 409, columnNumber: 25 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 412, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePlayAudio(item.arabic, index), className: `p-2 rounded-xl transition-colors ${audioPlaying === index ? "text-[#6366F1]" : "text-[#94A3B8] hover:text-[#E5E7FF]"}`, __source: { fileName: "", lineNumber: 413, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${audioPlaying === index ? "fa-pause" : "fa-play"}`, __source: { fileName: "", lineNumber: 421, columnNumber: 29 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-6 md:p-8 rounded-2xl bg-[rgba(10,16,41,0.6)] backdrop-blur-xl border border-[rgba(229,231,255,0.05)]", __source: { fileName: "", lineNumber: 429, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-3xl md:text-4xl text-right font-arabic leading-relaxed mb-6 text-[#E5E7FF]", __source: { fileName: "", lineNumber: 430, columnNumber: 25 }, __self: this }, item.arabic), /*#__PURE__*/ React.createElement("p", { className: "text-base md:text-lg italic text-[#94A3B8] border-t border-[rgba(229,231,255,0.05)] pt-4", __source: { fileName: "", lineNumber: 433, columnNumber: 25 }, __self: this }, item.transliteration)), /*#__PURE__*/ React.createElement("div", { className: "p-6 md:p-8 rounded-2xl bg-[rgba(10,16,41,0.6)] backdrop-blur-xl border border-[rgba(229,231,255,0.05)]", __source: { fileName: "", lineNumber: 437, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl leading-relaxed text-[#E5E7FF]", __source: { fileName: "", lineNumber: 438, columnNumber: 25 }, __self: this }, '"', item.translation, '"')), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-6 rounded-2xl bg-[rgba(229,231,255,0.02)]", __source: { fileName: "", lineNumber: 442, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-lg text-[#E5E7FF]", __source: { fileName: "", lineNumber: 443, columnNumber: 25 }, __self: this }, item.reference), /*#__PURE__*/ React.createElement("p", { className: "text-[#94A3B8] leading-relaxed", __source: { fileName: "", lineNumber: 446, columnNumber: 25 }, __self: this }, item.context)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3 mt-6", __source: { fileName: "", lineNumber: 450, columnNumber: 23 }, __self: this }, item.tags.map((tag, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: "px-4 py-2 rounded-xl text-base bg-[rgba(229,231,255,0.05)] text-[#6366F1] hover:bg-[rgba(99,102,241,0.1)] transition-colors", __source: { fileName: "", lineNumber: 452, columnNumber: 27 }, __self: this }, tag)))))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 468, columnNumber: 7 }, __self: this }, ` @media (max-width: 768px) { html { font-size: calc(14px + 2 * ((100vw - 320px) / 448)); } } @media (min-width: 769px) { html { font-size: 16px; } } `)); }

Imaanly

Imaanly

Next Prayers

As-salaam-alaikum, Friend

How are you feeling today?