function MainComponent() { const [homes, setHomes] = React.useState([]); const [currentHome, setCurrentHome] = React.useState(null); const handleHomeSelection = (home)=>{ setCurrentHome(home); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#F0F8FF] min-h-screen", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FF69B4] text-4xl p-8 text-center", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "Mars Homes Marketplace"), /*#__PURE__*/ React.createElement("div", { className: "px-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, homes.map((home)=>/*#__PURE__*/ React.createElement("div", { key: home.id, className: "bg-white shadow-lg rounded-lg flex flex-col", onClick: ()=>handleHomeSelection(home), __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: home.image, alt: `Martian home located at ${home.location}`, className: "w-full h-[200px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FF69B4] text-xl mb-2", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, home.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, "Location: ", home.location), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "Price: $", home.price))))), currentHome && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-xl rounded-lg overflow-hidden w-full max-w-[600px]", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentHome.image, alt: `Martian home located at ${currentHome.location}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FF69B4] text-2xl mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, currentHome.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Location: ", currentHome.location), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Price: $", currentHome.price), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, currentHome.description), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#FF69B4] text-white font-bold py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Pre-order Home"), /*#__PURE__*/ React.createElement("button", { className: "ml-4 bg-white border border-[#FF69B4] text-[#FF69B4] font-bold py-2 px-4 rounded-full", onClick: ()=>setCurrentHome(null), __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Close"))))); }