function MainComponent() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "" }); const [validationErrors, setValidationErrors] = useState({}); const { signUpWithCredentials } = useAuth(); const callbackUrl = "/"; const validateForm = ()=>{ const errors = {}; if (!formData.name.trim()) { errors.name = "Name is required"; } if (!formData.email) { errors.email = "Email is required"; } else if (!/\S+@\S+\.\S+/.test(formData.email)) { errors.email = "Please enter a valid email address"; } if (!formData.password) { errors.password = "Password is required"; } else if (formData.password.length < 8) { errors.password = "Password must be at least 8 characters long"; } if (formData.password !== formData.confirmPassword) { errors.confirmPassword = "Passwords do not match"; } return errors; }; const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); setValidationErrors((prev)=>({ ...prev, [name]: "" })); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); setValidationErrors({}); const errors = validateForm(); if (Object.keys(errors).length > 0) { setValidationErrors(errors); setLoading(false); return; } try { await signUpWithCredentials({ name: formData.name, email: formData.email, password: formData.password, callbackUrl, 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 flex flex-col", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "flex-1 pt-16", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-h-[600px] relative", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/hero-barkley.jpg", alt: "Barkley, a happy red-haired goldendoodle, playing in a flower field", className: "w-full h-full object-cover brightness-50", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-b from-black/80 via-black/70 to-black/80", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/95 p-8 rounded-lg shadow-2xl max-w-md w-full mx-4", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-3xl text-[#8B4513] text-center mb-6", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Join Barkley's Pack!"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", value: formData.name, onChange: handleChange, className: `w-full px-4 py-2 border rounded-md font-roboto focus:ring-[#2EC4B6] focus:border-[#2EC4B6] ${validationErrors.name ? "border-red-500" : "border-gray-300"}`, placeholder: "Enter your name", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }), validationErrors.name && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-xs text-red-500", __source: { fileName: "", lineNumber: 135, columnNumber: 21 }, __self: this }, validationErrors.name)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", value: formData.email, onChange: handleChange, className: `w-full px-4 py-2 border rounded-md font-roboto focus:ring-[#2EC4B6] focus:border-[#2EC4B6] ${validationErrors.email ? "border-red-500" : "border-gray-300"}`, placeholder: "you@example.com", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }), validationErrors.email && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-xs text-red-500", __source: { fileName: "", lineNumber: 162, columnNumber: 21 }, __self: this }, validationErrors.email)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", value: formData.password, onChange: handleChange, className: `w-full px-4 py-2 border rounded-md font-roboto focus:ring-[#2EC4B6] focus:border-[#2EC4B6] ${validationErrors.password ? "border-red-500" : "border-gray-300"}`, placeholder: "At least 8 characters", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }), validationErrors.password && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-xs text-red-500", __source: { fileName: "", lineNumber: 189, columnNumber: 21 }, __self: this }, validationErrors.password)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "confirmPassword", className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, "Confirm Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "confirmPassword", name: "confirmPassword", value: formData.confirmPassword, onChange: handleChange, className: `w-full px-4 py-2 border rounded-md font-roboto focus:ring-[#2EC4B6] focus:border-[#2EC4B6] ${validationErrors.confirmPassword ? "border-red-500" : "border-gray-300"}`, placeholder: "Confirm your password", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }), validationErrors.confirmPassword && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-xs text-red-500", __source: { fileName: "", lineNumber: 216, columnNumber: 21 }, __self: this }, validationErrors.confirmPassword)), error && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-50 p-3 text-sm text-red-500 font-roboto", __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-[#8B4513] text-white py-3 rounded-md font-roboto hover:bg-[#723A0F] transition-colors focus:outline-none focus:ring-2 focus:ring-[#2EC4B6] focus:ring-offset-2 disabled:opacity-50", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 234, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 235, columnNumber: 23 }, __self: this }), "Creating your account...") : "Create Account")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, "Already have an account?", " ", /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-[#2EC4B6] hover:text-[#2A9E94] font-semibold", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }, "Sign In")))))))); }