function PageWrapper1({ children, title = "+One", showHeader = true, requireAuth = false, loading = false, error = null, loadingMessage = "Loading...", loadingVariant = "initial", className = "", headerProps = {}, onRetry = null }) { const { data: user, loading: userLoading } = useUser(); const [notifications, setNotifications] = React.useState([]); const [notificationsLoading, setNotificationsLoading] = React.useState(false); React.useEffect(()=>{ if (user && showHeader) { fetchNotifications(); } }, [ user, showHeader ]); const fetchNotifications = async ()=>{ try { setNotificationsLoading(true); const response = await fetch("/api/notifications/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 5 }) }); if (response.ok) { const data = await response.json(); setNotifications(data.notifications || []); } } catch (err) { console.error("Error loading notifications:", err); } finally{ setNotificationsLoading(false); } }; const handleFilterChange = React.useCallback((filter)=>{ window.location.href = `/explore?category=${filter === "All" ? "" : filter}`; }, []); const handleLogout = React.useCallback(async ()=>{ try { await fetch("/api/auth/signout", { method: "POST" }); window.location.href = "/"; } catch (error) { console.error("Logout error:", error); } }, []); const handleProfileUpdate = React.useCallback(async (data)=>{ try { const response = await fetch("/api/user/profile", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }); if (response.ok) { window.location.reload(); } } catch (error) { console.error("Profile update error:", error); } }, []); // Show loading screen while checking authentication if (userLoading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "auth", message: "Checking authentication...", size: "medium", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this })); } // Handle authentication requirements if (requireAuth && !user) { React.useEffect(()=>{ window.location.href = "/account/signin"; }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "auth", message: "Redirecting to sign in...", size: "medium", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })); } // Show error state if (error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] flex items-center justify-center px-4", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full text-center", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl p-8", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-6", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-2xl text-red-500", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-white mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Something went wrong"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mb-6", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, typeof error === "string" ? error : "An unexpected error occurred"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-3 justify-center", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, onRetry && /*#__PURE__*/ React.createElement("button", { onClick: onRetry, className: "bg-[#FFD700] text-[#121212] px-6 py-3 rounded-lg font-semibold hover:bg-[#E6C200] transition-colors", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, "Try Again"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/", className: "border border-[#FFD700] text-[#FFD700] px-6 py-3 rounded-lg font-semibold hover:bg-[#FFD700] hover:text-[#121212] transition-colors", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, "Go Home"))))); } // Show loading state if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 147, columnNumber: 7 }, __self: this }, showHeader && user && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 z-40", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(UserHeader, { user: user, notifications: notifications, onFilterChange: handleFilterChange, onLogout: handleLogout, onProfileUpdate: handleProfileUpdate, ...headerProps, __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `flex items-center justify-center ${showHeader && user ? "pt-20 min-h-screen" : "min-h-screen"}`, __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { variant: loadingVariant, message: loadingMessage, size: "medium", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }))); } // Main content render return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen bg-[#121212] text-white ${className}`, __source: { fileName: "", lineNumber: 176, columnNumber: 5 }, __self: this }, showHeader && user && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 z-40", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(UserHeader, { user: user, notifications: notifications, onFilterChange: handleFilterChange, onLogout: handleLogout, onProfileUpdate: handleProfileUpdate, ...headerProps, __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: showHeader && user ? "pt-20" : "", __source: { fileName: "", lineNumber: 190, columnNumber: 7 }, __self: this }, children)); } function PageWrapper1Story() { const [demoLoading, setDemoLoading] = React.useState(false); const [demoError, setDemoError] = React.useState(null); const mockUser = { id: "1", name: "Demo User", email: "demo@plusone.global" }; const simulateLoading = ()=>{ setDemoLoading(true); setTimeout(()=>setDemoLoading(false), 3000); }; const simulateError = ()=>{ setDemoError("Failed to load page data. Please try again."); }; const clearError = ()=>{ setDemoError(null); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 219, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-center py-4", __source: { fileName: "", lineNumber: 220, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 221, columnNumber: 9 }, __self: this }, "PageWrapper Component"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 222, columnNumber: 9 }, __self: this }, "Standardized page wrapper for +One with authentication, loading, and error handling")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 228, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 230, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, "Basic Content"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, "Standard page with content")), /*#__PURE__*/ React.createElement("div", { className: "h-64", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 241, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, "With Header"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "Page with user header navigation")), /*#__PURE__*/ React.createElement("div", { className: "h-64 relative", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 254, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, "Page showing loading screen"), /*#__PURE__*/ React.createElement("button", { onClick: simulateLoading, className: "mt-2 text-xs bg-[#FFD700] text-[#121212] px-2 py-1 rounded", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, "Simulate Loading")), /*#__PURE__*/ React.createElement("div", { className: "h-64", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, "Page showing error message"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 space-x-2", __source: { fileName: "", lineNumber: 275, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: simulateError, className: "text-xs bg-red-500 text-white px-2 py-1 rounded", __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this }, "Simulate Error"), /*#__PURE__*/ React.createElement("button", { onClick: clearError, className: "text-xs bg-green-500 text-white px-2 py-1 rounded", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, "Clear Error"))), /*#__PURE__*/ React.createElement("div", { className: "h-64", __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 296, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 297, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 298, columnNumber: 13 }, __self: this }, "Auth Required"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 299, columnNumber: 13 }, __self: this }, "Page requiring authentication")), /*#__PURE__*/ React.createElement("div", { className: "h-64", __source: { fileName: "", lineNumber: 303, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 309, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this }, "Loading Variants"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 312, columnNumber: 13 }, __self: this }, "Different loading screen types")), /*#__PURE__*/ React.createElement("div", { className: "h-64 space-y-4 p-4", __source: { fileName: "", lineNumber: 316, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl p-6", __source: { fileName: "", lineNumber: 322, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 323, columnNumber: 9 }, __self: this }, "Usage Examples"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 text-sm", __source: { fileName: "", lineNumber: 326, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2A2A2A] p-4 rounded-lg", __source: { fileName: "", lineNumber: 327, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-[#FFD700] font-medium mb-2", __source: { fileName: "", lineNumber: 328, columnNumber: 13 }, __self: this }, "Basic Page"), /*#__PURE__*/ React.createElement("code", { className: "text-gray-300", __source: { fileName: "", lineNumber: 329, columnNumber: 13 }, __self: this }, ` `)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2A2A2A] p-4 rounded-lg", __source: { fileName: "", lineNumber: 336, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-[#FFD700] font-medium mb-2", __source: { fileName: "", lineNumber: 337, columnNumber: 13 }, __self: this }, "Protected Page with Loading"), /*#__PURE__*/ React.createElement("code", { className: "text-gray-300", __source: { fileName: "", lineNumber: 340, columnNumber: 13 }, __self: this }, ` `)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2A2A2A] p-4 rounded-lg", __source: { fileName: "", lineNumber: 353, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-[#FFD700] font-medium mb-2", __source: { fileName: "", lineNumber: 354, columnNumber: 13 }, __self: this }, "Custom Header Props"), /*#__PURE__*/ React.createElement("code", { className: "text-gray-300", __source: { fileName: "", lineNumber: 357, columnNumber: 13 }, __self: this }, ` `))))); } function LoadingScreen({ variant = "initial", message = "Loading...", showLogo = true, size = "medium" }) { const getSpinnerSize = ()=>{ switch(size){ case "small": return "text-2xl"; case "large": return "text-6xl"; default: return "text-4xl"; } }; const getContainerPadding = ()=>{ switch(size){ case "small": return "p-4"; case "large": return "p-12"; default: return "p-8"; } }; const getLogoSize = ()=>{ switch(size){ case "small": return "text-3xl"; case "large": return "text-8xl"; default: return "text-6xl"; } }; const getMessageSize = ()=>{ switch(size){ case "small": return "text-sm"; case "large": return "text-xl"; default: return "text-lg"; } }; const getVariantMessage = ()=>{ switch(variant){ case "initial": return message || "Loading +One..."; case "data": return message || "Loading data..."; case "auth": return message || "Authenticating..."; case "upload": return message || "Uploading..."; case "processing": return message || "Processing..."; default: return message || "Loading..."; } }; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-center justify-center text-center ${getContainerPadding()}`, __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, showLogo && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `font-bold bg-gradient-to-r from-[#FFD700] to-[#FFA500] bg-clip-text text-transparent ${getLogoSize()}`, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "+One")), /*#__PURE__*/ React.createElement("div", { className: `text-[#FFD700] mb-4 ${getSpinnerSize()}`, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch animate-spin", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: `text-gray-400 font-medium ${getMessageSize()}`, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, getVariantMessage()), variant === "initial" && /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-sm mt-2 max-w-xs", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "Discover Cape Town's hidden gems together")); } function LoadingScreenStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] space-y-8", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-center py-4", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "Loading Screen Variants"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "Different loading states for +One")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Initial Load"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "initial", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Data Loading"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "data", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Authentication"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "auth", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "Upload"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "upload", message: "Uploading images...", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "Processing"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "processing", message: "Creating experience...", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "Custom Message"), /*#__PURE__*/ React.createElement(LoadingScreen, { message: "Finding perfect matches...", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "px-4", __source: { fileName: "", lineNumber: 147, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, "Size Variants"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[200px] flex items-center justify-center", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white text-center mb-4 font-medium", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, "Small"), /*#__PURE__*/ React.createElement(LoadingScreen, { size: "small", variant: "data", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white text-center mb-4 font-medium", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, "Medium (Default)"), /*#__PURE__*/ React.createElement(LoadingScreen, { size: "medium", variant: "initial", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[400px] flex items-center justify-center", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white text-center mb-4 font-medium", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, "Large"), /*#__PURE__*/ React.createElement(LoadingScreen, { size: "large", variant: "initial", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "px-4", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, "Without Logo"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[200px] flex items-center justify-center", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { showLogo: false, variant: "data", message: "Refreshing content...", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pb-8", __source: { fileName: "", lineNumber: 180, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, "Full Screen Example"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] rounded-xl min-h-[400px] flex items-center justify-center border border-gray-700", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "initial", size: "large", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this })))); } function UserHeader({ user = null, notifications = [], onFilterChange = ()=>{}, onLogout = ()=>{}, onProfileUpdate = ()=>{}, variant = "auto" }) { const [showProfileDropdown, setShowProfileDropdown] = React.useState(false); const [showNotificationDropdown, setShowNotificationDropdown] = React.useState(false); const [showFilterDropdown, setShowFilterDropdown] = React.useState(false); const [selectedFilter, setSelectedFilter] = React.useState("All"); const [profileImage, setProfileImage] = React.useState(user?.profileImage || null); const [uploading, setUploading] = React.useState(false); const [isMobile, setIsMobile] = React.useState(false); const [upload] = useUpload ? useUpload() : [ null, { loading: false } ]; // Detect mobile screen size React.useEffect(()=>{ const checkMobile = ()=>{ setIsMobile(window.innerWidth < 768); // md breakpoint }; checkMobile(); window.addEventListener("resize", checkMobile); return ()=>window.removeEventListener("resize", checkMobile); }, []); // Determine which variant to use const effectiveVariant = variant === "auto" ? isMobile ? "mobile" : "desktop" : variant; // Optimize: Memoize expensive calculations const filters = React.useMemo(()=>[ "All", "Adventure", "Food", "Art", "Culture", "Sports", "Other" ], []); const unreadCount = React.useMemo(()=>notifications.filter((n)=>!n.read).length, [ notifications ]); // Optimize: Memoize handlers to prevent unnecessary re-renders const handleFilterSelect = React.useCallback((filter)=>{ setSelectedFilter(filter); setShowFilterDropdown(false); onFilterChange(filter); }, [ onFilterChange ]); const handleNotificationClick = React.useCallback(async (notificationId)=>{ try { await fetch("/api/notifications/mark-read", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ notificationId }) }); } catch (err) { console.error("Failed to mark notification as read:", err); } }, []); const handleProfileImageUpload = React.useCallback(async (event)=>{ const file = event.target.files?.[0]; if (!file || !upload) return; setUploading(true); try { const { url, error } = await upload({ file }); if (error) { console.error("Upload failed:", error); return; } setProfileImage(url); onProfileUpdate({ profileImage: url }); } catch (err) { console.error("Upload error:", err); } finally{ setUploading(false); } }, [ upload, onProfileUpdate ]); // Optimize: Use single event listener with delegation React.useEffect(()=>{ const handleClickOutside = (event)=>{ if (!event.target.closest(".dropdown-container")) { setShowProfileDropdown(false); setShowNotificationDropdown(false); setShowFilterDropdown(false); } }; document.addEventListener("mousedown", handleClickOutside); return ()=>document.removeEventListener("mousedown", handleClickOutside); }, []); // Optimize: Update profile image when user changes React.useEffect(()=>{ setProfileImage(user?.profileImage || null); }, [ user?.profileImage ]); if (effectiveVariant === "mobile") { return /*#__PURE__*/ React.createElement("header", { className: "bg-[#121212] border-b border-[#2A2A2A] px-4 py-3", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFD700]", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "One")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "dropdown-container relative", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowFilterDropdown(!showFilterDropdown), className: "flex items-center justify-center w-10 h-10 text-gray-300 hover:text-[#FFD700] hover:bg-[#1E1E1E] rounded-lg transition-colors", title: "Filter", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-filter text-sm", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this })), showFilterDropdown && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-full mt-2 w-48 bg-[#1E1E1E] border border-[#2A2A2A] rounded-lg shadow-lg z-50", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, filters.map((filter)=>/*#__PURE__*/ React.createElement("button", { key: filter, onClick: ()=>handleFilterSelect(filter), className: `w-full text-left px-4 py-2 hover:bg-[#2A2A2A] transition-colors first:rounded-t-lg last:rounded-b-lg ${selectedFilter === filter ? "text-[#FFD700] bg-[#2A2A2A]" : "text-white"}`, __source: { fileName: "", lineNumber: 135, columnNumber: 21 }, __self: this }, filter)))), /*#__PURE__*/ React.createElement("div", { className: "dropdown-container relative", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowNotificationDropdown(!showNotificationDropdown), className: "relative flex items-center justify-center w-10 h-10 text-gray-300 hover:text-[#FFD700] hover:bg-[#1E1E1E] rounded-lg transition-colors", title: "Notifications", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-sm", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }), unreadCount > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-medium", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, unreadCount > 9 ? "9+" : unreadCount)), showNotificationDropdown && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-full mt-2 w-80 bg-[#1E1E1E] border border-[#2A2A2A] rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 border-b border-[#2A2A2A]", __source: { fileName: "", lineNumber: 170, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 171, columnNumber: 21 }, __self: this }, "Notifications"), unreadCount > 0 && /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-xs", __source: { fileName: "", lineNumber: 173, columnNumber: 23 }, __self: this }, unreadCount, " unread")), notifications.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "p-4 text-center text-gray-400", __source: { fileName: "", lineNumber: 179, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell-slash text-lg mb-2", __source: { fileName: "", lineNumber: 180, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 181, columnNumber: 23 }, __self: this }, "No notifications")) : notifications.map((notification)=>/*#__PURE__*/ React.createElement("div", { key: notification.id, onClick: ()=>handleNotificationClick(notification.id), className: `p-3 border-b border-[#2A2A2A] cursor-pointer hover:bg-[#2A2A2A] transition-colors ${!notification.read ? "bg-[#1A1A1A] border-l-2 border-l-[#FFD700]" : ""}`, __source: { fileName: "", lineNumber: 185, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-2", __source: { fileName: "", lineNumber: 194, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-2 h-2 rounded-full mt-1 flex-shrink-0 ${!notification.read ? "bg-[#FFD700]" : "bg-gray-600"}`, __source: { fileName: "", lineNumber: 195, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 198, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 199, columnNumber: 29 }, __self: this }, notification.message), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-xs mt-1", __source: { fileName: "", lineNumber: 202, columnNumber: 29 }, __self: this }, notification.time))))))), /*#__PURE__*/ React.createElement("div", { className: "dropdown-container relative", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowProfileDropdown(!showProfileDropdown), className: "flex items-center justify-center w-10 h-10 rounded-lg hover:bg-[#1E1E1E] transition-colors", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full overflow-hidden bg-[#2A2A2A] border border-[#FFD700]", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, profileImage ? /*#__PURE__*/ React.createElement("img", { src: profileImage, alt: "Profile", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 222, columnNumber: 21 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-[#FFD700]", __source: { fileName: "", lineNumber: 228, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-xs", __source: { fileName: "", lineNumber: 229, columnNumber: 23 }, __self: this })))), showProfileDropdown && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-full mt-2 w-56 bg-[#1E1E1E] border border-[#2A2A2A] rounded-lg shadow-lg z-50", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 border-b border-[#2A2A2A]", __source: { fileName: "", lineNumber: 237, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 238, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden bg-[#2A2A2A] border border-[#FFD700]", __source: { fileName: "", lineNumber: 239, columnNumber: 23 }, __self: this }, profileImage ? /*#__PURE__*/ React.createElement("img", { src: profileImage, alt: "Profile", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 241, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-[#FFD700]", __source: { fileName: "", lineNumber: 247, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-sm", __source: { fileName: "", lineNumber: 248, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "min-w-0 flex-1", __source: { fileName: "", lineNumber: 252, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-medium text-sm truncate", __source: { fileName: "", lineNumber: 253, columnNumber: 25 }, __self: this }, user?.name || "User"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-xs truncate", __source: { fileName: "", lineNumber: 256, columnNumber: 25 }, __self: this }, user?.email)))), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-3 px-3 py-2 text-white hover:bg-[#2A2A2A] rounded-lg cursor-pointer transition-colors", __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-[#FFD700] text-sm", __source: { fileName: "", lineNumber: 265, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 266, columnNumber: 23 }, __self: this }, uploading ? "Uploading..." : "Change Photo"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleProfileImageUpload, className: "hidden", disabled: uploading, __source: { fileName: "", lineNumber: 269, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/user/dashboard", className: "flex items-center gap-3 px-3 py-2 text-white hover:bg-[#2A2A2A] rounded-lg transition-colors", __source: { fileName: "", lineNumber: 278, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt text-[#FFD700] text-sm", __source: { fileName: "", lineNumber: 282, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 283, columnNumber: 23 }, __self: this }, "Dashboard")), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#2A2A2A] mt-2 pt-2", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onLogout, className: "flex items-center gap-3 px-3 py-2 text-red-400 hover:bg-[#2A2A2A] rounded-lg transition-colors w-full text-left", __source: { fileName: "", lineNumber: 287, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt text-sm", __source: { fileName: "", lineNumber: 291, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 292, columnNumber: 25 }, __self: this }, "Logout"))))))))); } return /*#__PURE__*/ React.createElement("header", { className: "bg-[#121212] border-b border-[#2A2A2A] px-4 md:px-8 py-4", __source: { fileName: "", lineNumber: 306, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 307, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-3xl font-bold hover:text-[#E5C200] transition-colors", __source: { fileName: "", lineNumber: 309, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFD700]", __source: { fileName: "", lineNumber: 313, columnNumber: 11 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this }, "One")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 318, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "dropdown-container relative", __source: { fileName: "", lineNumber: 320, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowFilterDropdown(!showFilterDropdown), className: "flex items-center justify-center w-12 h-12 text-gray-300 hover:text-[#FFD700] hover:bg-[#1E1E1E] rounded-lg transition-colors", title: "Filter experiences", __source: { fileName: "", lineNumber: 321, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-filter text-lg", __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this })), showFilterDropdown && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-full mt-2 w-48 bg-[#1E1E1E] border border-[#2A2A2A] rounded-lg shadow-lg z-50", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, filters.map((filter)=>/*#__PURE__*/ React.createElement("button", { key: filter, onClick: ()=>handleFilterSelect(filter), className: `w-full text-left px-4 py-2 hover:bg-[#2A2A2A] transition-colors first:rounded-t-lg last:rounded-b-lg ${selectedFilter === filter ? "text-[#FFD700] bg-[#2A2A2A]" : "text-white"}`, __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, filter)))), /*#__PURE__*/ React.createElement("div", { className: "dropdown-container relative", __source: { fileName: "", lineNumber: 349, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowNotificationDropdown(!showNotificationDropdown), className: "relative flex items-center justify-center w-12 h-12 text-gray-300 hover:text-[#FFD700] hover:bg-[#1E1E1E] rounded-lg transition-colors", title: "Notifications", __source: { fileName: "", lineNumber: 350, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-lg", __source: { fileName: "", lineNumber: 357, columnNumber: 15 }, __self: this }), unreadCount > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, unreadCount > 9 ? "9+" : unreadCount)), showNotificationDropdown && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-full mt-2 w-96 bg-[#1E1E1E] border border-[#2A2A2A] rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto", __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#2A2A2A]", __source: { fileName: "", lineNumber: 367, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 368, columnNumber: 19 }, __self: this }, "Notifications"), unreadCount > 0 && /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 370, columnNumber: 21 }, __self: this }, unreadCount, " unread")), notifications.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "p-6 text-center text-gray-400", __source: { fileName: "", lineNumber: 376, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell-slash text-2xl mb-2", __source: { fileName: "", lineNumber: 377, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 378, columnNumber: 21 }, __self: this }, "No notifications")) : notifications.map((notification)=>/*#__PURE__*/ React.createElement("div", { key: notification.id, onClick: ()=>handleNotificationClick(notification.id), className: `p-4 border-b border-[#2A2A2A] cursor-pointer hover:bg-[#2A2A2A] transition-colors ${!notification.read ? "bg-[#1A1A1A] border-l-4 border-l-[#FFD700]" : ""}`, __source: { fileName: "", lineNumber: 382, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-3", __source: { fileName: "", lineNumber: 391, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-2 h-2 rounded-full mt-2 ${!notification.read ? "bg-[#FFD700]" : "bg-gray-600"}`, __source: { fileName: "", lineNumber: 392, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 395, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 396, columnNumber: 27 }, __self: this }, notification.message), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm mt-1", __source: { fileName: "", lineNumber: 399, columnNumber: 27 }, __self: this }, notification.time))))))), /*#__PURE__*/ React.createElement("div", { className: "dropdown-container relative", __source: { fileName: "", lineNumber: 412, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowProfileDropdown(!showProfileDropdown), className: "flex items-center gap-3 p-2 rounded-lg hover:bg-[#1E1E1E] transition-colors", __source: { fileName: "", lineNumber: 413, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden bg-[#2A2A2A] border-2 border-[#FFD700] flex-shrink-0", __source: { fileName: "", lineNumber: 417, columnNumber: 15 }, __self: this }, profileImage ? /*#__PURE__*/ React.createElement("img", { src: profileImage, alt: "Profile", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 419, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-[#FFD700]", __source: { fileName: "", lineNumber: 425, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 426, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-left hidden lg:block", __source: { fileName: "", lineNumber: 430, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-medium text-sm", __source: { fileName: "", lineNumber: 431, columnNumber: 17 }, __self: this }, user?.name || "User"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-xs", __source: { fileName: "", lineNumber: 434, columnNumber: 17 }, __self: this }, user?.email)), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-gray-400 text-sm hidden lg:block", __source: { fileName: "", lineNumber: 436, columnNumber: 15 }, __self: this })), showProfileDropdown && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-full mt-2 w-64 bg-[#1E1E1E] border border-[#2A2A2A] rounded-lg shadow-lg z-50", __source: { fileName: "", lineNumber: 440, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#2A2A2A]", __source: { fileName: "", lineNumber: 441, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 442, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full overflow-hidden bg-[#2A2A2A] border-2 border-[#FFD700]", __source: { fileName: "", lineNumber: 443, columnNumber: 21 }, __self: this }, profileImage ? /*#__PURE__*/ React.createElement("img", { src: profileImage, alt: "Profile", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 445, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-[#FFD700]", __source: { fileName: "", lineNumber: 451, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 452, columnNumber: 27 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 456, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 457, columnNumber: 23 }, __self: this }, user?.name || "User"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 460, columnNumber: 23 }, __self: this }, user?.email)))), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 465, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-3 px-3 py-2 text-white hover:bg-[#2A2A2A] rounded-lg cursor-pointer transition-colors", __source: { fileName: "", lineNumber: 466, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-[#FFD700]", __source: { fileName: "", lineNumber: 467, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 468, columnNumber: 21 }, __self: this }, uploading ? "Uploading..." : "Change Profile Photo"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleProfileImageUpload, className: "hidden", disabled: uploading, __source: { fileName: "", lineNumber: 471, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/user/dashboard", className: "flex items-center gap-3 px-3 py-2 text-white hover:bg-[#2A2A2A] rounded-lg transition-colors", __source: { fileName: "", lineNumber: 480, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt text-[#FFD700]", __source: { fileName: "", lineNumber: 484, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 485, columnNumber: 21 }, __self: this }, "Dashboard")), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#2A2A2A] mt-2 pt-2", __source: { fileName: "", lineNumber: 488, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onLogout, className: "flex items-center gap-3 px-3 py-2 text-red-400 hover:bg-[#2A2A2A] rounded-lg transition-colors w-full text-left", __source: { fileName: "", lineNumber: 489, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt", __source: { fileName: "", lineNumber: 493, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 494, columnNumber: 23 }, __self: this }, "Logout"))))))))); } function UserHeaderStory() { const mockUser = { name: "John Doe", email: "john@example.com", profileImage: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" }; const mockNotifications = [ { id: 1, message: "New experience invitation from Sarah", time: "2 minutes ago", read: false }, { id: 2, message: "Your booking for Wine Tasting has been confirmed", time: "1 hour ago", read: false }, { id: 3, message: "Experience review request", time: "2 hours ago", read: true } ]; const handleFilterChange = (filter)=>{ console.log("Filter changed to:", filter); }; const handleLogout = ()=>{ console.log("Logout clicked"); }; const handleProfileUpdate = (data)=>{ console.log("Profile updated:", data); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 549, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 551, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 552, columnNumber: 9 }, __self: this }, "Desktop Header"), /*#__PURE__*/ React.createElement(UserHeader, { user: mockUser, notifications: mockNotifications, onFilterChange: handleFilterChange, onLogout: handleLogout, onProfileUpdate: handleProfileUpdate, __source: { fileName: "", lineNumber: 553, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 563, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 564, columnNumber: 9 }, __self: this }, "Mobile Header"), /*#__PURE__*/ React.createElement(UserHeader, { user: mockUser, notifications: mockNotifications, onFilterChange: handleFilterChange, onLogout: handleLogout, onProfileUpdate: handleProfileUpdate, variant: "mobile", __source: { fileName: "", lineNumber: 565, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 576, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 577, columnNumber: 9 }, __self: this }, "No Notifications"), /*#__PURE__*/ React.createElement(UserHeader, { user: mockUser, notifications: [], onFilterChange: handleFilterChange, onLogout: handleLogout, onProfileUpdate: handleProfileUpdate, __source: { fileName: "", lineNumber: 578, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 588, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white mb-4", __source: { fileName: "", lineNumber: 589, columnNumber: 9 }, __self: this }, "No Profile Image"), /*#__PURE__*/ React.createElement(UserHeader, { user: { name: "Jane Smith", email: "jane@example.com" }, notifications: mockNotifications, onFilterChange: handleFilterChange, onLogout: handleLogout, onProfileUpdate: handleProfileUpdate, __source: { fileName: "", lineNumber: 590, columnNumber: 9 }, __self: this }))); } function MainComponent() { const { data: user, loading: userLoading } = useUser(); const [experiences, setExperiences] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [notifications, setNotifications] = React.useState([]); const featuredExperiences = React.useMemo(()=>experiences.slice(0, 3), [ experiences ]); React.useEffect(()=>{ let isMounted = true; const fetchData = async ()=>{ try { setLoading(true); const experiencesPromise = fetch("/api/experiences?limit=6").then((res)=>res.ok ? res.json() : Promise.reject("Failed to load experiences")).then((data)=>data.experiences || []); const notificationsPromise = user ? fetch("/api/notifications/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 5 }) }).then((res)=>res.ok ? res.json() : { notifications: [] }).then((data)=>data.notifications || []) : Promise.resolve([]); const [experiencesData] = await Promise.allSettled([ experiencesPromise, notificationsPromise ]); if (isMounted) { if (experiencesData.status === "fulfilled") { setExperiences(experiencesData.value); } else { console.error("Error loading experiences:", experiencesData.reason); setError("Could not load experiences"); } notificationsPromise.then((data)=>isMounted && setNotifications(data)).catch((err)=>console.error("Error loading notifications:", err)); } } catch (error) { if (isMounted) { console.error("Error loading data:", error); setError("Could not load page data"); } } finally{ if (isMounted) { setLoading(false); } } }; fetchData(); return ()=>{ isMounted = false; }; }, [ user?.id ]); const handleFilterChange = React.useCallback((filter)=>{ window.location.href = `/explore?category=${filter === "All" ? "" : filter}`; }, []); const handleLogout = React.useCallback(async ()=>{ try { await fetch("/api/auth/signout", { method: "POST" }); window.location.href = "/"; } catch (error) { console.error("Logout error:", error); } }, []); const handleProfileUpdate = React.useCallback(async (data)=>{ try { const response = await fetch("/api/user/profile", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }); if (response.ok) { window.location.reload(); } } catch (error) { console.error("Profile update error:", error); } }, []); const retryFetch = React.useCallback(()=>{ setError(null); setLoading(true); window.location.reload(); }, []); return /*#__PURE__*/ React.createElement(PageWrapper1, { showHeader: false, loading: userLoading || loading, error: error, loadingMessage: userLoading ? "Loading +One..." : "Loading experiences...", loadingVariant: "initial", onRetry: retryFetch, __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-cover bg-center bg-no-repeat", style: { backgroundImage: "url('https://images.unsplash.com/photo-1580060839134-75a5edca2e99?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')" }, __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/50", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 text-center max-w-4xl mx-auto px-4", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl sm:text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-[#FFD700] to-[#FFA500] bg-clip-text text-transparent leading-tight", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "+One"), /*#__PURE__*/ React.createElement("p", { className: "text-xl sm:text-2xl md:text-3xl mb-8 text-gray-200", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Discover Cape Town's hidden gems together"), /*#__PURE__*/ React.createElement("p", { className: "text-base sm:text-lg md:text-xl mb-12 text-gray-300 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "From secret rooftop bars in Bo-Kaap to cozy cafés in Woodstock, find your next favourite spot and invite someone special to join you."), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, user ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "bg-[#FFD700] text-[#121212] px-8 py-4 rounded-full text-lg font-semibold hover:bg-[#E5C200] transition-all hover:scale-105", __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }, "Explore Experiences"), /*#__PURE__*/ React.createElement("a", { href: "/user/dashboard", className: "border-2 border-[#FFD700] text-[#FFD700] px-8 py-4 rounded-full text-lg font-semibold hover:bg-[#FFD700] hover:text-[#121212] transition-all", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, "My Dashboard")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin?callbackUrl=/explore", className: "bg-[#FFD700] text-[#121212] px-8 py-4 rounded-full text-lg font-semibold hover:bg-[#E5C200] transition-all hover:scale-105", __source: { fileName: "", lineNumber: 160, columnNumber: 19 }, __self: this }, "Join the Community"), /*#__PURE__*/ React.createElement("a", { href: "/account/signin?callbackUrl=/explore", className: "border-2 border-[#FFD700] text-[#FFD700] px-8 py-4 rounded-full text-lg font-semibold hover:bg-[#FFD700] hover:text-[#121212] transition-all", __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, "Browse Experiences")))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-[#FFD700] text-2xl", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "py-20 px-4 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-center mb-16", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, "Three Simple Steps to Your Next Adventure"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-6", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-6", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-[#121212] text-2xl", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, "Discover"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, "Browse unique experiences from local hosts - from artisanal coffee tastings in Kalk Bay to sunset dinners on Signal Hill.")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-6", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-6", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus text-[#121212] text-2xl", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, "Invite"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, "Found something perfect? Send a +One invite via WhatsApp to that friend, date, or colleague who'd love to join you.")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-6", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-6", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-[#121212] text-2xl", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, "Experience"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, "Create memories together at Cape Town's most interesting places, from hidden speakeasies to pop-up food markets.")))), featuredExperiences.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "py-20 bg-[#1E1E1E]", __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, "This Week's Highlights"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-300 mb-12 text-lg", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, "Handpicked experiences from Cape Town's vibrant food and culture scene"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }, featuredExperiences.map((experience)=>/*#__PURE__*/ React.createElement("div", { key: experience.id, className: "bg-[#121212] rounded-xl overflow-hidden hover:transform hover:scale-105 transition-all", __source: { fileName: "", lineNumber: 236, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-48 bg-cover bg-center", style: { backgroundImage: `url(${experience.image_url || "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80"})` }, __source: { fileName: "", lineNumber: 240, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 246, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 247, columnNumber: 23 }, __self: this }, experience.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-4 line-clamp-2", __source: { fileName: "", lineNumber: 250, columnNumber: 23 }, __self: this }, experience.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 253, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFD700] font-bold", __source: { fileName: "", lineNumber: 254, columnNumber: 25 }, __self: this }, "R", experience.price), /*#__PURE__*/ React.createElement("a", { href: `/experience/${experience.id}`, className: "bg-[#FFD700] text-[#121212] px-4 py-2 rounded-full text-sm font-semibold hover:bg-[#E5C200] transition-colors", __source: { fileName: "", lineNumber: 257, columnNumber: 25 }, __self: this }, "View Details")))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "inline-block bg-[#FFD700] text-[#121212] px-8 py-3 rounded-full font-semibold hover:bg-[#E5C200] transition-all hover:scale-105", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, "Explore All Experiences")))), /*#__PURE__*/ React.createElement("div", { className: "py-20 px-4", __source: { fileName: "", lineNumber: 281, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center", __source: { fileName: "", lineNumber: 282, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 283, columnNumber: 13 }, __self: this }, "Made for Capetonians, by Capetonians"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-300 mb-12", __source: { fileName: "", lineNumber: 286, columnNumber: 13 }, __self: this }, "Whether you're new to the Mother City or a lifer looking for fresh experiences, +One connects you with the people and places that make Cape Town special."), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-8 text-left", __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] p-6 rounded-xl", __source: { fileName: "", lineNumber: 293, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-[#FFD700] text-2xl mb-4", __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, "Local Gems"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, "From the trendy streets of Kloof to the historic charm of Observatory, discover experiences across all of Cape Town's unique neighbourhoods.")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] p-6 rounded-xl", __source: { fileName: "", lineNumber: 303, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-[#FFD700] text-2xl mb-4", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, "Community First"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }, "Every experience is hosted by someone passionate about sharing their love for Cape Town's incredible food, art, and culture scene."))))), /*#__PURE__*/ React.createElement("div", { className: "py-20 bg-gradient-to-r from-[#FFD700] to-[#FFA500]", __source: { fileName: "", lineNumber: 316, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center px-4", __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, "Ready to explore Cape Town together?"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#121212] mb-8", __source: { fileName: "", lineNumber: 321, columnNumber: 13 }, __self: this }, "Join thousands of Capetonians discovering amazing experiences and making new connections."), user ? /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "inline-block bg-[#121212] text-[#FFD700] px-8 py-4 rounded-full text-lg font-semibold hover:bg-[#2A2A2A] transition-all hover:scale-105", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, "Start Exploring Now") : /*#__PURE__*/ React.createElement("a", { href: "/account/signin?callbackUrl=/explore", className: "inline-block bg-[#121212] text-[#FFD700] px-8 py-4 rounded-full text-lg font-semibold hover:bg-[#2A2A2A] transition-all hover:scale-105", __source: { fileName: "", lineNumber: 334, columnNumber: 15 }, __self: this }, "Join +One Today"))))); }