function MainComponent() { const [currentPage, setCurrentPage] = React.useState(1); const [loading, setLoading] = React.useState(false); const agentImage = "/agent-image.jpg"; const productImages = [ "/product1.jpg", "/product2.jpg", "/product3.jpg", "/product4.jpg", "/product5.jpg", "/product6.jpg" ]; const recommendedProduct = "/recommended-product.jpg"; const nextPage = ()=>{ setLoading(true); setTimeout(()=>{ setCurrentPage((prev)=>prev + 1); setLoading(false); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-green-50 p-4 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, currentPage === 1 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: agentImage, alt: "Friendly retail associate in a plant-based beauty store", className: "w-64 h-64 rounded-full mb-4 mx-auto", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Hey there! Have you found what you are looking for?"), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600 transition duration-300", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Respond")), currentPage === 2 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "\"I'm looking for a gift for my cousin's birthday.\""), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600 transition duration-300", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Let AI search")), currentPage === 3 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Analyzing products..."), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, productImages.map((img, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: img, alt: `Product ${index + 1}`, className: "w-full h-40 object-cover rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Comparing customer reviews and profit margins..."), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600 transition duration-300", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "View Recommendation")), currentPage === 4 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Recommended Product: Hydrating Lotion"), /*#__PURE__*/ React.createElement("img", { src: recommendedProduct, alt: "Hydrating lotion product", className: "w-64 h-64 object-cover rounded-lg mb-4 mx-auto", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "This hydrating lotion is perfect for your cousin! It's made with all-natural ingredients, deeply moisturizes the skin, and has a light, refreshing scent. It's our best-seller and has received excellent customer reviews for its effectiveness and gentle formula."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(1), className: "bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600 transition duration-300", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Start Over")), loading && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 z-50", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-green-500", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }))); }