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 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 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: 73, 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: 74, columnNumber: 11 }, __self: this }, "+One")), /*#__PURE__*/ React.createElement("div", { className: `text-[#FFD700] mb-4 ${getSpinnerSize()}`, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch animate-spin", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: `text-gray-400 font-medium ${getMessageSize()}`, __source: { fileName: "", lineNumber: 86, 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: 91, 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: 101, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-center py-4", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "Loading Screen Variants"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 104, 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: 107, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Initial Load"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "initial", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "Data Loading"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "data", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Authentication"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "auth", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "Upload"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "upload", message: "Uploading images...", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, "Processing"), /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "processing", message: "Creating experience...", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-center mb-4 font-semibold", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, "Custom Message"), /*#__PURE__*/ React.createElement(LoadingScreen, { message: "Finding perfect matches...", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "px-4", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, "Size Variants"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[200px] flex items-center justify-center", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white text-center mb-4 font-medium", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, "Small"), /*#__PURE__*/ React.createElement(LoadingScreen, { size: "small", variant: "data", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[300px] flex items-center justify-center", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white text-center mb-4 font-medium", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, "Medium (Default)"), /*#__PURE__*/ React.createElement(LoadingScreen, { size: "medium", variant: "initial", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] rounded-xl min-h-[400px] flex items-center justify-center", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white text-center mb-4 font-medium", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, "Large"), /*#__PURE__*/ React.createElement(LoadingScreen, { size: "large", variant: "initial", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "px-4", __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 197, 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: 200, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { showLogo: false, variant: "data", message: "Refreshing content...", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 pb-8", __source: { fileName: "", lineNumber: 209, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-xl font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 210, 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: 213, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "initial", size: "large", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this })))); } const meetingOptions = [ { value: "location", label: "Meet at venue", description: "We'll meet directly at the experience location" }, { value: "pickup", label: "I'll pick you up", description: "Let me know your address and I'll collect you" } ]; const dressCodeOptions = [ { value: "casual", label: "Casual", description: "Comfortable, everyday clothing", icon: "👕" }, { value: "smart", label: "Smart Casual", description: "Neat and presentable, but not formal", icon: "👔" }, { value: "formal", label: "Formal", description: "Dress up for a special occasion", icon: "🤵" } ]; 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 [selectedImage, setSelectedImage] = React.useState(null); 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=3", { signal: AbortSignal.timeout(10000) }).then((res)=>res.ok ? res.json() : Promise.reject("Failed to load experiences")).then((data)=>data.experiences || []).catch(()=>[]); const [experiencesData] = await Promise.allSettled([ experiencesPromise ]); if (isMounted) { if (experiencesData.status === "fulfilled") { setExperiences(experiencesData.value); } else { console.error("Error loading experiences:", experiencesData.reason); setExperiences([]); } } } catch (error) { if (isMounted) { console.error("Error loading data:", error); setExperiences([]); } } finally{ if (isMounted) { setLoading(false); } } }; fetchData(); return ()=>{ isMounted = false; }; }, []); const handleFilterChange = React.useCallback((filter)=>{ window.location.href = `/explore?category=${filter === "All" ? "" : filter}`; }, []); const openImageModal = React.useCallback((imageUrl, title)=>{ setSelectedImage({ url: imageUrl, title }); }, []); const closeImageModal = React.useCallback(()=>{ setSelectedImage(null); }, []); if (userLoading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] flex items-center justify-center", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { variant: "auth", message: "Loading...", size: "medium", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this })); } return /*#__PURE__*/ React.createElement(PageWrapper1, { title: "+One", showHeader: true, requireAuth: false, loading: loading, error: error, loadingMessage: "Loading experiences...", className: "text-white", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __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=1200&q=60')" }, __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/50", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 text-center max-w-4xl mx-auto px-4", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl sm:text-5xl md:text-7xl font-bold leading-tight", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFD700]", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "One")), /*#__PURE__*/ React.createElement("style", { jsx: true, __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, ` @supports not (-webkit-background-clip: text) { h1 { color: #FFD700; } } `)), /*#__PURE__*/ React.createElement("p", { className: "text-lg sm:text-xl md:text-2xl mb-6 text-gray-200", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "Discover Cape Town's hidden gems together"), /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base md:text-lg mb-8 text-gray-300 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __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: 128, columnNumber: 11 }, __self: this }, user ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "bg-[#FFD700] text-[#121212] px-6 py-3 rounded-full text-base font-semibold hover:bg-[#E5C200] transition-colors", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, "Explore Experiences"), /*#__PURE__*/ React.createElement("a", { href: "/user/dashboard", className: "border-2 border-[#FFD700] text-[#FFD700] px-6 py-3 rounded-full text-base font-semibold hover:bg-[#FFD700] hover:text-[#121212] transition-colors", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __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-6 py-3 rounded-full text-base font-semibold hover:bg-[#E5C200] transition-colors", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, "Join the Community"), /*#__PURE__*/ React.createElement("a", { href: "/account/signin?callbackUrl=/explore", className: "border-2 border-[#FFD700] text-[#FFD700] px-6 py-3 rounded-full text-base font-semibold hover:bg-[#FFD700] hover:text-[#121212] transition-colors", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, "Browse Experiences")))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#FFD700] text-xl animate-bounce", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down", style: { fontFamily: "FontAwesome, Arial, sans-serif" }, __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "hidden", style: { display: "none" }, __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, "↓")))), /*#__PURE__*/ React.createElement("div", { className: "py-16 px-4 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-center mb-12", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, "Three Simple Steps to Your Next Adventure"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-4", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-[#121212] text-xl", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-3", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, "Discover"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, "Browse unique experiences from local hosts across Cape Town.")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-4", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus text-[#121212] text-xl", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-3", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, "Invite"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, "Send a +One invite via WhatsApp to someone special.")), /*#__PURE__*/ React.createElement("div", { className: "text-center p-4", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-[#121212] text-xl", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-3", __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }, "Experience"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 207, columnNumber: 13 }, __self: this }, "Create memories together at Cape Town's most interesting places.")))), !loading && featuredExperiences.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "py-16 bg-[#1E1E1E]", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, "This Week's Highlights"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-300 mb-10 text-base", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, "Handpicked experiences from Cape Town's vibrant scene"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, featuredExperiences.map((exp)=>/*#__PURE__*/ React.createElement("div", { key: exp.id, className: "bg-[#121212] rounded-xl overflow-hidden hover:transform hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 226, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-40 bg-cover bg-center cursor-pointer relative group", style: { backgroundImage: `url(${exp.image_url ? exp.image_url.replace("w=1000", "w=400") : "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=60"})` }, onClick: ()=>openImageModal(exp.image_url ? exp.image_url.replace("w=400", "w=1200") : "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80", exp.title), __source: { fileName: "", lineNumber: 230, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center", __source: { fileName: "", lineNumber: 244, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-expand text-white text-xl opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 245, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2 line-clamp-1", __source: { fileName: "", lineNumber: 249, columnNumber: 21 }, __self: this }, exp.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-3 text-sm line-clamp-2", __source: { fileName: "", lineNumber: 252, columnNumber: 21 }, __self: this }, exp.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 255, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFD700] font-bold", __source: { fileName: "", lineNumber: 256, columnNumber: 23 }, __self: this }, "R", exp.price), /*#__PURE__*/ React.createElement("a", { href: `/experience/${exp.id}`, className: "bg-[#FFD700] text-[#121212] px-3 py-2 rounded-full text-sm font-semibold hover:bg-[#E5C200] transition-colors", __source: { fileName: "", lineNumber: 259, columnNumber: 23 }, __self: this }, "View Details")))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-10", __source: { fileName: "", lineNumber: 271, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "inline-block bg-[#FFD700] text-[#121212] px-6 py-3 rounded-full font-semibold hover:bg-[#E5C200] transition-colors", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, "Explore All Experiences")))), /*#__PURE__*/ React.createElement("div", { className: "py-16 px-4", __source: { fileName: "", lineNumber: 283, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center", __source: { fileName: "", lineNumber: 284, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 285, columnNumber: 11 }, __self: this }, "Made for Capetonians, by Capetonians"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-300 mb-10", __source: { fileName: "", lineNumber: 288, columnNumber: 11 }, __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-6 text-left", __source: { fileName: "", lineNumber: 294, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] p-6 rounded-xl", __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-[#FFD700] text-xl mb-3", __source: { fileName: "", lineNumber: 296, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-3", __source: { fileName: "", lineNumber: 297, columnNumber: 15 }, __self: this }, "Local Gems"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, "Discover experiences across all of Cape Town's unique neighbourhoods.")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] p-6 rounded-xl", __source: { fileName: "", lineNumber: 304, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-[#FFD700] text-xl mb-3", __source: { fileName: "", lineNumber: 305, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-3", __source: { fileName: "", lineNumber: 306, columnNumber: 15 }, __self: this }, "Community First"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 307, columnNumber: 15 }, __self: this }, "Every experience is hosted by someone passionate about Cape Town."))))), /*#__PURE__*/ React.createElement("div", { className: "py-16 bg-gradient-to-r from-[#FFD700] to-[#FFA500]", __source: { fileName: "", lineNumber: 316, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center px-4", __source: { fileName: "", lineNumber: 317, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, "Ready to explore Cape Town together?"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#121212] mb-6", __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, "Join thousands of Capetonians discovering amazing experiences."), user ? /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "inline-block bg-[#121212] text-[#FFD700] px-6 py-3 rounded-full text-lg font-semibold hover:bg-[#2A2A2A] transition-colors", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this }, "Start Exploring Now") : /*#__PURE__*/ React.createElement("a", { href: "/account/signin?callbackUrl=/explore", className: "inline-block bg-[#121212] text-[#FFD700] px-6 py-3 rounded-full text-lg font-semibold hover:bg-[#2A2A2A] transition-colors", __source: { fileName: "", lineNumber: 333, columnNumber: 13 }, __self: this }, "Join +One Today"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#0A0A0A] border-t border-gray-800", __source: { fileName: "", lineNumber: 343, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 344, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-6 mb-6", __source: { fileName: "", lineNumber: 345, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 346, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-3", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold bg-gradient-to-r from-[#FFD700] to-[#FFA500] bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }, "+One"), /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-2 py-1 bg-green-600 text-white text-xs font-bold rounded-full", __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this }, "🇿🇦 SA")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm mb-4", __source: { fileName: "", lineNumber: 355, columnNumber: 15 }, __self: this }, "Discover Cape Town's hidden gems together."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 359, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "w-8 h-8 bg-[#1E1E1E] rounded-full flex items-center justify-center text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 360, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-f text-sm", __source: { fileName: "", lineNumber: 364, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "w-8 h-8 bg-[#1E1E1E] rounded-full flex items-center justify-center text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 366, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-sm", __source: { fileName: "", lineNumber: 370, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "w-8 h-8 bg-[#1E1E1E] rounded-full flex items-center justify-center text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 372, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-sm", __source: { fileName: "", lineNumber: 376, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 381, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white font-semibold mb-3 text-sm", __source: { fileName: "", lineNumber: 382, columnNumber: 15 }, __self: this }, "Explore"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm", __source: { fileName: "", lineNumber: 383, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 384, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/explore", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 385, columnNumber: 19 }, __self: this }, "All Experiences")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 392, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/explore?category=Food", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 393, columnNumber: 19 }, __self: this }, "Food & Drink")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 400, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/explore?category=Adventure", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 401, columnNumber: 19 }, __self: this }, "Adventures")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 408, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/explore?category=Culture", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 409, columnNumber: 19 }, __self: this }, "Arts & Culture")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 419, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white font-semibold mb-3 text-sm", __source: { fileName: "", lineNumber: 420, columnNumber: 15 }, __self: this }, "Support"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm", __source: { fileName: "", lineNumber: 421, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 422, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/help", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 423, columnNumber: 19 }, __self: this }, "Help Center")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 430, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 431, columnNumber: 19 }, __self: this }, "Contact Us")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 438, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/host", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 439, columnNumber: 19 }, __self: this }, "Become a Host")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/safety", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 447, columnNumber: 19 }, __self: this }, "Safety"))))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-800 pt-6", __source: { fileName: "", lineNumber: 458, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0", __source: { fileName: "", lineNumber: 459, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-xs", __source: { fileName: "", lineNumber: 460, columnNumber: 15 }, __self: this }, "© 2025 +One. All rights reserved. Made with ❤️ in Cape Town."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 text-xs", __source: { fileName: "", lineNumber: 463, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/privacy", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this }, "Privacy"), /*#__PURE__*/ React.createElement("a", { href: "/terms", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 470, columnNumber: 17 }, __self: this }, "Terms"), /*#__PURE__*/ React.createElement("a", { href: "/cookies", className: "text-gray-400 hover:text-[#FFD700] transition-colors", __source: { fileName: "", lineNumber: 476, columnNumber: 17 }, __self: this }, "Cookies")))))), selectedImage && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4", onClick: closeImageModal, __source: { fileName: "", lineNumber: 489, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative max-w-4xl max-h-[90vh] w-full", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 493, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: closeImageModal, className: "absolute top-4 right-4 z-10 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white transition-colors", __source: { fileName: "", lineNumber: 497, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-lg", __source: { fileName: "", lineNumber: 501, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: selectedImage.url, alt: selectedImage.title, className: "w-full h-full object-contain rounded-lg", __source: { fileName: "", lineNumber: 504, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-lg", __source: { fileName: "", lineNumber: 510, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 511, columnNumber: 15 }, __self: this }, selectedImage.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 514, columnNumber: 15 }, __self: this }, "Click anywhere outside to close"))))); }