function MainHeader({ user, loading, minimal = false }) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isProfileDropdownOpen, setIsProfileDropdownOpen] = useState(false); const dropdownRef = useRef(null); const [notifications, setNotifications] = useState([]); useEffect(()=>{ function handleClickOutside(event) { if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { setIsProfileDropdownOpen(false); } } document.addEventListener('mousedown', handleClickOutside); return ()=>document.removeEventListener('mousedown', handleClickOutside); }, []); useEffect(()=>{ if (user) { fetch('/api/notifications/list', { method: 'POST' }).then((response)=>response.json()).then((data)=>setNotifications(data.notifications || [])); } }, [ user ]); const handleMarkAsRead = async (notificationId)=>{ try { await fetch('/api/notifications/mark-read', { method: 'POST', body: JSON.stringify({ notificationId }) }); setNotifications(notifications.map((n)=>n.id === notificationId ? { ...n, read_at: new Date().toISOString() } : n)); } catch (error) { console.error('Failed to mark notification as read:', error); } }; const ProfileSection = ({ user })=>{ if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "h-9 w-20 animate-pulse rounded-lg bg-white/20", __source: { fileName: "", lineNumber: 41, columnNumber: 14 }, __self: this }); } if (!user) { return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "rounded-lg bg-white/10 px-4 py-2 text-sm font-semibold text-white hover:bg-white/20", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Sign in"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "rounded-lg bg-white px-4 py-2 text-sm font-semibold text-[#FF0000] hover:bg-gray-100", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Sign up")); } return /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(NotificationBell, { notifications: notifications, onMarkAsRead: handleMarkAsRead, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", ref: dropdownRef, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsProfileDropdownOpen(!isProfileDropdownOpen), className: "flex items-center gap-2 rounded-full focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, user.image ? /*#__PURE__*/ React.createElement("img", { src: user.image, alt: "Profile", className: "h-10 w-10 rounded-full border-2 border-white object-cover", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-white", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-lg text-[#357AFF]", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }))), isProfileDropdownOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 rounded-lg bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }), "My Profile"), /*#__PURE__*/ React.createElement("a", { href: "/friends", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users mr-2", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }), "Friends"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }), "Settings"), /*#__PURE__*/ React.createElement("div", { className: "my-1 border-t border-gray-100", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "block px-4 py-2 text-sm text-red-600 hover:bg-gray-100", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }), "Sign out")))); }; return /*#__PURE__*/ React.createElement("header", { className: "bg-gradient-to-r from-[#FF0000] to-[#357AFF]", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "mx-auto flex h-16 max-w-7xl items-center justify-between px-4 lg:px-8", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, !minimal && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex lg:flex-1", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "-m-1.5 p-1.5", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "h-8 w-auto", src: "https://ucarecdn.com/13707e37-4e68-4827-8033-6dd111c3fa93/-/format/auto/", alt: "CaddieHero logo", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex lg:hidden", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "inline-flex items-center justify-center rounded-md p-2 text-white hover:bg-white/10", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? 'fa-times' : 'fa-bars'} text-xl`, __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "hidden lg:flex lg:gap-x-8", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/courses", className: "text-sm font-semibold text-white hover:text-white/80", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, "Courses"), /*#__PURE__*/ React.createElement("a", { href: "/news", className: "text-sm font-semibold text-white hover:text-white/80", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, "News"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-sm font-semibold text-white hover:text-white/80", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, "About"))), /*#__PURE__*/ React.createElement("div", { className: `${minimal ? 'flex-1 justify-end' : ''} hidden lg:flex lg:flex-1 lg:justify-end`, __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ProfileSection, { user: user, __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }))), !minimal && isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "lg:hidden", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-1 px-4 pb-3 pt-2", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/courses", className: "block rounded-lg px-3 py-2 text-base font-semibold text-white hover:bg-white/10", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "Courses"), /*#__PURE__*/ React.createElement("a", { href: "/news", className: "block rounded-lg px-3 py-2 text-base font-semibold text-white hover:bg-white/10", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, "News"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "block rounded-lg px-3 py-2 text-base font-semibold text-white hover:bg-white/10", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "About"), !loading && !user && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "block rounded-lg px-3 py-2 text-base font-semibold text-white hover:bg-white/10", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, "Sign in"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "block rounded-lg bg-white px-3 py-2 text-base font-semibold text-[#FF0000]", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, "Sign up")), !loading && user && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "block rounded-lg px-3 py-2 text-base font-semibold text-white hover:bg-white/10", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }), "My Profile"), /*#__PURE__*/ React.createElement("a", { href: "/friends", className: "block rounded-lg px-3 py-2 text-base font-semibold text-white hover:bg-white/10", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users mr-2", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }), "Friends"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "block rounded-lg px-3 py-2 text-base font-semibold text-white hover:bg-white/10", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog mr-2", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }), "Settings"), /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "block rounded-lg bg-white px-3 py-2 text-base font-semibold text-[#FF0000]", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }), "Sign out"))))); } function MainHeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 246, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 247, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-lg font-bold", __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(MainHeader, { loading: true, __source: { fileName: "", lineNumber: 249, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 252, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-lg font-bold", __source: { fileName: "", lineNumber: 253, columnNumber: 9 }, __self: this }, "Logged Out State"), /*#__PURE__*/ React.createElement(MainHeader, { loading: false, user: null, __source: { fileName: "", lineNumber: 254, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 257, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-lg font-bold", __source: { fileName: "", lineNumber: 258, columnNumber: 9 }, __self: this }, "Logged In State"), /*#__PURE__*/ React.createElement(MainHeader, { loading: false, user: { name: "John Doe", email: "john@example.com", image: "https://ucarecdn.com/3b8b004b-81a5-432e-88b1-285ceab9b7ca/-/format/auto/" }, __source: { fileName: "", lineNumber: 259, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 269, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-lg font-bold", __source: { fileName: "", lineNumber: 270, columnNumber: 9 }, __self: this }, "Logged In State (No Profile Picture)"), /*#__PURE__*/ React.createElement(MainHeader, { loading: false, user: { name: "John Doe", email: "john@example.com" }, __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 280, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-lg font-bold", __source: { fileName: "", lineNumber: 281, columnNumber: 9 }, __self: this }, "Minimal Header (Logged In)"), /*#__PURE__*/ React.createElement(MainHeader, { loading: false, minimal: true, user: { name: "John Doe", email: "john@example.com", image: "https://ucarecdn.com/3b8b004b-81a5-432e-88b1-285ceab9b7ca/-/format/auto/" }, __source: { fileName: "", lineNumber: 282, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 293, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-lg font-bold", __source: { fileName: "", lineNumber: 294, columnNumber: 9 }, __self: this }, "Minimal Header (Logged Out)"), /*#__PURE__*/ React.createElement(MainHeader, { loading: false, minimal: true, user: null, __source: { fileName: "", lineNumber: 295, columnNumber: 9 }, __self: this }))); } function NotificationBell({ notifications = [], onMarkAsRead }) { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); const unreadCount = notifications.filter((n)=>!n.read_at).length; useEffect(()=>{ const handleClickOutside = (event)=>{ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { setIsOpen(false); } }; document.addEventListener('mousedown', handleClickOutside); return ()=>document.removeEventListener('mousedown', handleClickOutside); }, []); return /*#__PURE__*/ React.createElement("div", { className: "relative", ref: dropdownRef, __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "relative inline-block p-2 hover:bg-[#2E69DE] rounded-full transition-colors", "aria-label": "Notifications", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-white text-xl", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), unreadCount > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, unreadCount > 99 ? '99+' : unreadCount)), isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-80 rounded-lg bg-white shadow-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-gray-100 px-4 py-3", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("div", { className: "max-h-[480px] overflow-y-auto", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, notifications.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "px-4 py-6 text-center text-gray-500", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell-slash mb-2 text-2xl", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "No notifications")) : notifications.map((notification)=>/*#__PURE__*/ React.createElement("div", { key: notification.id, onClick: ()=>{ if (!notification.read_at) { onMarkAsRead(notification.id); } if (notification.link) { window.location.href = notification.link; } }, className: `cursor-pointer border-b border-gray-100 px-4 py-3 transition-colors hover:bg-gray-50 ${!notification.read_at ? 'bg-blue-50' : ''}`, __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-3", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${notification.icon || 'bell'} text-[#357AFF]`, __source: { fileName: "", lineNumber: 61, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 64, columnNumber: 23 }, __self: this }, notification.title), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 65, columnNumber: 23 }, __self: this }, notification.message), /*#__PURE__*/ React.createElement("div", { className: "mt-1 text-xs text-gray-400", __source: { fileName: "", lineNumber: 66, columnNumber: 23 }, __self: this }, new Date(notification.created_at).toLocaleDateString())), !notification.read_at && /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 71, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 w-2 rounded-full bg-blue-500", __source: { fileName: "", lineNumber: 72, columnNumber: 25 }, __self: this })))))))); } function NotificationBellStory() { const [notifications, setNotifications] = useState([ { id: 1, title: "New Friend Request", message: "John Doe wants to be your friend", created_at: "2025-01-15T10:30:00Z", read_at: null, icon: "user-plus", link: "/friends" }, { id: 2, title: "Achievement Unlocked", message: "You've earned the 'Eagle Eye' badge!", created_at: "2025-01-14T15:45:00Z", read_at: null, icon: "trophy", link: "/achievements" }, { id: 3, title: "Course Update", message: "Pine Valley has updated their tee time availability", created_at: "2025-01-13T08:20:00Z", read_at: "2025-01-13T09:00:00Z", icon: "golf-ball", link: "/courses/pine-valley" } ]); const handleMarkAsRead = (notificationId)=>{ setNotifications(notifications.map((notification)=>notification.id === notificationId ? { ...notification, read_at: new Date().toISOString() } : notification)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center bg-[#357AFF]", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(NotificationBell, { notifications: notifications, onMarkAsRead: handleMarkAsRead, __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(NotificationBell, { notifications: [], onMarkAsRead: handleMarkAsRead, __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }))); } function MainComponent() { const { data: user, loading: userLoading } = useUser(); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", password: "" }); const { signUpWithCredentials } = useAuth(); const onSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); if (!formData.firstName || !formData.lastName || !formData.email || !formData.password) { setError("Please fill in all fields"); setLoading(false); return; } try { await signUpWithCredentials({ email: formData.email, password: formData.password, firstName: formData.firstName, lastName: formData.lastName, callbackUrl: "/verify-email", redirect: true }); } catch (err) { const errorMessages = { OAuthSignin: "Couldn't start sign-up. Please try again or use a different method.", OAuthCallback: "Sign-up failed after redirecting. Please try again.", OAuthCreateAccount: "Couldn't create an account with this sign-up option. Try another one.", EmailCreateAccount: "This email can't be used. It may already be registered.", Callback: "Something went wrong during sign-up. Please try again.", OAuthAccountNotLinked: "This account is linked to a different sign-in method. Try using that instead.", CredentialsSignin: "Invalid email or password. If you already have an account, try signing in instead.", AccessDenied: "You don't have permission to sign up.", Configuration: "Sign-up isn't working right now. Please try again later.", Verification: "Your sign-up link has expired. Request a new one." }; setError(errorMessages[err.message] || "Something went wrong. Please try again."); setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-full items-center justify-center p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "w-full max-w-md rounded-2xl bg-white p-8 shadow-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 flex justify-center", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/ac18ead5-b6ba-47ca-99ef-73a7faf43b58/-/format/auto/", alt: "CaddieHero logo", className: "h-12 w-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-center text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Join CaddieHero"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-blue-50 p-4 text-sm text-blue-700", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), "After signing up, you'll need to verify your email address to access all features."), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "First Name"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-white px-4 py-3 focus-within:border-[#357AFF] focus-within:ring-1 focus-within:ring-[#357AFF]", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "firstName", type: "text", value: formData.firstName, onChange: (e)=>setFormData({ ...formData, firstName: e.target.value }), placeholder: "Enter your first name", className: "w-full bg-transparent text-lg outline-none", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Last Name"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-white px-4 py-3 focus-within:border-[#357AFF] focus-within:ring-1 focus-within:ring-[#357AFF]", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "lastName", type: "text", value: formData.lastName, onChange: (e)=>setFormData({ ...formData, lastName: e.target.value }), placeholder: "Enter your last name", className: "w-full bg-transparent text-lg outline-none", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-white px-4 py-3 focus-within:border-[#357AFF] focus-within:ring-1 focus-within:ring-[#357AFF]", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "email", type: "email", value: formData.email, onChange: (e)=>setFormData({ ...formData, email: e.target.value }), placeholder: "Enter your email", className: "w-full bg-transparent text-lg outline-none", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-white px-4 py-3 focus-within:border-[#357AFF] focus-within:ring-1 focus-within:ring-[#357AFF]", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "password", type: "password", value: formData.password, onChange: (e)=>setFormData({ ...formData, password: e.target.value }), className: "w-full rounded-lg bg-transparent text-lg outline-none", placeholder: "Enter your password", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-50 p-3 text-sm text-red-500", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full rounded-lg bg-[#357AFF] px-4 py-3 text-base font-medium text-white transition-colors hover:bg-[#2E69DE] focus:outline-none focus:ring-2 focus:ring-[#357AFF] focus:ring-offset-2 disabled:opacity-50", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, loading ? "Loading..." : "Sign Up"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "Already have a CaddieHero account?", " ", /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-[#357AFF] hover:text-[#2E69DE]", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, "Sign in")))))); }