function LoadingScreen() { const [darkMode, setDarkMode] = useState(true); const [loading, setLoading] = useState(true); const [selectedItem, setSelectedItem] = useState(null); const [inputText, setInputText] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [analogyResponse, setAnalogyResponse] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const toggleTheme = ()=>{ setDarkMode(!darkMode); }; useEffect(()=>{ document.body.className = darkMode ? "dark bg-gray-900" : "bg-white"; }, [ darkMode ]); useEffect(()=>{ const timer = setTimeout(()=>{ setLoading(false); }, 2000); return ()=>clearTimeout(timer); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setAnalogyResponse(message); setStreamingMessage(""); setIsGenerating(false); } }); const generateAnalogy = async ()=>{ if (!inputText || !selectedItem) return; setIsGenerating(true); setAnalogyResponse(""); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Explain ${inputText} using analogies and references from ${selectedItem.title}. Make it engaging and fun while being educational. Format your response using markdown: - Use # for main headers - Use ## for subheaders - Use ### for section headers - Use ** ** for bold text - Use line breaks between paragraphs` } ], stream: true }) }); handleStreamResponse(response); }; const navItems = [ { title: "Love Island", image: "/placeholder.jpg" }, { title: "Grand Theft Auto 5", image: "/placeholder.jpg" }, { title: "One Piece", image: "/placeholder.jpg" }, { title: "Premier League Football", image: "/placeholder.jpg" }, { title: "Taylor Swift", image: "/placeholder.jpg" } ]; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loading-screen", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loading-spinner", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 100 100", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "50", cy: "50", r: "45", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "loading-text", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "An AI Experiment by Mr.Hackathon")), /*#__PURE__*/ React.createElement("style", { jsx: true, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, ` .loading-spinner { width: 60px; height: 60px; } .loading-spinner svg { animation: rotate 2s linear infinite; } .loading-spinner svg circle { fill: none; stroke: #fff; stroke-width: 5; stroke-dasharray: 100; stroke-dashoffset: 25; animation: draw 2s linear infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes draw { 50% { stroke-dashoffset: -100; } } .loading-text { font-family: 'Roboto' !important; font-size: 24px; color: #fff; font-weight: normal; margin-top: 20px; } `)); } return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col h-screen w-full relative ${darkMode ? "dark bg-gray-900 text-white" : "bg-white text-gray-900"}`, __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 bg-black text-white px-4 py-2 rounded-full font-roboto z-50", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, "An AI Experiment by Mr.Hackathon"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-[300px] p-6 overflow-y-auto ${darkMode ? "bg-gray-800 border-gray-700" : "bg-[#f8f9fa] border-gray-200"}`, __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleTheme, className: `flex items-center px-3 py-2 rounded-lg ${darkMode ? "bg-gray-700 text-white" : "bg-gray-200 text-gray-800"}`, __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, darkMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, "☀️"), "Light Mode") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 144, columnNumber: 19 }, __self: this }, "🌙"), "Dark Mode")))))); } function LoadingScreenStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 158, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LoadingScreen, { __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this })); } function LoadingScreen() { return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loading-screen flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loading-spinner", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 100 100", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "50", cy: "50", r: "45", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "loading-text", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "An AI Experiment by Mr.Hackathon")), /*#__PURE__*/ React.createElement("style", { jsx: true, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, ` .loading-spinner { width: 60px; height: 60px; } .loading-spinner svg { animation: rotate 2s linear infinite; } .loading-spinner svg circle { fill: none; stroke: #fff; stroke-width: 5; stroke-dasharray: 100; stroke-dashoffset: 25; animation: draw 2s linear infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes draw { 50% { stroke-dashoffset: -100; } } .loading-text { font-family: 'Roboto' !important; font-size: 24px; color: #fff; font-weight: normal; margin-top: 20px; } `)); } function LoadingScreen1() { const [darkMode, setDarkMode] = useState(true); const [loading, setLoading] = useState(true); const [selectedItem, setSelectedItem] = useState(null); const [inputText, setInputText] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [analogyResponse, setAnalogyResponse] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const toggleTheme = ()=>{ setDarkMode(!darkMode); }; useEffect(()=>{ document.body.className = darkMode ? "dark bg-gray-900" : "bg-white"; }, [ darkMode ]); useEffect(()=>{ const timer = setTimeout(()=>{ setLoading(false); }, 1500); return ()=>clearTimeout(timer); }, []); const handleItemSelect = async (item)=>{ setLoading(true); setSelectedItem(item); await new Promise((resolve)=>setTimeout(resolve, 1000)); setLoading(false); }; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setAnalogyResponse(message); setStreamingMessage(""); setIsGenerating(false); } }); const generateAnalogy = async ()=>{ if (!inputText || !selectedItem) return; setIsGenerating(true); setAnalogyResponse(""); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Explain ${inputText} using analogies and references from ${selectedItem.title}. Make it engaging and fun while being educational. Format your response using markdown: - Use # for main headers - Use ## for subheaders - Use ### for section headers - Use ** ** for bold text - Use line breaks between paragraphs` } ], stream: true }) }); handleStreamResponse(response); }; const navItems = [ { title: "Love Island", image: "/placeholder.jpg" }, { title: "Grand Theft Auto 5", image: "/placeholder.jpg" }, { title: "One Piece", image: "/placeholder.jpg" }, { title: "Premier League Football", image: "/placeholder.jpg" }, { title: "Taylor Swift", image: "/placeholder.jpg" } ]; if (loading) { return /*#__PURE__*/ React.createElement(LoadingScreen, { __source: { fileName: "", lineNumber: 122, columnNumber: 12 }, __self: this }); } return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col h-screen w-full relative ${darkMode ? "dark bg-gray-900 text-white" : "bg-white text-gray-900"}`, __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 bg-black text-white px-4 py-2 rounded-full font-roboto z-50", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, "An AI Experiment by Mr.Hackathon"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-[300px] p-6 overflow-y-auto ${darkMode ? "bg-gray-800 border-gray-700" : "bg-[#f8f9fa] border-gray-200"}`, __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleTheme, className: `flex items-center px-3 py-2 rounded-lg ${darkMode ? "bg-gray-700 text-white" : "bg-gray-200 text-gray-800"}`, __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, darkMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }, "☀️"), "Light Mode") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, "🌙"), "Dark Mode"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-2xl font-bold font-roboto ${darkMode ? "text-white" : "text-gray-900"}`, __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "Analogise"), /*#__PURE__*/ React.createElement("p", { className: `font-roboto ${darkMode ? "text-gray-400" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "select style")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, navItems.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleItemSelect(item), className: `relative w-full aspect-square rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-all ${selectedItem?.title === item.title ? "shadow-xl ring-2 ring-blue-500" : ""}`, __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `${item.title} style inspiration`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-3", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-roboto text-sm", __source: { fileName: "", lineNumber: 186, columnNumber: 19 }, __self: this }, item.title)))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, selectedItem ? /*#__PURE__*/ React.createElement("div", { className: "relative z-10 p-8", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-roboto mb-8", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, selectedItem.title), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-roboto", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, "Enter Manual Input"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-lg cursor-not-allowed font-roboto ${darkMode ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`, __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, "Enter URL"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-lg cursor-not-allowed font-roboto ${darkMode ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`, __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, "Enter TikTok"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-lg cursor-not-allowed font-roboto ${darkMode ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`, __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }, "Upload PDF")), /*#__PURE__*/ React.createElement("textarea", { placeholder: "Enter your complex concept here (e.g., quantum computing) and we'll explain it in terms of your selected theme...", value: inputText, onChange: (e)=>setInputText(e.target.value), className: `w-full h-40 p-4 rounded-lg resize-none font-roboto focus:ring-2 focus:ring-blue-500 focus:border-transparent ${darkMode ? "bg-gray-700 text-white border-gray-600" : "bg-white text-gray-900 border-gray-300"}`, __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateAnalogy, disabled: loading || !inputText, className: "w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-roboto disabled:bg-gray-300 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, loading ? "Generating..." : "Generate Analogy"), (streamingMessage || analogyResponse) && /*#__PURE__*/ React.createElement("div", { className: `mt-6 p-4 rounded-lg shadow border max-h-[400px] overflow-y-auto ${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-300"}`, __source: { fileName: "", lineNumber: 242, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `font-roboto text-base leading-relaxed whitespace-pre-wrap ${darkMode ? "text-gray-200" : "text-gray-900"}`, __source: { fileName: "", lineNumber: 249, columnNumber: 21 }, __self: this }, (streamingMessage || analogyResponse).split("\n").map((line, i)=>{ if (line.startsWith("# ")) { return /*#__PURE__*/ React.createElement("h1", { key: i, className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 259, columnNumber: 31 }, __self: this }, line.substring(2)); } else if (line.startsWith("## ")) { return /*#__PURE__*/ React.createElement("h2", { key: i, className: "text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 265, columnNumber: 31 }, __self: this }, line.substring(3)); } else if (line.startsWith("### ")) { return /*#__PURE__*/ React.createElement("h3", { key: i, className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 271, columnNumber: 31 }, __self: this }, line.substring(4)); } else { return /*#__PURE__*/ React.createElement("p", { key: i, className: "mb-4", __source: { fileName: "", lineNumber: 277, columnNumber: 31 }, __self: this }, line.split("**").map((part, j)=>j % 2 === 0 ? part : /*#__PURE__*/ React.createElement("strong", { key: j, __source: { fileName: "", lineNumber: 284, columnNumber: 39 }, __self: this }, part))); } }))))) : /*#__PURE__*/ React.createElement("div", { className: `flex items-center justify-center h-full font-roboto ${darkMode ? "text-gray-400" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 297, columnNumber: 13 }, __self: this }, "Select a style to begin"))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-blue-500 text-white px-2 py-1 rounded text-sm font-roboto", __source: { fileName: "", lineNumber: 308, columnNumber: 7 }, __self: this }, "BETA"), /*#__PURE__*/ React.createElement("footer", { className: `w-full py-4 px-6 border-t ${darkMode ? "bg-gray-800 border-gray-700" : "bg-[#f8f9fa] border-gray-200"}`, __source: { fileName: "", lineNumber: 312, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-center font-roboto ${darkMode ? "text-gray-400" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 315, columnNumber: 9 }, __self: this }, "made with ✊🏿 by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.twitter.com/dominiconorton", target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 319, columnNumber: 11 }, __self: this }, "Mr.Hackathon")))); } function LoadingScreen1Story() { return /*#__PURE__*/ React.createElement(LoadingScreen1, { __source: { fileName: "", lineNumber: 334, columnNumber: 10 }, __self: this }); } function MainComponent() { const [darkMode, setDarkMode] = useState(true); const [initialLoading, setInitialLoading] = useState(true); const [selectedItem, setSelectedItem] = useState(null); const [inputText, setInputText] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [analogyResponse, setAnalogyResponse] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const toggleTheme = ()=>{ setDarkMode(!darkMode); }; useEffect(()=>{ document.body.className = darkMode ? "dark bg-gray-900" : "bg-white"; }, [ darkMode ]); useEffect(()=>{ const timer = setTimeout(()=>{ setInitialLoading(false); }, 2000); return ()=>clearTimeout(timer); }, []); const handleItemSelect = async (item)=>{ setSelectedItem(item); }; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setAnalogyResponse(message); setStreamingMessage(""); setIsGenerating(false); } }); const generateAnalogy = async ()=>{ if (!inputText || !selectedItem) return; setIsGenerating(true); setAnalogyResponse(""); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Explain ${inputText} using analogies and references from ${selectedItem.title}. Make it engaging and fun while being educational. Format your response using markdown: - Use # for main headers - Use ## for subheaders - Use ### for section headers - Use ** ** for bold text - Use line breaks between paragraphs` } ], stream: true }) }); handleStreamResponse(response); }; const navItems = [ { title: "Love Island", image: "/placeholder.jpg" }, { title: "Grand Theft Auto 5", image: "/placeholder.jpg" }, { title: "One Piece", image: "/placeholder.jpg" }, { title: "Premier League Football", image: "/placeholder.jpg" }, { title: "Taylor Swift", image: "/placeholder.jpg" } ]; if (initialLoading) { return /*#__PURE__*/ React.createElement(LoadingScreen, { __source: { fileName: "", lineNumber: 75, columnNumber: 12 }, __self: this }); } return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col h-screen w-full relative ${darkMode ? "dark bg-gray-900 text-white" : "bg-white text-gray-900"}`, __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 bg-black text-white px-4 py-2 rounded-full font-roboto z-50", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, "An AI Experiment by Mr.Hackathon"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-[300px] p-6 overflow-y-auto ${darkMode ? "bg-gray-800 border-gray-700" : "bg-[#f8f9fa] border-gray-200"}`, __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleTheme, className: `flex items-center px-3 py-2 rounded-lg ${darkMode ? "bg-gray-700 text-white" : "bg-gray-200 text-gray-800"}`, __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, darkMode ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, "☀️"), "Light Mode") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, "🌙"), "Dark Mode"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-2xl font-bold font-roboto ${darkMode ? "text-white" : "text-gray-900"}`, __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Analogise"), /*#__PURE__*/ React.createElement("p", { className: `font-roboto ${darkMode ? "text-gray-400" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "select style")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, navItems.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleItemSelect(item), className: `relative w-full aspect-square rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-all ${selectedItem?.title === item.title ? "shadow-xl ring-2 ring-blue-500" : ""}`, __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `${item.title} style inspiration`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-3", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-roboto text-sm", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, item.title)))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, selectedItem ? /*#__PURE__*/ React.createElement("div", { className: "relative z-10 p-8", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-roboto mb-8", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, selectedItem.title), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-roboto", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, "Enter Manual Input"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-lg cursor-not-allowed font-roboto ${darkMode ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`, __source: { fileName: "", lineNumber: 156, columnNumber: 19 }, __self: this }, "Enter URL"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-lg cursor-not-allowed font-roboto ${darkMode ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`, __source: { fileName: "", lineNumber: 161, columnNumber: 19 }, __self: this }, "Enter TikTok"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-lg cursor-not-allowed font-roboto ${darkMode ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`, __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, "Upload PDF")), /*#__PURE__*/ React.createElement("textarea", { placeholder: "Enter your complex concept here (e.g., quantum computing) and we'll explain it in terms of your selected theme...", value: inputText, onChange: (e)=>setInputText(e.target.value), className: `w-full h-40 p-4 rounded-lg resize-none font-roboto focus:ring-2 focus:ring-blue-500 focus:border-transparent ${darkMode ? "bg-gray-700 text-white border-gray-600" : "bg-white text-gray-900 border-gray-300"}`, __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateAnalogy, disabled: isGenerating || !inputText, className: "w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-roboto disabled:bg-gray-300 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, isGenerating ? "Generating..." : "Generate Analogy"), (streamingMessage || analogyResponse) && /*#__PURE__*/ React.createElement("div", { className: `mt-6 p-4 rounded-lg shadow border max-h-[400px] overflow-y-auto ${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-300"}`, __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `font-roboto text-base leading-relaxed whitespace-pre-wrap ${darkMode ? "text-gray-200" : "text-gray-900"}`, __source: { fileName: "", lineNumber: 198, columnNumber: 21 }, __self: this }, (streamingMessage || analogyResponse).split("\n").map((line, i)=>{ if (line.startsWith("# ")) { return /*#__PURE__*/ React.createElement("h1", { key: i, className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 208, columnNumber: 31 }, __self: this }, line.substring(2)); } else if (line.startsWith("## ")) { return /*#__PURE__*/ React.createElement("h2", { key: i, className: "text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 214, columnNumber: 31 }, __self: this }, line.substring(3)); } else if (line.startsWith("### ")) { return /*#__PURE__*/ React.createElement("h3", { key: i, className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 220, columnNumber: 31 }, __self: this }, line.substring(4)); } else { return /*#__PURE__*/ React.createElement("p", { key: i, className: "mb-4", __source: { fileName: "", lineNumber: 226, columnNumber: 31 }, __self: this }, line.split("**").map((part, j)=>j % 2 === 0 ? part : /*#__PURE__*/ React.createElement("strong", { key: j, __source: { fileName: "", lineNumber: 233, columnNumber: 39 }, __self: this }, part))); } }))))) : /*#__PURE__*/ React.createElement("div", { className: `flex items-center justify-center h-full font-roboto ${darkMode ? "text-gray-400" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, "Select a style to begin"))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-blue-500 text-white px-2 py-1 rounded text-sm font-roboto", __source: { fileName: "", lineNumber: 257, columnNumber: 7 }, __self: this }, "BETA"), /*#__PURE__*/ React.createElement("footer", { className: `w-full py-4 px-6 border-t ${darkMode ? "bg-gray-800 border-gray-700" : "bg-[#f8f9fa] border-gray-200"}`, __source: { fileName: "", lineNumber: 261, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-center font-roboto ${darkMode ? "text-gray-400" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 264, columnNumber: 9 }, __self: this }, "made with ✊🏿 by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.twitter.com/dominiconorton", target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 268, columnNumber: 11 }, __self: this }, "Mr.Hackathon")))); }