function MainComponent() { const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", message: "" }); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const [loading, setLoading] = useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); setSuccess(false); try { const response = await fetch("/api/slack-webhook", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) }); if (!response.ok) { throw new Error("Failed to send message"); } setSuccess(true); setFormData({ firstName: "", lastName: "", email: "", message: "" }); } catch (err) { console.error(err); setError("Failed to send message. Please try again."); } finally{ setLoading(false); } }; const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 flex flex-col", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white dark:bg-gray-900 shadow-md p-4 sticky top-0 z-50", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/5f1ce6ab-de9a-4c74-baab-34e62ef457dd/-/format/auto/", alt: "Rick Astley Logo", className: "w-16 h-16 object-cover", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Rickroll Link Generator")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/generador-enlaces", className: "text-gray-900 dark:text-white font-inter font-bold hover:text-gray-700 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/video-trailer", className: "text-gray-900 dark:text-white font-inter font-bold hover:text-gray-700 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Video Trailer"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-gray-900 dark:text-white font-inter font-bold hover:text-gray-700 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("a", { href: "/about-us", className: "text-gray-900 dark:text-white font-inter font-bold hover:text-gray-700 dark:hover:text-gray-300", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "About Us")))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 md:p-8", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-black mb-8 text-center font-inter", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("div", { className: "bg-black p-8 rounded-lg", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "firstName", className: "block text-white mb-2 font-inter", __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, "First Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "firstName", name: "firstName", value: formData.firstName, onChange: handleChange, required: true, className: "w-full px-4 py-2 rounded-md border border-gray-600 bg-gray-800 text-white font-inter", placeholder: "John", __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "lastName", className: "block text-white mb-2 font-inter", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this }, "Last Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "lastName", name: "lastName", value: formData.lastName, onChange: handleChange, required: true, className: "w-full px-4 py-2 rounded-md border border-gray-600 bg-gray-800 text-white font-inter", placeholder: "Doe", __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-white mb-2 font-inter", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", value: formData.email, onChange: handleChange, required: true, className: "w-full px-4 py-2 rounded-md border border-gray-600 bg-gray-800 text-white font-inter", placeholder: "your@email.com", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-white mb-2 font-inter", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", value: formData.message, onChange: handleChange, required: true, rows: "4", className: "w-full px-4 py-2 rounded-md border border-gray-600 bg-gray-800 text-white font-inter", placeholder: "Your message here...", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-400 text-center font-inter", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, error), success && /*#__PURE__*/ React.createElement("div", { className: "text-green-400 text-center font-inter", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }, "Thank you for your message! We'll get back to you soon."), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-black text-white font-inter px-8 py-4 rounded-md text-lg border border-white hover:bg-gray-900 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, loading ? "Sending..." : "Send")))))); }