function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [apiResponse, setApiResponse] = React.useState(null); const videoRef = React.useRef(null); const handleFetchChatGptResponse = ()=>{ setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: 'I want to create a landing page to sell a book with a video.' } ], system_prompt: 'Landing page details and book selling strategies' }) }).then((res)=>res.json()).then((result)=>{ setApiResponse(result.result); setIsLoading(false); }).catch(()=>{ setIsLoading(false); }); }; const videoStyles = { maxWidth: '100%', height: 'auto' }; React.useEffect(()=>{ handleFetchChatGptResponse(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f7f7f7] min-h-screen", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 lg:p-8", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-6", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl lg:text-6xl text-[#121212] font-bold", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "The Journey Through Time"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#646464] mt-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "A breakthrough novel that will take you on a historical adventure.")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row items-center justify-center gap-10", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, style: videoStyles, controls: true, poster: "/placeholder-book-cover.jpg", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "/book-trailer.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2 text-center lg:text-left", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#646464] text-xl", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, apiResponse), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1a73e8] text-white mt-6 px-6 py-2 rounded-full transition duration-500 ease-in-out hover:bg-[#154db4]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Buy Now"))))))); }