function MainComponent() { const [hasWatchedVideo, setHasWatchedVideo] = React.useState(false); const handleVideoEnd = ()=>{ setHasWatchedVideo(true); }; const videoSection = /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[600px] lg:w-[800px] mx-auto", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "w-full rounded-md", controls: true, onEnded: handleVideoEnd, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "./cat-video.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), "Your browser does not support the video tag.")); const purchaseSection = /*#__PURE__*/ React.createElement("div", { className: `max-w-md mx-auto mt-8 fade-in-animation ${hasWatchedVideo ? '' : 'hidden'}`, __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center text-[#333333] font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Purchase This Cat"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-[#555555] mt-2 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "You can now proceed to purchase your favorite feline friend."), /*#__PURE__*/ React.createElement("form", { className: "mt-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-lg font-roboto text-[#555555]", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "mt-2 p-2 w-full border rounded-md", placeholder: "John Doe", required: true, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-lg font-roboto text-[#555555]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: "mt-2 p-2 w-full border rounded-md", placeholder: "john@example.com", required: true, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-[#3399ff] text-white rounded-md font-roboto hover:bg-[#2877cc]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart mr-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), "Buy Now")))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, videoSection, hasWatchedVideo ? purchaseSection : /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#555555] font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Please watch the video to unlock the purchase option 🐾"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .fade-in-animation { animation: fade-in 1s forwards; } `)); }