function MainComponent() { const [question, setQuestion] = useState(""); const [answer, setAnswer] = useState(""); const [isShaking, setIsShaking] = useState(false); const [isLoading, setIsLoading] = useState(false); const shakeBall = async ()=>{ if (!question.trim()) return; 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(); setTimeout(()=>{ setAnswer(data.answer); setIsShaking(false); setIsLoading(false); }, 1000); } catch (error) { console.error("Error:", error); setAnswer("🤖 Ugh, my circuits are fried right now. Try again later, human."); setIsShaking(false); setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl w-full space-y-8", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white text-center mb-8", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "**ANTICONTAINMENT SYSTEM**"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "question", value: question, onChange: (e)=>setQuestion(e.target.value), 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-purple-500", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { onClick: shakeBall, className: `relative cursor-pointer w-[400px] h-[400px] mx-auto flex items-center justify-center ${isShaking ? "animate-shake" : ""}`, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-0", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { transform: "translateY(-15px)", width: "140px", height: "140px", display: "flex", alignItems: "center", justifyContent: "center" }, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "0", height: "0", borderLeft: "70px solid transparent", borderRight: "70px solid transparent", borderBottom: "140px solid rgba(0,0,0,0.01)", position: "relative" }, __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-center text-[13px] leading-[1.1] tracking-tighter", style: { position: "absolute", left: "-35px", top: "30px", width: "70px", wordBreak: "break-word", display: "-webkit-box", WebkitLineClamp: "9", WebkitBoxOrient: "vertical", overflow: "hidden" }, __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, isLoading ? "🤔" : answer || "8")))), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/3fd0e96b-452e-4396-9bff-9cd32b0d45d5/-/format/auto/", alt: "Magic Cube", className: "w-full h-full relative z-10", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-center mt-4", __source: { fileName: "", lineNumber: 107, 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: 113, 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; } `)); }