function MainComponent() { const [email, setEmail] = useState(""); const [status, setStatus] = useState({ loading: false, error: "", success: false }); const handleSubmit = async (e)=>{ e.preventDefault(); setStatus({ loading: true, error: "", success: false }); try { const response = await fetch("/api/newsletter/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email }) }); const data = await response.json(); if (data.error) { setStatus({ loading: false, error: data.error, success: false }); } else { setStatus({ loading: false, error: "", success: true }); setEmail(""); } } catch (err) { setStatus({ loading: false, error: "Something went wrong. Please try again.", success: false }); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-black text-white", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-16", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "logo", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "can", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "CAN"), " ", /*#__PURE__*/ React.createElement("span", { className: "do", __source: { fileName: "", lineNumber: 44, columnNumber: 50 }, __self: this }, "DO"), " ", "Handyman")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-roboto px-3 py-2 rounded-md hover:bg-gray-800", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/gallery", className: "font-roboto px-3 py-2 rounded-md hover:bg-gray-800", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "font-roboto px-3 py-2 rounded-md hover:bg-gray-800", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Contact")))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Stay Updated"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-600 mb-8 font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Subscribe to our newsletter to receive updates about our services, special offers, and home maintenance tips."), status.success ? /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4 text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Thank you for subscribing! You'll receive our updates soon.") : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500", placeholder: "Enter your email", required: true, __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this })), status.error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, status.error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: status.loading, className: "w-full bg-[#0088FF] text-white py-2 px-4 rounded-md hover:bg-[#0066CC] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 transition-colors", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, status.loading ? "Subscribing..." : "Subscribe")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, "We respect your privacy. Unsubscribe at any time."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, ` .logo { font-family: sans-serif; font-weight: bold; font-size: 1.5rem; } .logo .can { color: white; } .logo .do { color: #0088FF; } `)); }