function MainComponent() { const [screen, setScreen] = React.useState('login'); const [selectedEpisode, setSelectedEpisode] = React.useState(null); const handleEpisodeSelection = (episode)=>{ setSelectedEpisode(episode); setScreen('player'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-gray-900 text-white", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 text-center bg-gray-800", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl text-yellow-500", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Junza Tv")), screen === 'home' && /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "City of Queens"), /*#__PURE__*/ React.createElement("img", { src: "/path/to/city_of_queens_poster.jpg", alt: "City of Queens poster", className: "w-[400px] h-[600px] mb-4 rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-yellow-500 rounded hover:bg-yellow-600", onClick: ()=>setScreen('episodes'), __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Watch Now"))), screen === 'login' && /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-gray-800 p-6 rounded-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full p-2 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", className: "w-full p-2 rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-yellow-500 rounded hover:bg-yellow-600", onClick: ()=>setScreen('home'), __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Login")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-sm text-yellow-500", onClick: ()=>setScreen('signup'), __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Don't have an account? Sign up")))), screen === 'signup' && /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-gray-800 p-6 rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Sign Up"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "signupEmail", className: "w-full p-2 rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "signupPassword", className: "w-full p-2 rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-yellow-500 rounded hover:bg-yellow-600", onClick: ()=>setScreen('payment'), __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Sign Up")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-sm text-yellow-500", onClick: ()=>setScreen('login'), __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Already have an account? Login")))), screen === 'payment' && /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] bg-gray-800 p-6 rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Payment"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "Card Number"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardNumber", className: "w-full p-2 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, "Expiry Date"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "expiryDate", className: "w-full p-2 rounded", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, "CVC"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cvc", className: "w-full p-2 rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-yellow-500 rounded hover:bg-yellow-600", onClick: ()=>setScreen('home'), __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Submit")))), screen === 'episodes' && /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "City of Queens - Episode List"), /*#__PURE__*/ React.createElement("ul", { className: "w-full", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, [ ...Array.from({ length: 8 }) ].map((_, idx)=>{ const episode = idx + 1; return /*#__PURE__*/ React.createElement("li", { key: episode, className: "p-4 mb-2 bg-gray-700 rounded", __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-lg text-yellow-500", onClick: ()=>handleEpisodeSelection(episode), __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }, "Episode ", episode)); })))), screen === 'player' && selectedEpisode && /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px]", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4 text-center", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Watch City of Queens - Episode ", selectedEpisode), /*#__PURE__*/ React.createElement("video", { className: "w-full", controls: true, __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: `/path/to/city_of_queens_episode_${selectedEpisode}.mp4`, type: "video/mp4", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }))))); }