function QuestionCard({ title, options = [], selectedOption = "", onSelect, animate = true }) { return /*#__PURE__*/ React.createElement("div", { className: `w-full max-w-2xl mx-auto bg-white rounded-2xl shadow-lg p-4 md:p-8 transition-shadow duration-200 ${animate ? "animate-[shuffleIn_0.4s_cubic-bezier(0.4,0,0.2,1)]" : ""}`, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FDFAF2] p-4 md:p-6 rounded-xl mb-4 md:mb-8", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#CC5803] text-xl md:text-2xl font-dm-serif-display tracking-wide text-center uppercase", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, title)), /*#__PURE__*/ React.createElement("div", { className: "space-y-3 md:space-y-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>onSelect(option), className: `w-full p-4 md:p-6 rounded-xl border-2 text-left transition-all duration-200 hover:shadow-md ${selectedOption === option ? "border-[#CC5803] bg-[#CC5803]/5" : "border-gray-200 hover:border-[#CC5803] hover:bg-[#CC5803]/5"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#1B2B65] text-base md:text-lg font-medium", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, option), selectedOption === option && /*#__PURE__*/ React.createElement("span", { className: "text-[#CC5803] text-xl md:text-2xl", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "✓")))))); } function QuestionCardStory() { const [selected, setSelected] = useState(""); // Example questions to show different states return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8 bg-[#FDFAF2]", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuestionCard, { title: "I'M HERE TO...", options: [ "Meet like-minded founders", "Get fresh perspectives" ], selectedOption: selected, onSelect: setSelected, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(QuestionCard, { title: "IN A GROUP, I USUALLY...", options: [ "Lead the conversation", "Listen and observe" ], selectedOption: "Lead the conversation", onSelect: ()=>{}, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(QuestionCard, { title: "I GET EXCITED ABOUT...", options: [ "New ideas and opportunities", "Improving what's working" ], selectedOption: "", onSelect: ()=>{}, animate: false, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this })); } function FormInput({ label, type = "text", value, onChange, error, required = false, placeholder, name }) { return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "absolute -top-2 left-4 bg-white px-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, label, " ", required && /*#__PURE__*/ React.createElement("span", { className: "text-[#CC5803]", __source: { fileName: "", lineNumber: 14, columnNumber: 30 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: type, name: name, value: value, onChange: onChange, placeholder: placeholder, className: `w-full p-4 border-2 rounded-xl bg-white hover:border-[#CC5803] transition-all duration-200 hover:shadow-md ${error ? "border-red-500" : "border-gray-200"}`, required: required, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "mt-1 text-sm text-red-500", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-1", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), error)); } function FormInputStory() { const [values, setValues] = useState({ name: "", email: "", date: "" }); const [errors, setErrors] = useState({}); const handleChange = (e)=>{ setValues({ ...values, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-6 max-w-md mx-auto", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FormInput, { label: "Name", name: "name", value: values.name, onChange: handleChange, required: true, placeholder: "Enter your name", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FormInput, { label: "Email", name: "email", type: "email", value: values.email, onChange: handleChange, required: true, error: errors.email, placeholder: "Enter your email", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FormInput, { label: "Date of Birth", name: "date", type: "date", value: values.date, onChange: handleChange, required: true, error: errors.date, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FormInput, { label: "Phone", name: "phone", type: "tel", placeholder: "Enter your phone number", onChange: handleChange, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this })); } function Button1({ children, variant = "primary", loading = false, disabled = false, type = "button", onClick }) { // Choose the right colors based on the variant const styles = { primary: "bg-[#CC5803] text-white hover:bg-[#CC5803]/90", secondary: "bg-white text-[#CC5803] border-2 border-[#CC5803] hover:bg-[#CC5803]/10" }; return /*#__PURE__*/ React.createElement("button", { type: type, onClick: onClick, disabled: disabled || loading, className: ` inline-flex items-center justify-center px-4 py-2 rounded-lg transition-all duration-200 ${styles[variant]} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${loading ? "cursor-wait" : ""} `, __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), "Loading...") : children); } function Button1Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Button1, { variant: "primary", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Primary Button"), /*#__PURE__*/ React.createElement(Button1, { variant: "secondary", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Secondary Button")), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Button1, { variant: "primary", loading: true, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Loading Button"), /*#__PURE__*/ React.createElement(Button1, { variant: "secondary", loading: true, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Loading Button")), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Button1, { variant: "primary", disabled: true, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Disabled Button"), /*#__PURE__*/ React.createElement(Button1, { variant: "secondary", disabled: true, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Disabled Button"))); } function MainComponent() { const [step, setStep] = useState(1); const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); const [isClosing, setIsClosing] = useState(false); const [formData, setFormData] = useState({ city: "", firstName: "", lastName: "", age: "", email: "", phoneNumber: "", gender: "", linkedinUrl: "", instagramHandle: "", workStyle: "", communicationStyle: "", decisionMaking: "", problemSolving: "", teamDynamics: "", companyName: "", website: "", industry: "", revenueRange: "", dinnerPurpose: "", groupDynamics: "", motivation: "", dinnerOutcome: "", conversationPreference: "" }); const [showWaitlistModal, setShowWaitlistModal] = useState(false); const [showWaitlistThankYou, setShowWaitlistThankYou] = useState(false); const [waitlistCity, setWaitlistCity] = useState(""); const [waitlistEmail, setWaitlistEmail] = useState(""); const [otherCity, setOtherCity] = useState(""); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); const cities = [ { name: "Amsterdam", flag: "🇳🇱", available: true }, { name: "Rotterdam", flag: "🇳🇱", available: false }, { name: "San Francisco", flag: "🇺🇸", available: false }, { name: "Barcelona", flag: "🇪🇸", available: false }, { name: "Berlin", flag: "🇩🇪", available: false }, { name: "London", flag: "🇬🇧", available: false }, { name: "Paris", flag: "🇫🇷", available: false }, { name: "Copenhagen", flag: "🇩🇰", available: false }, { name: "Lisbon", flag: "🇵🇹", available: false }, { name: "Other", flag: "🌍", available: false } ]; const handleWaitlistSubmit = async ()=>{ setError(""); setLoading(true); try { if (!waitlistEmail) { setError("Please enter your email address"); setLoading(false); return; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(waitlistEmail)) { setError("Please enter a valid email address"); setLoading(false); return; } if (waitlistCity === "Other" && !otherCity) { setError("Please enter your city"); setLoading(false); return; } const cityToSubmit = waitlistCity === "Other" ? otherCity : waitlistCity; const response = await fetch("/api/add-to-waitlist", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: waitlistEmail, city: cityToSubmit }) }); const data = await response.json(); if (response.status === 409) { setError("You're already on the waitlist for this city"); return; } if (!response.ok) { throw new Error(data.error || "Failed to join waitlist"); } setShowWaitlistModal(false); setShowWaitlistThankYou(true); setWaitlistEmail(""); setOtherCity(""); setTimeout(()=>{ setShowWaitlistThankYou(false); window.location.href = "/"; }, 5000); } catch (err) { console.error("Waitlist submission error:", err); setError(err.message || "Failed to join waitlist. Please try again."); } finally{ setLoading(false); } }; const handleCityClick = (city)=>{ if (city.name === "Amsterdam") { window.location.href = "/onboarding-details"; } else { setWaitlistCity(city.name); setShowWaitlistModal(true); } }; const handleCloseWaitlistModal = ()=>{ setIsClosing(true); setTimeout(()=>{ setShowWaitlistModal(false); setWaitlistEmail(""); setOtherCity(""); setError(""); setIsClosing(false); }, 200); }; const handleCloseThankYouModal = ()=>{ setIsClosing(true); setTimeout(()=>{ setShowWaitlistThankYou(false); window.location.href = "/"; }, 200); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { href: "https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap", rel: "stylesheet", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/png", href: "https://ucarecdn.com/510b4f56-243f-49f8-ac3b-a185a1c70173/-/format/auto/", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FDFAF2] py-8 px-4", __source: { fileName: "", lineNumber: 154, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 h-2 rounded-full mb-8", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#CC5803] h-2 rounded-full transition-all duration-300", style: { width: "25%" }, __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-3xl font-dm-serif-display text-[#1B2B65]", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "Where do you want to meet inspiring founders?"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-6", __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, cities.map((city)=>/*#__PURE__*/ React.createElement("button", { key: city.name, onClick: ()=>handleCityClick(city), className: `p-3 md:p-6 rounded-lg border-2 bg-white ${city.available ? "border-[#CC5803]" : "border-gray-200"} hover:shadow-md transition-all duration-200 relative w-full`, __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 md:space-x-4", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl md:text-2xl", __source: { fileName: "", lineNumber: 176, columnNumber: 21 }, __self: this }, city.flag), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start", __source: { fileName: "", lineNumber: 177, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#1B2B65] font-medium text-sm md:text-xl", __source: { fileName: "", lineNumber: 178, columnNumber: 23 }, __self: this }, city.name), /*#__PURE__*/ React.createElement("div", { className: "text-[#CC5803] text-xs md:text-sm font-medium mt-1", __source: { fileName: "", lineNumber: 181, columnNumber: 23 }, __self: this }, city.available ? "Join Beta Now" : "Join Waitlist"))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#1B2B65]", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "Already have an account?", " ", /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-[#CC5803] hover:text-[#CC5803]/80 font-medium", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, "Sign In")))), showWaitlistModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", onClick: (e)=>{ if (e.target === e.currentTarget) { handleCloseWaitlistModal(); } }, __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-white p-8 rounded-lg max-w-md w-full mx-4 transition-all duration-200 ${isClosing ? "animate-[fadeOut_200ms_ease-in-out]" : ""}`, __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-dm-serif-display text-[#1B2B65] mb-6", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, "Join the waitlist for ", waitlistCity), error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-3 bg-red-100 text-red-700 rounded-lg", __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", value: waitlistEmail, onChange: (e)=>setWaitlistEmail(e.target.value), placeholder: "Enter your email", className: "w-full p-4 border-2 rounded-xl", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }), waitlistCity === "Other" && /*#__PURE__*/ React.createElement("input", { type: "text", value: otherCity, onChange: (e)=>setOtherCity(e.target.value), placeholder: "Enter your city", className: "w-full p-4 border-2 rounded-xl", __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleWaitlistSubmit, disabled: loading, className: `w-full p-4 bg-[#CC5803] text-white rounded-xl hover:bg-[#CC5803]/90 ${loading ? "opacity-50 cursor-not-allowed" : ""}`, __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, loading ? "Joining..." : "Join Waitlist")))), showWaitlistThankYou && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", onClick: (e)=>{ if (e.target === e.currentTarget) { handleCloseThankYouModal(); } }, __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg max-w-md w-full mx-4 text-center", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl mb-4", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, "🎉"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-dm-serif-display text-[#1B2B65] mb-4", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, "You're on the list!"), /*#__PURE__*/ React.createElement("p", { className: "text-[#1B2B65] mb-6", __source: { fileName: "", lineNumber: 275, columnNumber: 15 }, __self: this }, "We'll let you know when Founders Table launches in", " ", waitlistCity, "."))))); }