function MainComponent() { const [progress, setProgress] = React.useState(30); const [maxDuration, setMaxDuration] = React.useState(60); const handleProgressChange = (event)=>{ setProgress(Number(event.target.value)); }; const scenes = [ { time: 10, label: 'Opening Scene' }, { time: 25, label: 'First Conflict' }, { time: 40, label: 'Climax' }, { time: 55, label: 'Resolution' } ]; const sceneButtons = scenes.map((scene, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setProgress(scene.time), className: `text-xs font-roboto px-2 py-1 rounded ${progress >= scene.time && progress < (scenes[index + 1]?.time || maxDuration) ? 'bg-blue-600 text-white' : 'bg-gray-200 text-black'}`, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, scene.label)); const videoTimeline = /*#__PURE__*/ React.createElement("div", { className: "flex items-center py-3", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: maxDuration, value: progress, onChange: handleProgressChange, className: "flex-1 h-1.5 bg-gray-300 rounded-full appearance-none cursor-pointer", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "inline-block ml-4 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, `${progress.toFixed(2)} / ${maxDuration.toFixed(2)}`)); const ctaSceneSection = /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-2", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, sceneButtons); const videoDisplaySection = /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full lg:w-[900px] flex flex-col items-center p-5 rounded-md", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { controls: true, className: "max-h-full max-w-full", name: "moviePlayer", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "movie.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), "Your browser does not support the video tag."), videoTimeline, ctaSceneSection); const users = [ { name: 'John Doe', profileImageUrl: 'profile-1.jpg' }, { name: 'Jane Smith', profileImageUrl: 'profile-2.jpg' }, { name: 'Alex Johnson', profileImageUrl: 'profile-3.jpg' } ]; const userItems = users.map((user, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.profileImageUrl, alt: `Profile of ${user.name}`, className: "w-14 h-14 rounded-full", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-black", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, user.name), /*#__PURE__*/ React.createElement("button", { className: "ml-auto bg-blue-500 text-white font-roboto py-1 px-3 rounded-md", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "View profile"))); const welcomeSection = /*#__PURE__*/ React.createElement("div", { className: "bg-black text-white py-10 px-5 rounded-md", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Create your film directly from your imagination."), /*#__PURE__*/ React.createElement("button", { className: "w-1/2 mx-auto mt-5 bg-blue-900 text-white font-roboto py-2 px-4 rounded-md", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "Build my movie")); const chatBotSection = /*#__PURE__*/ React.createElement("div", { className: "bg-white w-[300px] h-[400px] flex flex-col justify-between p-5 rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-3 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "py-2 px-3 bg-white border-t border-gray-200", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "w-full px-4 py-2 border border-gray-300 rounded-md font-roboto", placeholder: "Type a message...", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 ml-2 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "📎"), /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 ml-2 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "✉️")))); const userListSection = /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-tl from-gray-300 to-[#f5f5f5] w-full lg:w-[1200px] h-[400px] p-5 rounded-md shadow-xl", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, userItems)); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col justify-between items-center p-8 bg-gradient-to-tl from-gray-400 to-[#f5f5f5]", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, welcomeSection), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 flex-col lg:flex-row w-full max-w-7xl justify-between items-start space-x-0 lg:space-x-10 space-y-10 lg:space-y-0 pt-10", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:w-auto flex justify-center", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, chatBotSection), /*#__PURE__*/ React.createElement("div", { className: "lg:w-auto flex justify-center", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, videoDisplaySection)), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-7xl mt-10", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, userListSection)); }