function MainComponent() { const [inputText, setInputText] = useState(""); const [outputText, setOutputText] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(""); const handleTranslation = useCallback(async (mode)=>{ if (!inputText.trim()) { setError("Please enter some text first"); return; } setIsLoading(true); setError(""); const prompts = { toEmoji: `Convert this text to appropriate emojis, using only emojis: ${inputText}`, toText: `Convert these emojis to descriptive text, explaining what they represent: ${inputText}`, addEmojis: `Add relevant emojis throughout this text, keeping the original text and adding appropriate emojis: ${inputText}` }; try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: prompts[mode] }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setOutputText(data.message); } catch (err) { setError("Failed to translate. Please try again."); console.error("Translation error:", err); } finally{ setIsLoading(false); } }, [ inputText ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white/0 p-6 md:p-12", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: inputText, onChange: (e)=>setInputText(e.target.value), placeholder: "Enter your text here...", className: "w-full h-32 p-4 border border-gray-300 rounded-lg bg-white/50 text-gray-900 font-inter focus:outline-none focus:border-gray-900 transition-all duration-200 shadow-md", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTranslation("toEmoji"), disabled: isLoading, className: "w-full px-6 py-3 bg-gray-900 text-white rounded-lg font-inter hover:bg-gray-800 transition-all duration-200 shadow-sm hover:shadow-md", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Text to Emojis"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTranslation("toText"), disabled: isLoading, className: "w-full px-6 py-3 bg-gray-900 text-white rounded-lg font-inter hover:bg-gray-800 transition-all duration-200 shadow-sm hover:shadow-md", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Emojis to Text"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTranslation("addEmojis"), disabled: isLoading, className: "w-full px-6 py-3 bg-gray-900 text-white rounded-lg font-inter hover:bg-gray-800 transition-all duration-200 shadow-sm hover:shadow-md", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Add Emojis to Text")), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "h-32 border border-gray-300 rounded-lg p-4 bg-white/50 shadow-md", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-full", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-gray-900", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }))) : /*#__PURE__*/ React.createElement("div", { className: "min-h-[8rem] border border-gray-300 rounded-lg p-4 bg-white/50 text-gray-900 font-inter shadow-md", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, error ? /*#__PURE__*/ React.createElement("p", { className: "text-red-600 font-medium", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, error) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, outputText || "Translation will appear here...")), outputText && !error && /*#__PURE__*/ React.createElement("div", { className: "mt-12 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl p-8 shadow-lg border border-blue-200", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-6", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "Ready to boost your social media game? 🚀"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-700 max-w-xl mx-auto", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Love these emojis? Schedule and post them across TikTok, Instagram, Twitter, and more - in seconds!"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 py-4", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-700 bg-white/80 px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, "⚡"), " Schedule Posts"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-700 bg-white/80 px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, "🔄"), " Cross-Platform Posting"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-700 bg-white/80 px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 123, columnNumber: 19 }, __self: this }, "📊"), " Analytics")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center pt-4", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.post-boost.com/", target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center px-8 py-4 bg-gray-900 text-white rounded-lg font-semibold hover:bg-gray-800 transition-all duration-200 transform hover:scale-105", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, "Try PostBoost Free", /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, "→"))), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 pt-4", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "No credit card required • 7-day free trial • Cancel anytime"))))); }