function ServiceSelectionInterface({ services }) { const priceInfo = { "Drop Card Design": 1250, "Flyer Design": 1250, "Folder Design": 800, "Pop-Up Design": 2500, "Roll-Up Design": 1000, "Animated GIF Design": 1500, "Block Note/Note Pad Design": 500, "Coaster Design": 350, "Water Label Design": 350, "Table Center Piece Design": 1000, "Name Tag Design": 500, "Kit Package/Box Design": 3000, "Backdrop Design": 3000, "Tunnel Design (Exc Content)": 3500, "Registration Desk Design": 1500, "Entrance Gate Design": 1000, "iPad/TV Stand Design": 350, "Direction Sign Design": 750, "Photo Booth Design": 1500, "Side Backdrop/Banner Design": 1000, "Podium Design": 250, "Posters Design": 1000, "Booth Design - Small (3x3)": 4000, "Booth Design - Medium (6x3)": 6000, "Booth Design - Large (6x6)": 7500, "Booth Design - up to 50sqm": 10000, "Resizable Booth Design": 7500, "Landing Page Design and Programming": 7500, "Digital Video (Infographic-2D Animation) - Up to 1 Min": 7500, "Video Footage (Up to 1 Min)": 6000, "Branded Online Webinar - Up to 1000 Attendees": 15000, "Medical Content Creation (Price per slide)": 1500, "Medical Review (Price per slide)": 750, "Advisory Board Meeting": 15000, "Translation Service (English-Arabic)": 350 }; return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, services.map((service)=>/*#__PURE__*/ React.createElement("div", { key: service, className: "border bg-white shadow-md p-4 rounded-md hover:shadow-lg transition-shadow", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg mb-2 text-[#333]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, service), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Price: ", priceInfo[service], " AED")))); } function ServiceSelectionInterfaceStory() { const services = [ "Drop Card Design", "Flyer Design", "Folder Design", "Pop-Up Design", "Roll-Up Design", "Block Note/Note Pad Design", "Coaster Design", "Water Label Design", "Table Center Piece Design", "Name Tag Design" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ServiceSelectionInterface, { services: services, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedServices, setSelectedServices] = React.useState([]); const [totalPrice, setTotalPrice] = React.useState(0); const services = [ { id: 1, category: "Branding & Design", name: "Concept Creation", price: 10000 }, { id: 2, category: "Branding & Design", name: "Theme Design", price: 7500 }, { id: 3, category: "Branding & Design", name: "Visual Design", price: 7500 }, { id: 4, category: "Branding & Design", name: "Subvisual Design", price: 5000 }, { id: 5, category: "Branding & Design", name: "Logo Creation", price: 3000 }, { id: 6, category: "Branding & Design", name: "Invitation Design", price: 2000 }, { id: 7, category: "Branding & Design", name: "E-Invitation HTML", price: 2250 }, { id: 8, category: "Branding & Design", name: "Emailer Design", price: 2250 }, { id: 9, category: "Branding & Design", name: "Emailer HTML", price: 2500 } ]; const handleSelectService = (service)=>{ setSelectedServices((prev)=>[ ...prev, service ]); setTotalPrice((prev)=>prev + service.price); }; const handleRemoveService = (id)=>{ const filteredServices = selectedServices.filter((service)=>service.id !== id); setSelectedServices(filteredServices); const priceOfRemovedService = services.find((service)=>service.id === id).price; setTotalPrice((prev)=>prev - priceOfRemovedService); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4 bg-[#f9fafb]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, services.map((service)=>/*#__PURE__*/ React.createElement("div", { key: service.id, className: "border rounded-lg p-4 bg-white hover:bg-[#eff6ff] cursor-pointer transition-colors", onClick: ()=>handleSelectService(service), __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-[#3b82f6]", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, service.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, service.category), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, service.price, " AED")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 shadow-lg border rounded-lg", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold bg-[#3b82f6] text-white py-4 px-6 rounded-t-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Selected Services"), /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Service"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("th", { className: "p-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Remove"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, selectedServices.map((service)=>/*#__PURE__*/ React.createElement("tr", { key: service.id, className: "border-b last:border-none", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, service.name), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, service.price, " AED"), /*#__PURE__*/ React.createElement("td", { className: "p-2 text-center cursor-pointer", onClick: ()=>handleRemoveService(service.id), __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "❌")))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-right", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold text-[#3b82f6]", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Total: ", totalPrice, " AED"))); }