function ArtBackgroundRotator({ artworks = [], transitionMode = "fade", interval = 5000, overlay = true, className = "" }) { const [currentIndex, setCurrentIndex] = useState(0); const [isTransitioning, setIsTransitioning] = useState(false); useEffect(()=>{ if (!artworks.length) return; const timer = setInterval(()=>{ setIsTransitioning(true); setTimeout(()=>{ setCurrentIndex((prev)=>(prev + 1) % artworks.length); setIsTransitioning(false); }, 1000); }, interval); return ()=>clearInterval(timer); }, [ artworks.length, interval ]); const transitionStyles = { fade: { transition: "opacity 1s ease-in-out", opacity: isTransitioning ? 0 : 1 }, slide: { transition: "transform 1s ease-in-out", transform: isTransitioning ? "translateX(-100%)" : "translateX(0)" }, zoom: { transition: "transform 1s ease-in-out", transform: isTransitioning ? "scale(1.2)" : "scale(1)" } }; if (!artworks.length) return null; return /*#__PURE__*/ React.createElement("div", { className: `relative h-full w-full overflow-hidden ${className}`, __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-cover bg-center bg-no-repeat", style: { backgroundImage: `url(${artworks[currentIndex]})`, ...transitionStyles[transitionMode] }, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }), overlay && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/30 backdrop-blur-[2px]", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this })); } function ArtBackgroundRotatorStory() { const sampleArtworks = [ "https://ucarecdn.com/10af5975-5614-4a74-9917-32bb928a4f43/-/format/auto/", "https://ucarecdn.com/dc8879ab-1c08-4cbf-87ba-904151e05fbd/-/format/auto/", "https://ucarecdn.com/3a571f89-c760-4c0e-9021-e2f32a9ae1f3/-/format/auto/" ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-8", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Fade Transition"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] w-full rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ArtBackgroundRotator, { artworks: sampleArtworks, transitionMode: "fade", interval: 5000, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Slide Transition"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] w-full rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ArtBackgroundRotator, { artworks: sampleArtworks, transitionMode: "slide", interval: 5000, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Zoom Transition"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] w-full rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ArtBackgroundRotator, { artworks: sampleArtworks, transitionMode: "zoom", interval: 5000, __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "No Overlay"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] w-full rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ArtBackgroundRotator, { artworks: sampleArtworks, transitionMode: "fade", interval: 5000, overlay: false, __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this })))); } function ArtBackgroundRotator2({ artworks = [], transitionMode = "rotate", interval = 8000, overlay = true, overlayOpacity = 0.25, className = "", glowEffect = false, particleEffect = false }) { const [currentIndex, setCurrentIndex] = useState(0); const [isTransitioning, setIsTransitioning] = useState(false); const [direction, setDirection] = useState(1); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); useEffect(()=>{ const handleMouseMove = (e)=>{ const { clientX, clientY } = e; const x = (clientX / window.innerWidth - 0.5) * 20; const y = (clientY / window.innerHeight - 0.5) * 20; setMousePosition({ x, y }); }; window.addEventListener("mousemove", handleMouseMove); return ()=>window.removeEventListener("mousemove", handleMouseMove); }, []); useEffect(()=>{ if (!artworks.length) return; const timer = setInterval(()=>{ setIsTransitioning(true); setTimeout(()=>{ setCurrentIndex((prev)=>{ const next = prev + direction; if (next >= artworks.length) return 0; if (next < 0) return artworks.length - 1; return next; }); if (Math.random() > 0.7) { setDirection((d)=>-d); } setIsTransitioning(false); }, 1500); }, interval); return ()=>clearInterval(timer); }, [ artworks.length, interval, direction ]); const transitionStyles = { fade: { transition: "all 1.5s cubic-bezier(0.4, 0, 0.2, 1)", opacity: isTransitioning ? 0 : 1, transform: `translate(${mousePosition.x}px, ${mousePosition.y}px) scale(1.05)` }, slide: { transition: "all 1.5s cubic-bezier(0.4, 0, 0.2, 1)", transform: isTransitioning ? `translate(${direction > 0 ? "-100%" : "100%"}, ${mousePosition.y}px)` : `translate(${mousePosition.x}px, ${mousePosition.y}px)` }, zoom: { transition: "all 1.5s cubic-bezier(0.4, 0, 0.2, 1)", transform: isTransitioning ? `translate(${mousePosition.x}px, ${mousePosition.y}px) scale(1.2) rotate(2deg)` : `translate(${mousePosition.x}px, ${mousePosition.y}px) scale(1) rotate(0deg)` }, rotate: { transition: "all 1.5s cubic-bezier(0.4, 0, 0.2, 1)", transform: isTransitioning ? `translate(${mousePosition.x}px, ${mousePosition.y}px) scale(1.1) rotate(${direction > 0 ? "3deg" : "-3deg"})` : `translate(${mousePosition.x}px, ${mousePosition.y}px) scale(1) rotate(0deg)`, opacity: isTransitioning ? 0.8 : 1 } }; if (!artworks.length) return null; return /*#__PURE__*/ React.createElement("div", { className: `relative h-full w-full overflow-hidden ${className}`, __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, glowEffect && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 pointer-events-none", style: { background: "radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 80%)", mixBlendMode: "overlay" }, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-cover bg-center bg-no-repeat", style: { backgroundImage: `url(${artworks[currentIndex]})`, ...transitionStyles[transitionMode], filter: glowEffect ? "brightness(1.1)" : "none" }, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }), overlay && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 backdrop-blur-[2px]", style: { backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`, transition: "background-color 0.5s ease-in-out", backdropFilter: "blur(2px)" }, __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }), particleEffect && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 pointer-events-none", style: { background: ` radial-gradient(circle at ${Math.random() * 100}% ${Math.random() * 100}%, rgba(255,255,255,0.1) 0%, transparent 10%), radial-gradient(circle at ${Math.random() * 100}% ${Math.random() * 100}%, rgba(255,255,255,0.1) 0%, transparent 10%), radial-gradient(circle at ${Math.random() * 100}% ${Math.random() * 100}%, rgba(255,255,255,0.1) 0%, transparent 10%) `, animation: "float 20s infinite linear" }, __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translate(0, 0); } 25% { transform: translate(10px, 10px); } 50% { transform: translate(0, 20px); } 75% { transform: translate(-10px, 10px); } 100% { transform: translate(0, 0); } } `)); } function ArtBackgroundRotator2Story() { const sampleArtworks = [ "https://ucarecdn.com/10af5975-5614-4a74-9917-32bb928a4f43/-/format/auto/", "https://ucarecdn.com/dc8879ab-1c08-4cbf-87ba-904151e05fbd/-/format/auto/", "https://ucarecdn.com/3a571f89-c760-4c0e-9021-e2f32a9ae1f3/-/format/auto/" ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-8", __source: { fileName: "", lineNumber: 147, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, "Rotate Transition"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] w-full rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ArtBackgroundRotator2, { artworks: sampleArtworks, transitionMode: "rotate", interval: 7000, overlayOpacity: 0.2, __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, "Enhanced Zoom"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] w-full rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ArtBackgroundRotator2, { artworks: sampleArtworks, transitionMode: "zoom", interval: 8000, overlayOpacity: 0.25, __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, "Smooth Fade"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] w-full rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ArtBackgroundRotator2, { artworks: sampleArtworks, transitionMode: "fade", interval: 6000, overlayOpacity: 0.3, __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this })))); } function MainComponent() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [deviceInfo, setDeviceInfo] = useState(null); const [showPWAPrompt, setShowPWAPrompt] = useState(false); const [notificationPermission, setNotificationPermission] = useState("default"); const [offlineMode, setOfflineMode] = useState(false); const { signInWithCredentials } = useAuth(); useEffect(()=>{ const handleOnline = ()=>setOfflineMode(false); const handleOffline = ()=>setOfflineMode(true); window.addEventListener("online", handleOnline); window.addEventListener("offline", handleOffline); setOfflineMode(!navigator.onLine); return ()=>{ window.removeEventListener("online", handleOnline); window.removeEventListener("offline", handleOffline); }; }, []); useEffect(()=>{ if ("Notification" in window) { setNotificationPermission(Notification.permission); } }, []); const requestNotifications = async ()=>{ try { const permission = await Notification.requestPermission(); setNotificationPermission(permission); if (permission === "granted") { const registration = await navigator.serviceWorker.ready; const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: "YOUR_VAPID_PUBLIC_KEY" }); await fetch("/api/notifications/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ subscription, userId: user?.id }) }); } } catch (err) { console.error("Error requesting notifications:", err); } }; const handleInstallClick = async ()=>{ if (!window.deferredPrompt) return; const promptResult = await window.deferredPrompt.prompt(); console.log("PWA install prompt result:", promptResult); window.deferredPrompt = null; setShowPWAPrompt(false); }; const onSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); if (offlineMode) { const cachedCredentials = localStorage.getItem("offlineCredentials"); if (cachedCredentials) { const { savedEmail, savedPassword } = JSON.parse(cachedCredentials); if (email === savedEmail && password === savedPassword) { setLoading(false); return; } } setError("Cannot sign in while offline"); setLoading(false); return; } if (!email || !password) { setError("Please fill in all fields"); setLoading(false); return; } try { const response = await fetch("/api/auth/signin", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, password, deviceInfo }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } if (data.security?.isNewLocation) { const confirmLogin = window.confirm(`We noticed you're signing in from ${data.security.locationInfo?.city}, ${data.security.locationInfo?.country}. Is this you?`); if (!confirmLogin) { setError("Login cancelled for security reasons"); setLoading(false); return; } } if (data.cookie) { document.cookie = `${data.cookie.name}=${data.cookie.value}; ${Object.entries(data.cookie.options).map(([key, value])=>`${key}=${value}`).join("; ")}`; } const storeOffline = window.confirm("Would you like to enable offline access? This will store your credentials securely on this device."); if (storeOffline) { localStorage.setItem("offlineCredentials", JSON.stringify({ savedEmail: email, savedPassword: password, timestamp: Date.now() })); } await signInWithCredentials({ email, password, callbackUrl: "/", redirect: true }); if (data.pwa?.installPrompt && window.deferredPrompt) { try { window.deferredPrompt.prompt(); const { outcome } = await window.deferredPrompt.userChoice; console.log(`PWA install prompt - User ${outcome}`); window.deferredPrompt = null; } catch (err) { console.error("PWA install prompt error:", err); } } } catch (err) { const errorMessages = { OAuthSignin: "Couldn't start sign-in. Please try again or use a different method.", OAuthCallback: "Sign-in failed after redirecting. Please try again.", OAuthCreateAccount: "Couldn't create an account with this sign-in method. Try another option.", EmailCreateAccount: "This email can't be used to create an account. It may already exist.", Callback: "Something went wrong during sign-in. Please try again.", OAuthAccountNotLinked: "This account is linked to a different sign-in method. Try using that instead.", CredentialsSignin: "Incorrect email or password. Try again or reset your password.", AccessDenied: "You don't have permission to sign in.", Configuration: "Sign-in isn't working right now. Please try again later.", Verification: "Your sign-in link has expired. Request a new one." }; setError(errorMessages[err.message] || err.message || "Something went wrong. Please try again."); setLoading(false); } }; const artBackgrounds = [ "https://ucarecdn.com/dc8879ab-1c08-4cbf-87ba-904151e05fbd/-/format/auto/", "https://ucarecdn.com/10af5975-5614-4a74-9917-32bb928a4f43/-/format/auto/", "https://ucarecdn.com/3a571f89-c760-4c0e-9021-e2f32a9ae1f3/-/format/auto/" ]; return /*#__PURE__*/ React.createElement("div", { className: "relative min-h-screen w-full", __source: { fileName: "", lineNumber: 200, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArtBackgroundRotator, { artworks: artBackgrounds, transitionMode: "rotate", interval: 8000, overlayOpacity: 0.25, glowEffect: true, particleEffect: true, className: "fixed inset-0", __source: { fileName: "", lineNumber: 201, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative flex min-h-screen w-full items-center justify-center p-4", __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md rounded-2xl bg-black/20 p-8 backdrop-blur-xl", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, offlineMode && /*#__PURE__*/ React.createElement("div", { className: "mb-4 rounded-lg bg-yellow-500/10 p-3 text-sm text-yellow-400", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, "You're currently offline. Sign in with cached credentials or try again when online."), /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-center text-3xl font-bold text-white", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, "Welcome Back"), /*#__PURE__*/ React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-white/20 bg-black/20 px-4 py-3 focus-within:border-[#357AFF] focus-within:ring-1 focus-within:ring-[#357AFF]", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "email", type: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email", className: "w-full bg-transparent text-lg text-white placeholder-white/50 outline-none", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 242, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-white/20 bg-black/20 px-4 py-3 focus-within:border-[#357AFF] focus-within:ring-1 focus-within:ring-[#357AFF]", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "password", type: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full rounded-lg bg-transparent text-lg text-white placeholder-white/50 outline-none", placeholder: "Enter your password", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-500/10 p-3 text-sm text-red-400", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full rounded-lg bg-[#357AFF] px-4 py-3 text-base font-medium text-white transition-all hover:bg-[#2E69DE] hover:shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-[#357AFF] focus:ring-offset-2 disabled:opacity-50", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, loading ? "Signing in..." : "Sign In"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-white/80", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, "Don't have an account?", " ", /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "text-[#357AFF] hover:text-[#2E69DE]", __source: { fileName: "", lineNumber: 275, columnNumber: 15 }, __self: this }, "Sign up"))), showPWAPrompt && /*#__PURE__*/ React.createElement("div", { className: "mt-6 rounded-lg bg-[#357AFF]/10 p-4 border border-[#357AFF]/20", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "h-6 w-6 text-[#357AFF]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4", __source: { fileName: "", lineNumber: 294, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-white/90", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, "Install our app for a better experience with offline support")), /*#__PURE__*/ React.createElement("button", { onClick: handleInstallClick, className: "flex-shrink-0 rounded-lg bg-[#357AFF] px-4 py-2 text-sm font-medium text-white hover:bg-[#2E69DE] focus:outline-none focus:ring-2 focus:ring-[#357AFF] focus:ring-offset-2", __source: { fileName: "", lineNumber: 307, columnNumber: 17 }, __self: this }, "Install"))), notificationPermission === "default" && /*#__PURE__*/ React.createElement("div", { className: "mt-4 rounded-lg bg-[#357AFF]/10 p-4 border border-[#357AFF]/20", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 319, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 320, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "h-6 w-6 text-[#357AFF]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9", __source: { fileName: "", lineNumber: 327, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 335, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-white/90", __source: { fileName: "", lineNumber: 336, columnNumber: 19 }, __self: this }, "Enable notifications to stay updated about your account activity and rewards")), /*#__PURE__*/ React.createElement("button", { onClick: requestNotifications, className: "flex-shrink-0 rounded-lg bg-[#357AFF] px-4 py-2 text-sm font-medium text-white hover:bg-[#2E69DE] focus:outline-none focus:ring-2 focus:ring-[#357AFF] focus:ring-offset-2", __source: { fileName: "", lineNumber: 341, columnNumber: 17 }, __self: this }, "Enable")))))); }