function MainComponent() { const [matches, setMatches] = React.useState([]); const [credits, setCredits] = React.useState(0); const [selectedMatch, setSelectedMatch] = React.useState(null); const [showPaymentOptions, setShowPaymentOptions] = React.useState(false); React.useEffect(()=>{ const data = [ { id: 1, name: 'John Doe', age: 30, location: 'Cape Town', image: '/profile1.jpg', bio: 'Christian man looking to find a love that honors God.' }, { id: 2, name: 'Jane Smith', age: 28, location: 'Johannesburg', image: '/profile2.jpg', bio: 'Seeking a partner to share my life and faith with.' }, { id: 3, name: 'Michael Brown', age: 32, location: 'Durban', image: '/profile3.jpg', bio: 'My faith is important to me, and I’m looking for someone who feels the same.' } ]; setMatches(data); }, []); const handleSelectMatch = (match)=>{ setSelectedMatch(match); }; const handleTogglePaymentOptions = ()=>{ setShowPaymentOptions((prevShow)=>!prevShow); }; const handleAddCredits = (amount)=>{ setCredits((prevCredits)=>prevCredits + amount); setShowPaymentOptions(false); }; const handleShowInterest = ()=>{ if (credits >= 30 && selectedMatch) { setCredits((prevCredits)=>prevCredits - 30); // Logic to show interest like sending a message or notification } else { alert("You need at least 30 credits to show interest in someone."); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-[#800000] font-roboto my-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Find Faith-Filled Love"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Connect with Christian singles in South Africa eager to find divine love.")), /*#__PURE__*/ React.createElement("section", { className: "flex flex-wrap justify-center my-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, matches.map((match)=>/*#__PURE__*/ React.createElement("div", { key: match.id, className: "max-w-sm rounded overflow-hidden shadow-lg m-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[300px] object-cover", src: match.image, alt: `Profile picture of ${match.name}`, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2 text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, match.name, ", ", match.age), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, match.bio), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-base font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Location: ", match.location)), /*#__PURE__*/ React.createElement("div", { className: "px-6 pt-4 pb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelectMatch(match), className: "bg-[#800000] text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Show Interest"))))), /*#__PURE__*/ React.createElement("aside", { className: "text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#800000] font-roboto my-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Add Credits"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Get 30 credits for R100 to connect with someone special."), /*#__PURE__*/ React.createElement("button", { onClick: handleTogglePaymentOptions, className: "bg-[#800000] text-white font-bold py-2 px-4 rounded my-4 font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Add Credits"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "You have: ", credits, " credits")), showPaymentOptions && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-200 bg-opacity-75 flex justify-center items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-lg max-w-sm w-full", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-[#121212] font-roboto mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Payment Options"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAddCredits(30), className: "block w-full bg-[#800000] text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Pay R100"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAddCredits(100), className: "block w-full bg-[#800000] text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Pay R300"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAddCredits(200), className: "block w-full bg-[#800000] text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Pay R500"), /*#__PURE__*/ React.createElement("button", { onClick: handleTogglePaymentOptions, className: "block w-full bg-gray-400 text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Cancel")))), selectedMatch && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-200 bg-opacity-75 flex justify-center items-center", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-lg max-w-sm w-full", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-[#121212] font-roboto mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Show Interest in ", selectedMatch.name, "?"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "This will cost you 30 credits. You have ", credits, " credits."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-evenly", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleShowInterest, className: "bg-[#800000] text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "Confirm"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedMatch(null), className: "bg-gray-400 text-white font-bold py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Cancel"))))); }