function SubscriptionModal({ isOpen, onClose, userType = "guest", onSignUp, onUpgrade, onSignIn }) { if (!isOpen) return null; const isGuest = userType === "guest"; const isFree = userType === "free"; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md rounded-xl bg-gradient-to-b from-indigo-900 to-purple-900 p-6 text-white shadow-2xl", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, isGuest ? "Unlock More Fortunes!" : "Daily Limit Reached"), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "text-white hover:text-gray-300 text-xl", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, isGuest ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, "🔮"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, "Sign up for free to get 3 fortunes per day!")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "Track your fortune streak")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "🌟"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Save and share your readings"))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "🔮"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "You've reached your daily free limit!")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "⭐"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Upgrade to Premium for unlimited fortunes")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "🌙"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "Access exclusive premium readings")))), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, isGuest ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: onSignUp, className: "w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 rounded-lg font-medium transition-all", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Sign Up Free"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-purple-300", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "Already have an account?", " ", /*#__PURE__*/ React.createElement("button", { onClick: onSignIn, className: "text-white underline hover:text-purple-200", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, "Sign In")))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: onUpgrade, className: "w-full py-3 bg-gradient-to-r from-yellow-500 to-amber-500 hover:from-yellow-400 hover:to-amber-400 text-black rounded-lg font-medium transition-all", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Upgrade to Premium"), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "w-full py-3 bg-transparent border border-purple-400 hover:bg-purple-800 rounded-lg font-medium transition-all", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Maybe Later"))))); } function SubscriptionModalStory() { const [isGuestModalOpen, setIsGuestModalOpen] = useState(false); const [isFreeModalOpen, setIsFreeModalOpen] = useState(false); const handleSignUp = ()=>{ console.log("Sign up clicked"); setIsGuestModalOpen(false); }; const handleSignIn = ()=>{ console.log("Sign in clicked"); setIsGuestModalOpen(false); }; const handleUpgrade = ()=>{ console.log("Upgrade clicked"); setIsFreeModalOpen(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-indigo-100 to-purple-100 p-8", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-xl shadow-md p-6 space-y-6", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-indigo-900", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "Subscription Modal Demo"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsGuestModalOpen(true), className: "w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-all", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "Show Guest Limit Modal"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsFreeModalOpen(true), className: "w-full py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium transition-all", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, "Show Free User Limit Modal")), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "Click the buttons above to preview the different modal states."))), /*#__PURE__*/ React.createElement(SubscriptionModal, { isOpen: isGuestModalOpen, onClose: ()=>setIsGuestModalOpen(false), userType: "guest", onSignUp: handleSignUp, onSignIn: handleSignIn, __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SubscriptionModal, { isOpen: isFreeModalOpen, onClose: ()=>setIsFreeModalOpen(false), userType: "free", onUpgrade: handleUpgrade, __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this })); } function Header1({ user, onSignIn, onSignUp, onLogout }) { const isPremium = user?.subscription?.account_tier === "Premium"; return /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-indigo-900 to-purple-800 text-white shadow-md", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-3 flex items-center justify-between", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-xl md:text-2xl font-bold flex items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2 text-2xl", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "🔮"), /*#__PURE__*/ React.createElement("span", { className: "hidden sm:inline", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Emoji Fortune Teller"), /*#__PURE__*/ React.createElement("span", { className: "sm:hidden", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "EFT"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 md:space-x-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, user ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "hidden sm:flex items-center mr-2", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm md:text-base", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, "Hello, ", user.email?.split('@')[0] || 'User'), isPremium && /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-2 py-1 bg-yellow-500 text-black text-xs font-bold rounded-full", __source: { fileName: "", lineNumber: 21, columnNumber: 19 }, __self: this }, "PREMIUM")), /*#__PURE__*/ React.createElement("button", { onClick: onLogout, className: "px-3 py-1.5 text-sm md:text-base bg-purple-700 hover:bg-purple-600 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Logout")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", onClick: onSignIn, className: "px-3 py-1.5 text-sm md:text-base bg-transparent hover:bg-purple-700 border border-purple-400 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", onClick: onSignUp, className: "px-3 py-1.5 text-sm md:text-base bg-purple-600 hover:bg-purple-500 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Sign Up"))))); } function Header1Story() { const [user, setUser] = useState(null); const handleSignIn = ()=>{ console.log("Sign in clicked"); }; const handleSignUp = ()=>{ console.log("Sign up clicked"); }; const handleLogout = ()=>{ setUser(null); console.log("Logout clicked"); }; const setGuestUser = ()=>{ setUser(null); }; const setRegularUser = ()=>{ setUser({ id: "user123", email: "user@example.com", subscription: { account_tier: "Free" } }); }; const setPremiumUser = ()=>{ setUser({ id: "premium456", email: "premium@example.com", subscription: { account_tier: "Premium" } }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 pt-16", __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header1, { user: user, onSignIn: handleSignIn, onSignUp: handleSignUp, onLogout: handleLogout, __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 mt-8", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "Header Component Demo"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-8", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: setGuestUser, className: "px-4 py-2 bg-gray-200 rounded hover:bg-gray-300", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "Show Guest View"), /*#__PURE__*/ React.createElement("button", { onClick: setRegularUser, className: "px-4 py-2 bg-blue-200 rounded hover:bg-blue-300", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "Show Regular User"), /*#__PURE__*/ React.createElement("button", { onClick: setPremiumUser, className: "px-4 py-2 bg-yellow-200 rounded hover:bg-yellow-300", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, "Show Premium User")), /*#__PURE__*/ React.createElement("div", { className: "p-4 border rounded bg-white", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "Current user state:"), /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-100 p-2 rounded overflow-auto", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, JSON.stringify(user, null, 2) || "Not logged in (guest)")))); } function MainComponent() { // ... existing state variables const [emojis, setEmojis] = useState([]); const [fortune, setFortune] = useState(""); const [fortuneTitle, setFortuneTitle] = useState(""); const [isShaking, setIsShaking] = useState(false); const [isGenerating, setIsGenerating] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const [selectedVibe, setSelectedVibe] = useState("random"); const [language, setLanguage] = useState("en"); const [showLanguageDropdown, setShowLanguageDropdown] = useState(false); const fortuneCardRef = useRef(null); const [upload, { loading: uploadLoading }] = useUpload(); const { data: user, loading: userLoading } = useUser(); const [showUpgradeModal, setShowUpgradeModal] = useState(false); const [showLoginModal, setShowLoginModal] = useState(false); const [usageData, setUsageData] = useState(null); const [usageLoading, setUsageLoading] = useState(false); const [firstFortuneUsed, setFirstFortuneUsed] = useState(false); const [firstFortuneDate, setFirstFortuneDate] = useState(null); const [selectedPlan, setSelectedPlan] = useState("monthly"); const [remainingTries, setRemainingTries] = useState(0); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [prices, setPrices] = useState({ monthly: { amount: 399, id: "price_premium_monthly", productId: "prod_SEe9SIvfXwyrAJ" }, yearly: { amount: 2999, id: "price_premium_yearly", productId: "prod_SEe9SIvfXwyrAJ" } }); const languages = { en: { name: "English", nativeName: "English" }, es: { name: "Spanish", nativeName: "Español" }, fr: { name: "French", nativeName: "Français" }, de: { name: "German", nativeName: "Deutsch" }, it: { name: "Italian", nativeName: "Italiano" }, ja: { name: "Japanese", nativeName: "日本語" }, zh: { name: "Chinese", nativeName: "中文" } }; const translations = { en: { title: "Emoji Fortune Teller", awaits: "Your fortune awaits...", reading: "Reading the cosmic signs...", divining: "Divining...", shake: "Shake Me!", save: "Save as Image", tapOrShake: "Tap the button or shake your device for a new fortune!", adSupport: "Support Emoji Fortune Teller by viewing ads", advertisement: "Advertisement", error: "The crystal ball is foggy. Try again later!", signIn: "Sign In", login: "Login", signUp: "Sign Up", account: "Account", logout: "Logout" }, es: { title: "Adivino de Emojis", awaits: "Tu fortuna te espera...", reading: "Leyendo los signos cosmicos...", divining: "Adivinando...", shake: "¡Agítame!", save: "Guardar como Imagen", tapOrShake: "¡Toca el botón o agita tu dispositivo para una nueva fortuna!", adSupport: "Apoya al Adivino de Emojis viendo anuncios", advertisement: "Anuncio", error: "La bola de cristal está nebulosa. ¡Inténtalo más tarde!", signIn: "Iniciar Sesión", login: "Iniciar Sesión", signUp: "Registrarse", account: "Cuenta", logout: "Cerrar Sesión" }, fr: { title: "Diseur de Bonne Aventure Emoji", awaits: "Votre fortune vous attend...", reading: "Lecture des signes cosmiques...", divining: "Divination...", shake: "Secouez-moi !", save: "Enregistrer comme Image", tapOrShake: "Appuyez sur le bouton ou secouez votre appareil pour une nouvelle prédiction !", adSupport: "Soutenez le Diseur de Bonne Aventure Emoji en regardant des annonces", advertisement: "Publicité", error: "La boule de cristal est brumeuse. Réessayez plus tard !", signIn: "Se Connecter", login: "Connexion", signUp: "S'inscrire", account: "Compte", logout: "Déconnexion" }, de: { title: "Emoji-Wahrsager", awaits: "Dein Schicksal wartet...", reading: "Lese die kosmischen Zeichen...", divining: "Wahrsagen...", shake: "Schüttle mich!", save: "Als Bild speichern", tapOrShake: "Tippe auf den Knopf oder schüttle dein Gerät für eine neue Vorhersage!", adSupport: "Unterstütze den Emoji-Wahrsager durch Anzeigen", advertisement: "Werbung", error: "Die Kristallkugel ist neblig. Versuche es später noch einmal!", signIn: "Anmelden", login: "Anmelden", signUp: "Registrieren", account: "Konto", logout: "Abmelden" }, it: { title: "Indovino di Emoji", awaits: "La tua fortuna ti aspetta...", reading: "Leggendo i segni cosmici...", divining: "Divinazione...", shake: "Scuotimi!", save: "Salva come Immagine", tapOrShake: "Tocca il pulsante o scuoti il tuo dispositivo per una nuova fortuna!", adSupport: "Sostieni l'Indovino di Emoji guardando gli annunci", advertisement: "Pubblicità", error: "La sfera di cristallo è nebbiosa. Riprova più tardi!", signIn: "Accedi", login: "Accedi", signUp: "Registrati", account: "Account", logout: "Esci" }, ja: { title: "絵文字占い師", awaits: "あなたの運命が待っています...", reading: "宇宙の兆しを読んでいます...", divining: "占い中...", shake: "振ってください！", save: "画像として保存", tapOrShake: "ボタンをタップするか、デバイスを振って新しい運勢を占ってください！", adSupport: "広告を見て絵文字占い師をサポートする", advertisement: "広告", error: "水晶玉が曇っています。後でもう一度お試しください！", signIn: "ログイン", login: "ログイン", signUp: "登録", account: "アカウント", logout: "ログアウト" }, zh: { title: "表情符号算命师", awaits: "你的命运在等待...", reading: "正在解读宇宙信号...", divining: "占卜中...", shake: "摇一摇！", save: "保存为图片", tapOrShake: "点击按钮或摇动设备获取新的命运！", adSupport: "通过查看广告支持表情符号算命师", advertisement: "广告", error: "水晶球模糊不清。请稍后再试！", signIn: "登录", login: "登录", signUp: "注册", account: "账户", logout: "登出" } }; const t = translations[language] || translations.en; const vibeOptions = [ { id: "random", icon: "🔮", label: "Random", color: "bg-purple-600" }, { id: "love", icon: "❤️", label: "Love", color: "bg-red-500" }, { id: "money", icon: "💰", label: "Money", color: "bg-yellow-500" }, { id: "career", icon: "💼", label: "Career", color: "bg-blue-500" }, { id: "mystery", icon: "🌙", label: "Mystery", color: "bg-indigo-800" } ]; const foodEmojis = [ "🍕", "🍔", "🍟", "🌭", "🍿", "🥓", "🥞", "🍩", "🍦", "🍺", "🍷", "🍣", "🥗", "🍪", "🍒", "🍌", "🥑" ]; const animalEmojis = [ "🐶", "🐱", "🐭", "🦊", "🐻", "🐼", "🐨", "🦁", "🐯", "🐮", "🐷", "🐸", "🐙", "🦄", "🦋", "🐝", "🐬" ]; const techEmojis = [ "📱", "💻", "⌚", "🖥️", "🎮", "🎧", "📷", "🚀", "🛰️", "🔋", "💾", "📡", "🤖", "👾", "📺" ]; const rareEmojis = [ "🛸", "🎃", "👽", "🧙‍♀️", "🧿", "🔮", "👑", "💎", "🧸", "🧩", "🧠", "👁️", "🌈", "⚡", "🌪️", "🏆" ]; const emotionEmojis = [ "😂", "😍", "🥰", "😎", "🤔", "😱", "🤯", "😴", "🥺", "😇", "🤑", "🤪", "😤", "��", "🤢" ]; const loveEmojis = [ "❤️", "💕", "💘", "💖", "💗", "💓", "💞", "💝", "💌", "👩‍❤️‍👨", "👩‍❤️‍👩", "👨‍❤️‍👨", "💑", "👪", "🏩" ]; const moneyEmojis = [ "💰", "💵", "💸", "🤑", "💎", "💍", "🏆", "🏦", "📈", "💹", "🧾", "💼", "🛍️", "🏧", "💱" ]; const careerEmojis = [ "💼", "👔", "🏢", "📊", "📝", "📈", "🖥️", "🔬", "🎓", "🎯", "🏆", "📱", "⏰", "✅", "📚" ]; const mysteryEmojis = [ "🔮", "🌙", "✨", "🌌", "👁️", "🧿", "🧙‍♀️", "🧙‍♂️", "🧠", "👽", "🛸", "🌠", "🌑", "🔍", "🧩" ]; useEffect(()=>{ if (typeof window !== "undefined") { const savedLanguage = localStorage.getItem("fortuneLanguage"); if (savedLanguage && languages[savedLanguage]) { setLanguage(savedLanguage); } } }, []); useEffect(()=>{ let shakeThreshold = 15; let lastX = 0, lastY = 0, lastZ = 0; let lastUpdate = 0; const handleMotion = (event)=>{ const current = Date.now(); if (current - lastUpdate > 100) { const acceleration = event.accelerationIncludingGravity; if (!acceleration) return; const deltaX = Math.abs(acceleration.x - lastX); const deltaY = Math.abs(acceleration.y - lastY); const deltaZ = Math.abs(acceleration.z - lastZ); if (deltaX > shakeThreshold && deltaY > shakeThreshold || deltaX > shakeThreshold && deltaZ > shakeThreshold || deltaY > shakeThreshold && deltaZ > shakeThreshold) { generateEmojis(); } lastX = acceleration.x; lastY = acceleration.y; lastZ = acceleration.z; lastUpdate = current; } }; if (typeof window !== "undefined" && "DeviceMotionEvent" in window) { window.addEventListener("devicemotion", handleMotion); } return ()=>{ if (typeof window !== "undefined" && "DeviceMotionEvent" in window) { window.removeEventListener("devicemotion", handleMotion); } }; }, []); const changeLanguage = (lang)=>{ setLanguage(lang); setShowLanguageDropdown(false); if (typeof window !== "undefined") { localStorage.setItem("fortuneLanguage", lang); } }; const generateEmojis = ()=>{ if (isGenerating) return; setIsShaking(true); setFortune(""); setFortuneTitle(""); setStreamingMessage(""); if (typeof navigator !== "undefined" && "vibrate" in navigator) { navigator.vibrate(200); } setTimeout(()=>{ const count = Math.floor(Math.random() * 3) + 3; let primaryEmojis = []; let secondaryEmojis = []; switch(selectedVibe){ case "love": primaryEmojis = loveEmojis; secondaryEmojis = [ ...emotionEmojis, ...animalEmojis ]; break; case "money": primaryEmojis = moneyEmojis; secondaryEmojis = [ ...techEmojis, ...foodEmojis ]; break; case "career": primaryEmojis = careerEmojis; secondaryEmojis = [ ...techEmojis, ...emotionEmojis ]; break; case "mystery": primaryEmojis = mysteryEmojis; secondaryEmojis = [ ...rareEmojis, ...emotionEmojis ]; break; default: primaryEmojis = rareEmojis; secondaryEmojis = [ ...foodEmojis, ...animalEmojis, ...techEmojis, ...emotionEmojis ]; break; } const selectedEmojis = []; selectedEmojis.push(primaryEmojis[Math.floor(Math.random() * primaryEmojis.length)]); for(let i = 0; i < count - 1; i++){ selectedEmojis.push(secondaryEmojis[Math.floor(Math.random() * secondaryEmojis.length)]); } const shuffled = [ ...selectedEmojis ].sort(()=>0.5 - Math.random()); setEmojis(shuffled); setIsShaking(false); generateFortune(shuffled); }, 1000); }; const generateFortune = async (emojiList)=>{ if (emojiList.length === 0) return; setIsGenerating(true); setStreamingMessage(t.reading); try { const vibeContext = selectedVibe !== "random" ? `with a focus on ${selectedVibe}` : ""; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are a mystical fortune teller who creates personalized, insightful predictions based on emoji combinations ${vibeContext}. Create a mystical fortune with: - A catchy title (3-5 words) that feels mystical like "The Rising Sun Path" or "Whispers of Destiny" - A fortune prediction (20-30 words) that directly addresses the user with "you" and "your" and gives specific, personal advice or insights about their future. Make it feel like it's specifically for them, not just a generic reading of emojis. Format your response exactly like this, with no other text: TITLE: [your title here] FORTUNE: [your fortune here] Respond in ${languages[language].name}.` }, { role: "user", content: `Create a personalized mystical fortune ${vibeContext} based on these emojis: ${emojiList.join("")}. Make it feel like it's specifically for me, addressing my future directly.` } ], stream: false }) }); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const data = await response.json(); console.log("ChatGPT response:", data); if (data && data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) { const content = data.choices[0].message.content.trim(); const titleMatch = content.match(/TITLE:\s*(.+?)(?:\n|$)/i); const fortuneMatch = content.match(/FORTUNE:\s*(.+?)(?:\n|$)/i); if (titleMatch && fortuneMatch) { setFortuneTitle(titleMatch[1].trim()); setFortune(fortuneMatch[1].trim()); } else { setFortuneTitle("Mystical Revelation"); setFortune(content.substring(0, 100).trim()); } } else { throw new Error("Unexpected response format from ChatGPT API"); } } catch (error) { console.error("Error generating fortune:", error); setFortuneTitle(""); setFortune(t.error); } finally{ setStreamingMessage(""); setIsGenerating(false); } }; const saveAsImage = async ()=>{ if (!fortuneCardRef.current) return; try { if (typeof window !== "undefined" && !window.html2canvas) { const script = document.createElement("script"); script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js"; script.async = true; await new Promise((resolve, reject)=>{ script.onload = resolve; script.onerror = reject; document.head.appendChild(script); }); } const html2canvas = window.html2canvas; fortuneCardRef.current.classList.add("capturing-image"); const canvas = await html2canvas(fortuneCardRef.current, { backgroundColor: null, scale: 2, logging: false, useCORS: true }); fortuneCardRef.current.classList.remove("capturing-image"); const dataUrl = canvas.toDataURL("image/png"); const { url, error } = await upload({ base64: dataUrl }); if (error) { console.error("Error uploading image:", error); return; } if (typeof window !== "undefined") { const link = document.createElement("a"); link.href = url; link.download = `fortune-${new Date().getTime()}.png`; document.body.appendChild(link); link.click(); if (document.body.contains(link)) { document.body.removeChild(link); } } } catch (error) { console.error("Error saving image:", error); alert("Sorry, there was a problem saving your fortune as an image. Please try again."); } }; const addScriptToHead = (src, crossOrigin = null)=>{ if (typeof window === "undefined") return null; const existingScript = document.querySelector(`script[src="${src}"]`); if (existingScript) return existingScript; const script = document.createElement("script"); script.async = true; script.src = src; if (crossOrigin) script.crossOrigin = crossOrigin; document.head.appendChild(script); return script; }; const addMetaToHead = (name, content)=>{ if (typeof window === "undefined") return null; const existingMeta = document.querySelector(`meta[name="${name}"]`); if (existingMeta) return existingMeta; const meta = document.createElement("meta"); meta.name = name; meta.content = content; document.head.appendChild(meta); return meta; }; const addStyleToHead = (id, cssText)=>{ if (typeof window === "undefined") return null; const existingStyle = document.getElementById(id); if (existingStyle) return existingStyle; const style = document.createElement("style"); style.id = id; style.innerHTML = cssText; document.head.appendChild(style); return style; }; useEffect(()=>{ const script = addScriptToHead("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1032033448951830", "anonymous"); return ()=>{ if (script && document.head.contains(script)) { document.head.removeChild(script); } }; }, []); useEffect(()=>{ const meta = addMetaToHead("google-adsense-account", "ca-pub-1032033448951830"); return ()=>{ if (meta && document.head.contains(meta)) { document.head.removeChild(meta); } }; }, []); useEffect(()=>{ const style = addStyleToHead("fortune-capture-style", ` .capturing-image { background-color: rgba(76, 29, 149, 0.8) !important; border-color: #a855f7 !important; box-shadow: 0 0 20px rgba(168, 85, 247, 0.5) !important; } `); return ()=>{ if (style && document.head.contains(style)) { document.head.removeChild(style); } }; }, []); useEffect(()=>{ if (typeof window !== "undefined") { const firstFortuneStatus = localStorage.getItem("firstFortuneUsed"); const savedFortuneDate = localStorage.getItem("firstFortuneDate"); if (firstFortuneStatus === "true") { // Check if it's a new day if (savedFortuneDate) { const lastDate = new Date(savedFortuneDate); const today = new Date(); // If it's a new day, reset the first fortune usage if (lastDate.toDateString() !== today.toDateString()) { setFirstFortuneUsed(false); setFirstFortuneDate(null); localStorage.removeItem("firstFortuneUsed"); localStorage.removeItem("firstFortuneDate"); } else { setFirstFortuneUsed(true); setFirstFortuneDate(savedFortuneDate); } } else { setFirstFortuneUsed(true); // If we have no date saved but have used the fortune, set today's date const today = new Date().toISOString(); setFirstFortuneDate(today); localStorage.setItem("firstFortuneDate", today); } } } }, []); const fetchPrices = async ()=>{ try { const response = await fetch("/api/stripe-subscription", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "get-prices" }) }); if (!response.ok) { throw new Error("Failed to fetch prices"); } const data = await response.json(); if (data.prices) { setPrices(data.prices); } } catch (error) { console.error("Error fetching prices:", error); } }; const fetchUsageData = async ()=>{ try { setUsageLoading(true); const response = await fetch("/api/user-subscription", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "get", userId: user?.id }) }); if (!response.ok) { throw new Error("Failed to fetch usage data"); } const data = await response.json(); setUsageData(data.subscription); } catch (error) { console.error("Error fetching usage data:", error); } finally{ setUsageLoading(false); } }; const checkUsageLimit = async ()=>{ try { const response = await fetch("/api/user-subscription", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "check", userId: user?.id }) }); if (!response.ok) { throw new Error("Failed to check usage limit"); } const data = await response.json(); return data; } catch (error) { console.error("Error checking usage limit:", error); return { canUse: false, remaining: 0 }; } }; const incrementUsage = async ()=>{ if (!user) return; try { const response = await fetch("/api/user-subscription", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "increment", userId: user.id }) }); if (!response.ok) { throw new Error("Failed to increment usage"); } const data = await response.json(); setUsageData(data.subscription); return data.subscription; } catch (error) { console.error("Error incrementing usage:", error); } }; const handleFortuneGeneration = async ()=>{ // For non-logged in users if (!user) { if (!firstFortuneUsed) { setFirstFortuneUsed(true); const today = new Date().toISOString(); setFirstFortuneDate(today); if (typeof window !== "undefined") { localStorage.setItem("firstFortuneUsed", "true"); localStorage.setItem("firstFortuneDate", today); } generateEmojis(); } else { setShowLoginModal(true); } return; } // For logged in users const usageCheck = await checkUsageLimit(); setRemainingTries(usageCheck.remaining); if (usageCheck.canUse) { generateEmojis(); const updatedSubscription = await incrementUsage(); if (updatedSubscription) { setRemainingTries(Math.max(0, updatedSubscription.daily_limit - updatedSubscription.daily_usage_count)); } } else { setShowUpgradeModal(true); } }; const handleSignUp = ()=>{ window.location.href = "/account/signup"; }; const handleSignIn = ()=>{ window.location.href = "/account/signin"; }; const handleUpgrade = async ()=>{ try { setLoading(true); setError(""); if (!user) { setShowLoginModal(true); setLoading(false); return; } const priceId = selectedPlan === "yearly" ? prices.yearly.id : prices.monthly.id; // Show loading feedback to the user setStreamingMessage("Processing your subscription request..."); console.log("Starting subscription checkout process..."); const response = await fetch("/api/stripe-subscription", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "create-checkout", userId: user.id, priceId: priceId, subscriptionType: selectedPlan, successUrl: `${window.location.origin}/subscription?success=true`, cancelUrl: `${window.location.origin}/subscription?canceled=true` }) }); const data = await response.json(); console.log("Checkout response:", data); if (!response.ok || data.error) { throw new Error(data.error || `Error: ${response.status} ${response.statusText}`); } if (data.url) { // If this is a mock implementation that already processed the subscription, // refresh the usage data before redirecting if (data.mockImplementation) { await fetchUsageData(); } // Redirect to the checkout URL or success page console.log("Redirecting to:", data.url); window.location.href = data.url; } else { throw new Error("No checkout URL returned from server"); } } catch (error) { console.error("Error creating checkout:", error); setError(error.message || "Failed to start checkout process. Please try again."); setStreamingMessage(""); // Show error in a more visible way alert(`Subscription Error: ${error.message || "Failed to process your subscription. Please try again."}`); } finally{ setLoading(false); } }; useEffect(()=>{ if (user) { fetchUsageData(); fetchPrices(); } }, [ user ]); const formatPrice = (amount, interval)=>{ const dollars = Math.floor(amount / 100); const cents = amount % 100; return `${dollars}${cents ? `.${cents.toString().padStart(2, "0")}` : ""}/${interval}`; }; // Modify the useEffect that handles user state changes useEffect(()=>{ // If user data is null but we have usageData, clear it if (!user) { setUsageData(null); setFirstFortuneUsed(false); setFirstFortuneDate(null); // Force clear any lingering auth state in localStorage if (typeof window !== "undefined") { // Keep language preference but clear user-specific data const language = localStorage.getItem("fortuneLanguage"); const firstFortuneStatus = localStorage.getItem("firstFortuneUsed"); const firstFortuneDate = localStorage.getItem("firstFortuneDate"); // Clear potential auth-related items localStorage.removeItem("next-auth.session-token"); localStorage.removeItem("next-auth.callback-url"); localStorage.removeItem("next-auth.csrf-token"); // Restore non-auth preferences if (language) { localStorage.setItem("fortuneLanguage", language); } if (firstFortuneStatus) { localStorage.setItem("firstFortuneUsed", firstFortuneStatus); } if (firstFortuneDate) { localStorage.setItem("firstFortuneDate", firstFortuneDate); } } } }, [ user ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-purple-900 to-black text-white p-4", __source: { fileName: "", lineNumber: 971, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-purple-900 to-indigo-900 text-white shadow-lg backdrop-blur-sm bg-opacity-80", __source: { fileName: "", lineNumber: 972, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-3 flex items-center justify-between", __source: { fileName: "", lineNumber: 973, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 974, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-xl md:text-2xl font-bold flex items-center", __source: { fileName: "", lineNumber: 975, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2 text-2xl", __source: { fileName: "", lineNumber: 979, columnNumber: 15 }, __self: this }, "🔮"), /*#__PURE__*/ React.createElement("span", { className: "hidden sm:inline", __source: { fileName: "", lineNumber: 980, columnNumber: 15 }, __self: this }, "Emoji Fortune Teller"), /*#__PURE__*/ React.createElement("span", { className: "sm:hidden", __source: { fileName: "", lineNumber: 981, columnNumber: 15 }, __self: this }, "EFT"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 md:space-x-4", __source: { fileName: "", lineNumber: 985, columnNumber: 11 }, __self: this }, userLoading ? /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-purple-700 animate-pulse", __source: { fileName: "", lineNumber: 987, columnNumber: 15 }, __self: this }) : user ? /*#__PURE__*/ React.createElement(React.Fragment, null, !usageLoading && usageData && /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center mr-3", __source: { fileName: "", lineNumber: 991, columnNumber: 19 }, __self: this }, usageData.account_tier === "Premium" ? /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-gradient-to-r from-yellow-400 to-amber-500 text-black text-sm font-bold rounded-full", __source: { fileName: "", lineNumber: 993, columnNumber: 23 }, __self: this }, "UNLIMITED") : /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-purple-700 text-white text-sm rounded-full", __source: { fileName: "", lineNumber: 997, columnNumber: 23 }, __self: this }, Math.max(0, usageData.daily_limit - usageData.daily_usage_count), " ", "fortunes left")), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "px-3 py-1.5 text-sm md:text-base bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 rounded-lg transition-colors shadow-md", __source: { fileName: "", lineNumber: 1007, columnNumber: 17 }, __self: this }, t.logout)) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "px-3 py-1.5 text-sm md:text-base bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 rounded-lg transition-colors shadow-md", __source: { fileName: "", lineNumber: 1016, columnNumber: 17 }, __self: this }, t.login), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "px-3 py-1.5 text-sm md:text-base border border-purple-400 hover:bg-purple-800 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 1022, columnNumber: 17 }, __self: this }, t.signUp))))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md flex flex-col items-center mt-20", __source: { fileName: "", lineNumber: 1034, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 1035, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-center flex-grow", __source: { fileName: "", lineNumber: 1036, columnNumber: 11 }, __self: this }, t.title), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1039, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLanguageDropdown(!showLanguageDropdown), className: "bg-purple-800 hover:bg-purple-700 rounded-full p-2 transition-all", __source: { fileName: "", lineNumber: 1040, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 1044, columnNumber: 15 }, __self: this }, "🌐")), showLanguageDropdown && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-purple-800 rounded-lg shadow-xl z-10", __source: { fileName: "", lineNumber: 1047, columnNumber: 15 }, __self: this }, Object.entries(languages).map(([code, { nativeName }])=>/*#__PURE__*/ React.createElement("button", { key: code, onClick: ()=>changeLanguage(code), className: `block w-full text-left px-4 py-2 hover:bg-purple-700 rounded-lg ${language === code ? "bg-purple-600" : ""}`, __source: { fileName: "", lineNumber: 1049, columnNumber: 19 }, __self: this }, nativeName))))), /*#__PURE__*/ React.createElement("div", { className: "w-full mb-6", __source: { fileName: "", lineNumber: 1064, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between space-x-2", __source: { fileName: "", lineNumber: 1065, columnNumber: 11 }, __self: this }, vibeOptions.map((vibe)=>/*#__PURE__*/ React.createElement("button", { key: vibe.id, onClick: ()=>setSelectedVibe(vibe.id), className: `flex-1 p-2 rounded-lg transition-all transform hover:scale-105 flex flex-col items-center ${selectedVibe === vibe.id ? `${vibe.color} ring-2 ring-white` : "bg-purple-800 bg-opacity-50"}`, __source: { fileName: "", lineNumber: 1067, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl block mb-1", __source: { fileName: "", lineNumber: 1076, columnNumber: 17 }, __self: this }, vibe.icon), /*#__PURE__*/ React.createElement("span", { className: "text-xs capitalize", __source: { fileName: "", lineNumber: 1077, columnNumber: 17 }, __self: this }, vibe.label))))), /*#__PURE__*/ React.createElement("div", { ref: fortuneCardRef, className: `w-full flex flex-col items-center justify-center mb-8 rounded-xl bg-purple-800 bg-opacity-30 border-2 border-purple-500 transition-all duration-300 p-6 ${isShaking ? "animate-shake" : ""}`, __source: { fileName: "", lineNumber: 1083, columnNumber: 9 }, __self: this }, emojis.length > 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 1091, columnNumber: 15 }, __self: this }, emojis.map((emoji, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "text-5xl md:text-7xl animate-float", style: { animationDelay: `${index * 0.2}s` }, __source: { fileName: "", lineNumber: 1093, columnNumber: 19 }, __self: this }, emoji))), fortuneTitle && /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-center mb-2 text-yellow-300", __source: { fileName: "", lineNumber: 1103, columnNumber: 17 }, __self: this }, fortuneTitle), fortune && /*#__PURE__*/ React.createElement("div", { className: "text-xl font-medium text-yellow-300 animate-fadeIn text-center", __source: { fileName: "", lineNumber: 1108, columnNumber: 17 }, __self: this }, '"', fortune, '"')) : /*#__PURE__*/ React.createElement("div", { className: "py-12", __source: { fileName: "", lineNumber: 1114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-purple-300", __source: { fileName: "", lineNumber: 1115, columnNumber: 15 }, __self: this }, t.awaits))), isGenerating && /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-[80px] mb-8 text-center", __source: { fileName: "", lineNumber: 1121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl text-purple-300", __source: { fileName: "", lineNumber: 1122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 1123, columnNumber: 15 }, __self: this }, t.reading), /*#__PURE__*/ React.createElement("p", { className: "italic", __source: { fileName: "", lineNumber: 1124, columnNumber: 15 }, __self: this }, streamingMessage))), user && usageData && usageData.account_tier === "Premium" ? /*#__PURE__*/ React.createElement("button", { onClick: handleFortuneGeneration, disabled: isGenerating, className: `w-full py-4 px-6 text-xl font-bold rounded-full mb-6 transition-all duration-300 ${isGenerating ? "bg-gray-600 cursor-not-allowed" : "bg-gradient-to-r from-yellow-400 to-amber-500 text-black hover:from-yellow-300 hover:to-amber-400 animate-pulse"}`, __source: { fileName: "", lineNumber: 1130, columnNumber: 11 }, __self: this }, isGenerating ? t.divining : t.shake) : /*#__PURE__*/ React.createElement("button", { onClick: handleFortuneGeneration, disabled: isGenerating, className: `w-full py-4 px-6 text-xl font-bold rounded-full mb-6 transition-all duration-300 ${isGenerating ? "bg-gray-600 cursor-not-allowed" : "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 animate-pulse"}`, __source: { fileName: "", lineNumber: 1142, columnNumber: 11 }, __self: this }, isGenerating ? t.divining : t.shake), user && !usageLoading && usageData && usageData.account_tier !== "Premium" && /*#__PURE__*/ React.createElement("div", { className: "w-full mb-6", __source: { fileName: "", lineNumber: 1159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleUpgrade, className: "w-full py-3 px-6 text-lg font-bold rounded-full bg-gradient-to-r from-yellow-500 to-amber-500 hover:from-yellow-400 hover:to-amber-400 text-black transition-all duration-300 mb-2", __source: { fileName: "", lineNumber: 1160, columnNumber: 15 }, __self: this }, "Upgrade to Premium - $3.99/month"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-center text-purple-300", __source: { fileName: "", lineNumber: 1166, columnNumber: 15 }, __self: this }, "Or save 37% with our", " ", /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedPlan("yearly"); handleUpgrade(); }, className: "underline text-yellow-300", __source: { fileName: "", lineNumber: 1168, columnNumber: 17 }, __self: this }, "yearly plan"), " ", "at $29.99/year")), fortune && !isGenerating && /*#__PURE__*/ React.createElement("button", { onClick: saveAsImage, disabled: uploadLoading, className: "w-full py-3 px-6 text-lg font-bold rounded-full bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-500 hover:to-teal-500 transition-all duration-300 mb-6", __source: { fileName: "", lineNumber: 1183, columnNumber: 11 }, __self: this }, uploadLoading ? "Saving..." : t.save)), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-sm text-purple-400", __source: { fileName: "", lineNumber: 1193, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1194, columnNumber: 9 }, __self: this }, t.tapOrShake)), showLoginModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 backdrop-blur-sm p-4", __source: { fileName: "", lineNumber: 1199, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md rounded-xl bg-gradient-to-b from-purple-900 to-indigo-900 p-6 text-white shadow-2xl border border-purple-500", __source: { fileName: "", lineNumber: 1200, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 1201, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 1202, columnNumber: 15 }, __self: this }, "Unlock More Fortunes!"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLoginModal(false), className: "text-white hover:text-gray-300 text-xl", __source: { fileName: "", lineNumber: 1203, columnNumber: 15 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 1211, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 1212, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 1213, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 1214, columnNumber: 19 }, __self: this }, "🔮"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1215, columnNumber: 19 }, __self: this }, "Sign up for free to get", " ", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-yellow-300", __source: { fileName: "", lineNumber: 1217, columnNumber: 21 }, __self: this }, "3 fortunes per day"), "!")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 1223, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 1224, columnNumber: 19 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1225, columnNumber: 19 }, __self: this }, "Track your fortune streak")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 1227, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 1228, columnNumber: 19 }, __self: this }, "🌟"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1229, columnNumber: 19 }, __self: this }, "Save and share your readings")))), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 1234, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSignUp, className: "w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 rounded-lg font-medium transition-all animate-pulse", __source: { fileName: "", lineNumber: 1235, columnNumber: 15 }, __self: this }, "Sign Up Free"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 1241, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-purple-300", __source: { fileName: "", lineNumber: 1242, columnNumber: 17 }, __self: this }, "Already have an account?", " ", /*#__PURE__*/ React.createElement("button", { onClick: handleSignIn, className: "text-white underline hover:text-purple-200", __source: { fileName: "", lineNumber: 1244, columnNumber: 19 }, __self: this }, "Login")))))), showUpgradeModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 backdrop-blur-sm p-4", __source: { fileName: "", lineNumber: 1259, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md rounded-xl bg-gradient-to-b from-purple-900 to-indigo-900 p-6 text-white shadow-2xl border border-purple-500", __source: { fileName: "", lineNumber: 1260, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 1261, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 1262, columnNumber: 15 }, __self: this }, "Daily Limit Reached"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUpgradeModal(false), className: "text-white hover:text-gray-300 text-xl", __source: { fileName: "", lineNumber: 1263, columnNumber: 15 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 1271, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 1272, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 1273, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 1274, columnNumber: 19 }, __self: this }, "🔮"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1275, columnNumber: 19 }, __self: this }, "You've reached your daily free limit!")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 1277, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 1278, columnNumber: 19 }, __self: this }, "⭐"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1279, columnNumber: 19 }, __self: this }, "Upgrade to Premium for unlimited fortunes")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-lg", __source: { fileName: "", lineNumber: 1281, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 1282, columnNumber: 19 }, __self: this }, "🌙"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1283, columnNumber: 19 }, __self: this }, "Access exclusive premium readings")))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 1288, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mb-4", __source: { fileName: "", lineNumber: 1289, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPlan("monthly"), className: `px-4 py-2 rounded-lg transition-all ${selectedPlan === "monthly" ? "bg-purple-600 text-white" : "bg-purple-900 text-purple-300"}`, __source: { fileName: "", lineNumber: 1290, columnNumber: 17 }, __self: this }, "Monthly"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPlan("yearly"), className: `px-4 py-2 rounded-lg transition-all ${selectedPlan === "yearly" ? "bg-purple-600 text-white" : "bg-purple-900 text-purple-300"}`, __source: { fileName: "", lineNumber: 1300, columnNumber: 17 }, __self: this }, "Yearly", " ", /*#__PURE__*/ React.createElement("span", { className: "text-xs text-green-300", __source: { fileName: "", lineNumber: 1309, columnNumber: 19 }, __self: this }, "Save 37%"))), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 1313, columnNumber: 15 }, __self: this }, selectedPlan === "monthly" ? /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-yellow-300", __source: { fileName: "", lineNumber: 1315, columnNumber: 19 }, __self: this }, formatPrice(prices.monthly.amount, "month")) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1319, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-yellow-300", __source: { fileName: "", lineNumber: 1320, columnNumber: 21 }, __self: this }, formatPrice(prices.yearly.amount, "year")), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-green-300 mt-1", __source: { fileName: "", lineNumber: 1323, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "line-through text-purple-300 mr-1", __source: { fileName: "", lineNumber: 1324, columnNumber: 23 }, __self: this }, "$", prices.monthly.amount * 12 / 100), "Save $", (prices.monthly.amount * 12 - prices.yearly.amount) / 100)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 1336, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleUpgrade, className: "w-full py-3 bg-gradient-to-r from-yellow-500 to-amber-500 hover:from-yellow-400 hover:to-amber-400 text-black rounded-lg font-medium transition-all animate-pulse", __source: { fileName: "", lineNumber: 1337, columnNumber: 15 }, __self: this }, selectedPlan === "monthly" ? "Upgrade to Premium - $3.99/month" : "Upgrade to Premium - $29.99/year"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUpgradeModal(false), className: "w-full py-3 bg-transparent border border-purple-400 hover:bg-purple-800 rounded-lg font-medium transition-all", __source: { fileName: "", lineNumber: 1345, columnNumber: 15 }, __self: this }, "Maybe Later")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1356, columnNumber: 7 }, __self: this }, ` @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .animate-float { animation: float 3s ease-in-out infinite; } .animate-shake { animation: shake 0.5s linear infinite; } .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; } .animate-pulse { animation: pulse 2s infinite; } `)); }