function MainComponent() { const [services, setServices] = React.useState([ { id: 1, name: 'Haircut', description: 'Standard haircut', duration: 30, price: 15 }, { id: 2, name: 'Shave', description: 'Smooth shave service', duration: 15, price: 10 } ]); const [products, setProducts] = React.useState([ { id: 1, name: 'Shampoo', description: 'Hair strengthening shampoo', price: 12 }, { id: 2, name: 'Face Cream', description: 'Hydrating facial cream', price: 18 } ]); const [memberships, setMemberships] = React.useState([ { id: 1, type: 'Gold', discount: 15 } ]); const [appointments, setAppointments] = React.useState([]); const [customerProfiles, setCustomerProfiles] = React.useState([]); const [feedbacks, setFeedbacks] = React.useState([]); const [isBooking, setIsBooking] = React.useState(false); const [selectedServiceId, setSelectedServiceId] = React.useState(''); const [selectedStylist, setSelectedStylist] = React.useState(''); const [appointmentDate, setAppointmentDate] = React.useState(''); const [appointmentTimeSlot, setAppointmentTimeSlot] = React.useState(''); const handleServiceChange = (event)=>setSelectedServiceId(event.target.value); const handleStylistChange = (event)=>setSelectedStylist(event.target.value); const handleDateChange = (event)=>setAppointmentDate(event.target.value); const handleTimeSlotChange = (event)=>setAppointmentTimeSlot(event.target.value); const bookAppointment = ()=>{ setIsBooking(true); // Logic to open calendar and book an appointment }; const serviceCatalogue = services.map((service)=>/*#__PURE__*/ React.createElement("div", { key: service.id, className: "border p-4 m-2 rounded-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, service.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, service.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Duration: ", service.duration, " min"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Price: $", service.price)))); const productList = products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "border p-4 m-2 rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Price: $", product.price), /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] text-white px-4 py-2 rounded-md mt-2", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Add to Cart"))); const handleClickAnimationStyles = { transform: isBooking ? 'scale(0.95)' : 'none', transition: 'transform 0.1s' }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-4xl text-center my-10", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Salon Service Catalogue"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, serviceCatalogue), /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-2xl text-center my-10", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "Products for Sale"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, productList), /*#__PURE__*/ React.createElement("input", { type: "date", name: "appointmentDate", className: "px-4 py-2 border rounded-md my-4 w-full md:w-auto", onChange: handleDateChange, value: appointmentDate, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: bookAppointment, className: "px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-[#28a745] hover:bg-[#218838] focus:outline-none focus:border-[#1e7e34] focus:ring-2 focus:ring-offset-2 focus:ring-[#1e7e34]", style: handleClickAnimationStyles, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "Book Appointment")); }