function MainComponent() { const [subscribed, setSubscribed] = React.useState(false); const handleSubscribe = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const amount = formData.get('amount'); if (amount === '2') { setSubscribed(true); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212] text-white p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, !subscribed ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubscribe, className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "amount", className: "font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Subscribe for $2 to access the streams"), /*#__PURE__*/ React.createElement("input", { type: "hidden", name: "amount", value: "2", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "rounded bg-[#ffcc00] text-[#121212] px-4 py-2 font-bold font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Pay $2 and Subscribe")) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Welcome to the Stream Zone!"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[640px] w-full h-[360px] m-2 bg-black", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-center text-[#ffcc00] p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Live Stream #1")), /*#__PURE__*/ React.createElement("div", { className: "max-w-[640px] w-full h-[360px] m-2 bg-black", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-center text-[#ffcc00] p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Live Stream #2")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, ` body { margin: 0; padding: 0; } `)); }