function MainComponent() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [date, setDate] = useState(""); const [time, setTime] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(false); const [response, setResponse] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [showAppointy, setShowAppointy] = useState(false); const [validationError, setValidationError] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (msg)=>{ setResponse(msg); window.location.href = "https://booking.appointy.com/en-US/apexbarbering/bookings/service"; } }); const validateForm = ()=>{ if (!name || !email || !date || !time || !message) { setValidationError("Please fill out all required fields"); return false; } setValidationError(""); return true; }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!validateForm()) return; setLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Process this booking request and provide a confirmation: Name: ${name}, Email: ${email}, Date: ${date}, Time: ${time}, Message: ${message}. Please confirm the details and provide a friendly response.` } ], stream: true }) }); await handleStreamResponse(response); } catch (error) { console.error(error); setResponse("Sorry, there was an error processing your booking. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-900 to-black text-white p-4 md:p-8", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/729927c9-4123-494e-9aa8-8fec63dad367/-/format/auto/", alt: "Apex Barbering Logo", className: "w-24 h-24 animate-bounce", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-100", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Book Your Appointment")), showAppointy ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-gray-900 to-black border-2 border-gray-800 p-6 rounded-xl animate-fadeIn animate-glow mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-gray-100 mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Continue with Appointy"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Please complete your booking in the system below:")), /*#__PURE__*/ React.createElement("a", { href: "https://booking.appointy.com/en-US/apexbarbering/bookings/service", target: "_blank", rel: "noopener noreferrer", className: "block w-full", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://e1a4c9d0d2f9f737c5e1.ucr.io/https://api.urlbox.io/v1/NTYqWgJv5s0qDIxN/jpeg?url=https%3A%2F%2Fbooking.appointy.com%2Fen-US%2Fapexbarbering%2Fbookings%2Fservice&full_page=true&width=1024&max_height=2048&quality=80", alt: "Appointy Booking Interface", className: "w-full border-2 border-gray-800 rounded-xl animate-fadeIn animate-glow hover:opacity-90 transition-opacity", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }))) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6 bg-gradient-to-b from-gray-900 to-black border-2 border-gray-800 p-8 rounded-xl shadow-xl animate-fadeIn animate-glow", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, validationError && /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-red-900/50 border border-red-500 rounded text-red-200 mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, validationError), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-400", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), className: "w-full p-2 rounded bg-gray-900 border border-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-700 text-gray-100", required: true, __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-400", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full p-2 rounded bg-gray-900 border border-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-700 text-gray-100", required: true, __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-400", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: date, onChange: (e)=>setDate(e.target.value), className: "w-full p-2 rounded bg-gray-900 border border-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-700 text-gray-100", required: true, __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-400", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("input", { type: "time", name: "time", value: time, onChange: (e)=>setTime(e.target.value), className: "w-full p-2 rounded bg-gray-900 border border-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-700 text-gray-100", required: true, __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-400", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { name: "message", value: message, onChange: (e)=>setMessage(e.target.value), className: "w-full p-2 rounded bg-gray-900 border border-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-700 text-gray-100 h-32", required: true, __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-gray-800 text-gray-100 py-2 px-4 rounded hover:bg-gray-700 transition duration-300 font-bold", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, loading ? "Processing..." : "Book Now")), (streamingMessage || response) && !showAppointy && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-6 bg-gradient-to-b from-gray-900 to-black border-2 border-gray-800 rounded-xl animate-fadeIn animate-glow", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-gray-100 mb-4", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "Processing Your Booking:"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, streamingMessage || response))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 183, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes glow { 0% { box-shadow: 0 0 5px rgba(156, 163, 175, 0.5); } 50% { box-shadow: 0 0 20px rgba(156, 163, 175, 0.5); } 100% { box-shadow: 0 0 5px rgba(156, 163, 175, 0.5); } } .animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; } .animate-glow { animation: glow 2s infinite; } input, textarea { animation: glow 2s infinite; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } `)); }