function MainComponent() { const [formData, setFormData] = useState({ referrerName: "", referrerPhone: "", friendName: "", friendPhone: "", friendEmail: "" }); const [submitted, setSubmitted] = useState(false); const [error, setError] = useState(null); const [submittedData, setSubmittedData] = useState(null); const [linkCopied, setLinkCopied] = useState(false); const [showForm, setShowForm] = useState(true); const formatPhoneNumber = (value)=>{ const digits = value.replace(/\D/g, ""); if (digits.length >= 10) { return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`; } return value; }; const generateTrackingLink = ()=>{ return "https://crosstownpest.com/schedule1"; }; const handleSubmit = async (e)=>{ e.preventDefault(); setError(null); try { const response = await fetch("/api/submit-referral", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...formData, companyId: 1, utm_source: "referral_page", utm_medium: "web", utm_campaign: "friend_referral" }) }); const data = await response.json(); if (!response.ok || data.error) { throw new Error(data.error || "Failed to submit referral"); } setSubmittedData({ ...formData, referralCode: data.referral.referralCode, trackingLink: generateTrackingLink() }); setSubmitted(true); setFormData({ referrerName: "", referrerPhone: "", friendName: "", friendPhone: "", friendEmail: "" }); } catch (err) { console.error(err); setError(err.message || "There was a problem submitting your referral. Please try again."); } }; const handleChange = (e)=>{ let value = e.target.value; if (e.target.name.includes("Phone")) { value = formatPhoneNumber(value); } setFormData({ ...formData, [e.target.name]: value }); }; const handleCopyLink = async ()=>{ const referralLink = generateTrackingLink(); try { await navigator.clipboard.writeText(referralLink); setLinkCopied(true); setTimeout(()=>setLinkCopied(false), 2000); } catch (err) { console.error(err); setError("Could not copy link. Please try again."); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/png", href: "https://ucarecdn.com/ac1866cb-8c5d-4f12-967c-7d744e523674/-/format/auto/", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("title", { __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, "Get $50 Off - Refer a Friend"), /*#__PURE__*/ React.createElement("meta", { name: "description", content: "Refer a friend and you'll both get $50 off your next service!", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:title", content: "Get $50 Off - Refer a Friend", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:description", content: "Refer a friend and you'll both get $50 off your next service!", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:type", content: "website", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/ac1866cb-8c5d-4f12-967c-7d744e523674/-/format/auto/", alt: "Logo", className: "h-16 mx-auto mb-6", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Refer a Friend"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "You get $50, they get $50!")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 mb-6", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-900 mb-4 text-center", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "Quick Share"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCopyLink, className: "w-full flex items-center justify-center bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, linkCopied ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 137, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7", __source: { fileName: "", lineNumber: 143, columnNumber: 23 }, __self: this })), "Copied!") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 154, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3", __source: { fileName: "", lineNumber: 160, columnNumber: 23 }, __self: this })), "Copy $50 Off Link")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const referralLink = generateTrackingLink(); const message = `Hey! I use Crosstown Pest Control and they are awesome! Get $50 off your first service! Schedule here: ${referralLink}`; window.location.href = `sms:&body=${encodeURIComponent(message)}`; }, className: "w-full flex items-center justify-center bg-green-600 text-white py-3 px-4 rounded-md hover:bg-green-700 transition-colors", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z", __source: { fileName: "", lineNumber: 185, columnNumber: 19 }, __self: this })), "Text to a Friend")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 pt-6 border-t border-gray-200", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-700 mb-4", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, "Refer a friend and get your choice of a $50 gift card to one of these retailers when they sign up!"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/7dad54df-ceb9-469f-b115-1f6106268ff1/-/format/auto/", alt: "Amazon Gift Card", className: "w-full h-auto rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/4fb04ad0-7c10-4889-bb5e-d042fccfe570/-/format/auto/", alt: "Home Depot Gift Card", className: "w-full h-auto rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/c86048da-b777-4677-b823-86d4de27d0bd/-/format/auto/", alt: "Target Gift Card", className: "w-full h-auto rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/a600df95-9ed8-45e1-ae37-3e7aff52868d/-/format/auto/", alt: "Walmart Gift Card", className: "w-full h-auto rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, "Want us to follow up with your friend?"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowForm(!showForm), className: "mt-2 text-blue-600 hover:text-blue-800 font-medium flex items-center justify-center mx-auto", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, showForm ? "Hide Form" : "Fill Out Referral Form", /*#__PURE__*/ React.createElement("svg", { className: `w-5 h-5 ml-1 transform transition-transform ${showForm ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this })))), showForm && !submitted && /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white shadow-md rounded-lg p-8", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 260, columnNumber: 19 }, __self: this }, "Your Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 265, columnNumber: 23 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "referrerName", value: formData.referrerName, onChange: handleChange, required: true, autoComplete: "name", className: "mt-1 block w-full rounded-md border border-gray-300 px-3 py-2", __source: { fileName: "", lineNumber: 268, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 278, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 279, columnNumber: 23 }, __self: this }, "Your Phone"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "referrerPhone", value: formData.referrerPhone, onChange: handleChange, required: true, autoComplete: "tel", pattern: "^\\(\\d{3}\\) \\d{3}-\\d{4}$", placeholder: "(555) 555-5555", title: "Please enter a valid phone number in the format (555) 555-5555", className: "mt-1 block w-full rounded-md border border-gray-300 px-3 py-2", __source: { fileName: "", lineNumber: 282, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 298, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 299, columnNumber: 19 }, __self: this }, "Friend's Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 302, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 303, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 304, columnNumber: 23 }, __self: this }, "Friend's Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "friendName", value: formData.friendName, onChange: handleChange, required: true, autoComplete: "off", className: "mt-1 block w-full rounded-md border border-gray-300 px-3 py-2", __source: { fileName: "", lineNumber: 307, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 317, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 318, columnNumber: 23 }, __self: this }, "Friend's Phone"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "friendPhone", value: formData.friendPhone, onChange: handleChange, required: true, autoComplete: "off", pattern: "^\\(\\d{3}\\) \\d{3}-\\d{4}$", placeholder: "(555) 555-5555", title: "Please enter a valid phone number in the format (555) 555-5555", className: "mt-1 block w-full rounded-md border border-gray-300 px-3 py-2", __source: { fileName: "", lineNumber: 321, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 334, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 335, columnNumber: 23 }, __self: this }, "Friend's Email (Optional)"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "friendEmail", value: formData.friendEmail, onChange: handleChange, autoComplete: "off", className: "mt-1 block w-full rounded-md border border-gray-300 px-3 py-2", __source: { fileName: "", lineNumber: 338, columnNumber: 23 }, __self: this }))))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-600 text-center", __source: { fileName: "", lineNumber: 352, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-6 w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 355, columnNumber: 15 }, __self: this }, "Submit Referral")), submitted && submittedData && /*#__PURE__*/ React.createElement("div", { className: "bg-green-50 p-4 rounded-md space-y-4", __source: { fileName: "", lineNumber: 365, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-800 text-center", __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this }, "Thanks for your referral! We'll reach out to", " ", submittedData.friendName, " on your behalf and let them know about their $50 off gift from you."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSubmitted(false); setSubmittedData(null); setShowForm(true); }, className: "w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 371, columnNumber: 15 }, __self: this }, "Submit Another Referral"))))); }