function MainComponent() { const title = "H2H Fantasy Sports"; const [teamName, setTeamName] = React.useState(''); const [email, setEmail] = React.useState(''); const [depositAmount, setDepositAmount] = React.useState(''); const [matched, setMatched] = React.useState(false); const [winner, setWinner] = React.useState(false); const handleTeamNameChange = (event)=>{ setTeamName(event.target.value); }; const handleEmailChange = (event)=>{ setEmail(event.target.value); }; const handleDepositChange = (event)=>{ setDepositAmount(event.target.value); }; const handleMatch = ()=>{ setMatched(true); }; const handlePlayNow = (event)=>{ event.preventDefault(); // Matching logic and setting winner would be implemented here. }; const handleCashOut = ()=>{ // Cash out logic would be implemented here. setWinner(false); setMatched(false); // Reset deposit amount to simulate withdrawal. setDepositAmount(''); }; const handleContinuePlaying = ()=>{ // Continue playing logic would be implemented here. setWinner(false); // No reset to deposit as user is continuing with the same amount. }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f8f9fa] p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-[#343a40] mb-4 md:mb-6 font-courier", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, title), !matched && !winner && /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center w-full max-w-lg space-y-3", onSubmit: handlePlayNow, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full px-4 py-2 border rounded-md text-[#343a40] border-[#ced4da] focus:outline-none focus:border-[#007bff] transition duration-300", type: "text", placeholder: "Create your team name...", name: "teamName", value: teamName, onChange: handleTeamNameChange, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full px-4 py-2 border rounded-md text-[#343a40] border-[#ced4da] focus:outline-none focus:border-[#007bff] transition duration-300", type: "email", placeholder: "Enter your email...", name: "email", value: email, onChange: handleEmailChange, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "w-full px-4 py-2 border rounded-md text-[#343a40] border-[#ced4da] focus:outline-none focus:border-[#007bff] transition duration-300", name: "depositAmount", value: depositAmount, onChange: handleDepositChange, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Select deposit amount..."), /*#__PURE__*/ React.createElement("option", { value: "10", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "$10"), /*#__PURE__*/ React.createElement("option", { value: "25", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "$25"), /*#__PURE__*/ React.createElement("option", { value: "50", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "$50"), /*#__PURE__*/ React.createElement("option", { value: "100", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "$100")), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#007bff] hover:bg-[#0056b3] text-white px-4 py-2 rounded-md transition duration-300", type: "submit", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Play Now")), matched && !winner && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-[#343a40]", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "You are matched! Ready to play?"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] hover:bg-[#218838] text-white px-4 py-2 rounded-md transition duration-300", onClick: handleMatch, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Start Match")), winner && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-[#343a40]", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Congratulations! You've won!"), /*#__PURE__*/ React.createElement("p", { className: "text-base font-normal", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "You can cash out for 1.5x of your initial deposit."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffc107] hover:bg-[#e0a800] text-white px-4 py-2 rounded-md transition duration-300", onClick: handleCashOut, __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Cash Out"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#17a2b8] hover:bg-[#138496] text-white px-4 py-2 rounded-md transition duration-300", onClick: handleContinuePlaying, __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Continue Playing"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./images/fantasy-matchup.jpg", alt: "Two fantasy teams going head to head", className: "w-[320px] h-[180px] sm:w-[480px] sm:h-[270px] md:w-[640px] md:h-[360px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }))); }