function MainComponent() { const [question, setQuestion] = useState(""); const [answer, setAnswer] = useState(""); const [isShaking, setIsShaking] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isTitleAnimating, setIsTitleAnimating] = useState(false); const [isCubeThinking, setIsCubeThinking] = useState(false); const askQuestion = async ()=>{ if (!question.trim()) return; // Start animations and thinking state setIsTitleAnimating(true); setIsCubeThinking(true); setIsShaking(true); setIsLoading(true); setAnswer(""); try { const response = await fetch("/api/magic-ball", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ question }) }); if (!response.ok) { throw new Error("Failed to get answer"); } const data = await response.json(); // Wait for GIF animation cycle plus 2 seconds, then show answer and return to static setTimeout(()=>{ setAnswer(data.answer); setIsShaking(false); setIsLoading(false); setIsTitleAnimating(false); setIsCubeThinking(false); }, 5000); } catch (error) { console.error("Error:", error); setAnswer("My circuits are fried right now. Try again later, human."); setIsShaking(false); setIsLoading(false); setIsTitleAnimating(false); setIsCubeThinking(false); } }; const handleKeyPress = (e)=>{ if (e.key === "Enter") { askQuestion(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] flex flex-col items-center pt-2 p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0336f04c-ef7e-4832-b7bc-f4fc52296db5/", alt: "ANTICONTAINMENT SYSTEM", className: `w-full max-w-[800px] ${isTitleAnimating ? "" : "gif-paused"}`, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative -mt-[20px] md:-mt-16 z-10 mb-8", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "question", value: question, onChange: (e)=>setQuestion(e.target.value), onKeyPress: handleKeyPress, placeholder: "Ask your question (if you dare)...", className: "w-full p-3 rounded-lg bg-[#2a2a2a] text-white border border-[#3a3a3a] focus:outline-none focus:border-[#cd7303]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { onClick: askQuestion, className: `relative cursor-pointer w-[320px] h-[320px] md:w-[400px] md:h-[400px] mx-auto transform translate-x-0 md:-translate-x-[10px] flex items-center justify-center ${isShaking ? "animate-shake" : ""}`, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: isCubeThinking ? "https://ucarecdn.com/9995ddca-8955-49b0-8d35-4b2e70d49161/" : "https://ucarecdn.com/7887b0a9-f4b4-4b65-84cf-282714951f8e/-/format/auto/", alt: "Magic Cube", className: "w-full h-full absolute", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", style: { zIndex: 20 }, __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { transform: "translateY(-6px)", width: "140px", height: "140px", display: "flex", alignItems: "center", justifyContent: "center" }, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-center text-[13px] leading-[1.1] tracking-tighter", style: { width: "70px", wordBreak: "break-word", display: "-webkit-box", WebkitLineClamp: "9", WebkitBoxOrient: "vertical", overflow: "hidden" }, __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, isLoading ? "" : answer || "")))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-center mt-4", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, answer ? "There's your answer, take it or leave it!" : "Click the cube after typing your question (I don't have all day)")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, ` @keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(2deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } } .animate-shake { animation: shake 0.5s ease-in-out; } .gif-paused { opacity: 1; animation: none; filter: brightness(1); } `)); }