function MainComponent() { const [question, setQuestion] = React.useState(''); const [spread, setSpread] = React.useState('oneOracle'); const [reading, setReading] = React.useState(''); const [advice, setAdvice] = React.useState(''); const [loading, setLoading] = React.useState(false); const [cardImage, setCardImage] = React.useState(''); const getRandomPastelColor = ()=>{ const hue = Math.floor(Math.random() * 360); return `hsl(${hue}, 100%, 85%)`; }; const drawCards = async ()=>{ setLoading(true); try { const imageResponse = await fetch(`/integrations/dall-e-3/?prompt=mystical tarot card for ${spread} spread, ethereal, dreamlike`); const imageData = await imageResponse.json(); setCardImage(imageData.data[0]); const readingResponse = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `Provide a tarot reading for the question: "${question}" using a ${spread} spread. Include card interpretation and its relation to the question. Use a warm, encouraging tone.` } ] }) }); const readingData = await readingResponse.json(); setReading(readingData.choices[0].message.content); const adviceResponse = await fetch('/integrations/google-gemini/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `Based on this tarot reading: "${readingData.choices[0].message.content}", provide personalized advice and guidance in English. Use a warm, encouraging tone.` } ] }) }); const adviceData = await adviceResponse.json(); setAdvice(adviceData.choices[0].message.content); } catch (error) { console.error('Error fetching tarot reading:', error); setReading('An error occurred while fetching your reading.'); setAdvice('Unable to provide advice at this time.'); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-blue-900 to-purple-900 flex items-center justify-center p-4 relative overflow-hidden", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-50", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[url('/jellyfish.png')] bg-cover bg-center animate-float", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent to-blue-900 opacity-50", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-20 rounded-xl shadow-lg p-8 max-w-3xl w-full relative z-10", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-6 text-white font-crimson-text", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "🌌 Wheel of Destiny 🌌"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center mb-4 text-white font-crimson-text", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "🔮 Destiny Decoder 🔮"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-center mb-6 text-white font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Unveil your destiny through the mystical tarot."), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-30 rounded-lg p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2 text-black font-crimson-text", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Ask Your Question"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "question", placeholder: "What does my future hold?", className: "w-full p-2 rounded border border-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-600 font-roboto", value: question, onChange: (e)=>setQuestion(e.target.value), __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-30 rounded-lg p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2 text-black font-crimson-text", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Select Your Spread"), /*#__PURE__*/ React.createElement("select", { name: "spread", className: "w-full p-2 rounded border border-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-600 font-roboto", value: spread, onChange: (e)=>setSpread(e.target.value), __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "oneOracle", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "One Oracle"), /*#__PURE__*/ React.createElement("option", { value: "threeCard", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Three Card Spread"), /*#__PURE__*/ React.createElement("option", { value: "celticCross", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Celtic Cross Spread"))), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-300 font-roboto", onClick: drawCards, disabled: loading, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, loading ? 'Drawing Cards...' : 'Draw Cards')), cardImage && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: cardImage, alt: "Tarot card", className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-4", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-30 rounded-lg p-4", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2 text-black font-crimson-text", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Your Reading"), /*#__PURE__*/ React.createElement("p", { className: "text-black font-roboto font-bold", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, reading || 'Your destiny will be revealed here...')), /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-30 rounded-lg p-4", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2 text-black font-crimson-text", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Advice"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", style: { color: getRandomPastelColor() }, __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, advice || 'Personalized guidance will appear here...'))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "💖 Let's turn the wheel of destiny and uncover the path to your brighter future. 💖"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, ` @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .animate-float { animation: float 10s ease-in-out infinite; } `)); }