function MainComponent() { const [userId, setUserId] = useState(""); const [dailyReading, setDailyReading] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [showDemo, setShowDemo] = useState(true); const fetchDailyReading = async (id)=>{ try { const response = await fetch("/api/personalized-daily-reading", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: id }) }); if (!response.ok) { throw new Error("Could not generate daily reading"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } return data; } catch (err) { throw new Error(err.message || "Could not fetch daily reading"); } }; const handleGetReading = async ()=>{ if (!userId.trim()) { setError("Please enter a user ID"); return; } setLoading(true); setError(null); try { const reading = await fetchDailyReading(userId); setDailyReading(reading); setShowDemo(false); } catch (err) { console.error(err); setError(err.message); } finally{ setLoading(false); } }; const resetDemo = ()=>{ setShowDemo(true); setDailyReading(null); setUserId(""); setError(null); }; const formatDate = (date)=>{ return new Date(date).toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1D1F33] text-[#D6D7E0] font-poppins", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-[#F2BCC2] mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Your Daily Cosmic Reading"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#D6D7E0]/80", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Personalized astrological guidance based on your unique celestial blueprint")), showDemo && /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto mb-8", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2A2D4A]/50 backdrop-blur-lg rounded-xl p-6", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-4xl text-[#F2BCC2] mb-3", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "Demo Access"), /*#__PURE__*/ React.createElement("p", { className: "text-[#D6D7E0]/70 text-sm mt-2", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "Enter a user ID to view their personalized daily reading")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userId, onChange: (e)=>setUserId(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleGetReading(), placeholder: "Enter User ID (e.g., 1)", className: "w-full bg-[#4A4E69] border border-[#B97A57]/30 rounded-lg px-4 py-3 focus:outline-none focus:border-[#F2BCC2] transition-colors", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGetReading, disabled: loading, className: "w-full bg-[#F2BCC2] text-[#1D1F33] py-3 rounded-lg font-semibold hover:bg-[#B97A57] hover:text-[#D6D7E0] transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 110, columnNumber: 23 }, __self: this }), "Loading Your Reading...") : /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 114, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star mr-2", __source: { fileName: "", lineNumber: 115, columnNumber: 23 }, __self: this }), "Get My Daily Reading"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg text-red-300 text-sm", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle mr-2", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }), error))), !showDemo && dailyReading && /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: resetDemo, className: "bg-[#4A4E69] text-[#D6D7E0] px-4 py-2 rounded-lg hover:bg-[#B97A57] transition-colors", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }), "Try Another User")), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-[#2A2D4A]/50 to-[#4A4E69]/30 backdrop-blur-lg rounded-xl p-8 mb-8", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-moon text-3xl text-[#F2BCC2] mr-3", __source: { fileName: "", lineNumber: 147, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }, formatDate(dailyReading.date))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#D6D7E0]/90", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, "Your Personalized Cosmic Guidance")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1D1F33]/30 rounded-lg p-6", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-[#F2BCC2] mb-4 flex items-center", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sparkles mr-2", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }), "Today's Personal Reading"), /*#__PURE__*/ React.createElement("div", { className: "text-[#D6D7E0]/90 leading-relaxed whitespace-pre-line", __source: { fileName: "", lineNumber: 163, columnNumber: 19 }, __self: this }, dailyReading.reading)), /*#__PURE__*/ React.createElement("div", { className: "text-center pt-6", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#D6D7E0]/60 text-sm", __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, "✨ Your reading is personalized based on your unique astrological profile ✨"), dailyReading.cached && /*#__PURE__*/ React.createElement("p", { className: "text-[#F2BCC2]/70 text-xs mt-2", __source: { fileName: "", lineNumber: 174, columnNumber: 21 }, __self: this }, "This reading was generated earlier today"))))), loading && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-[#1D1F33]/80 backdrop-blur-sm flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2A2D4A] rounded-xl p-8 text-center", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin w-12 h-12 border-4 border-[#F2BCC2] border-t-transparent rounded-full mx-auto mb-4", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#F2BCC2] font-semibold", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, "Consulting the stars..."), /*#__PURE__*/ React.createElement("p", { className: "text-[#D6D7E0]/70 text-sm mt-2", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, "Generating your personalized reading")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } `)); }