function MainComponent() { const [selectedDate, setSelectedDate] = React.useState(new Date().toISOString().split('T')[0]); const [email, setEmail] = React.useState(''); const [phoneNumber, setPhoneNumber] = React.useState(''); const [comment, setComment] = React.useState(''); const [currentSlide, setCurrentSlide] = React.useState(0); const [blockedDates, setBlockedDates] = React.useState([ '2023-05-17', '2023-05-18' ]); const photoFolder = '/candy_images'; const photos = [ `${photoFolder}/slide1.jpg`, `${photoFolder}/slide2.jpg`, `${photoFolder}/slide3.jpg` ]; const products = [ { id: 1, name: 'Chocolate Bar', description: 'Rich and creamy milk chocolate bar.', price: 2.99, photo: `${photoFolder}/product1.jpg` }, { id: 2, name: 'Candy Cane', description: 'Red and white-striped peppermint-flavored candy.', price: 0.99, photo: `${photoFolder}/product2.jpg` }, { id: 3, name: 'Lollipop', description: 'Large, colorful, and fruity lollipop.', price: 1.49, photo: `${photoFolder}/product3.jpg` } ]; React.useEffect(()=>{ const interval = setInterval(()=>{ setCurrentSlide((prevSlide)=>(prevSlide + 1) % photos.length); }, 3000); return ()=>clearInterval(interval); }, [ photos.length ]); const currentPhoto = photos[currentSlide]; const currentDate = new Date().toISOString().split('T')[0]; const processingLeadTime = 3; const minDate = new Date(new Date().setDate(new Date().getDate() + processingLeadTime)).toISOString().split('T')[0]; const isDateBlocked = blockedDates.includes(selectedDate); const placeOrderButtonDisabled = !email || isDateBlocked; const handleSubmit = (event)=>{ event.preventDefault(); if (email) { fetch('https://api.emailservice.com/send', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ to: 'knightscandyshop@gmail.com', subject: 'New Candy Order', html: `New order from ${email} for pick up on ${selectedDate}. Comments: ${comment}` }) }); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f9f9f9]", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Knights Candy Shop Logo", className: "w-24 h-24 mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-5xl font-crimson-text text-[#5D3A3A] my-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Knights Candy Shop"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center px-4 py-2 overflow-hidden", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentPhoto, alt: `Candy slide ${currentSlide + 1}`, className: "object-cover w-full md:w-auto h-auto md:h-[300px]", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mt-4 bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Email Address *"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", required: true, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phoneNumber", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phoneNumber", value: phoneNumber, onChange: (e)=>setPhoneNumber(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col my-4", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "pickupDate", value: selectedDate, min: minDate, onChange: (e)=>setSelectedDate(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "comments", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Comments (color/design preferences)"), /*#__PURE__*/ React.createElement("textarea", { name: "comments", value: comment, onChange: (e)=>setComment(e.target.value), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }))))); }