function MainComponent() { const [selectedPosition, setSelectedPosition] = useState(null); const [showGuide, setShowGuide] = useState(false); const [loading, setLoading] = useState(true); const [showHistory, setShowHistory] = useState(false); const [journalEntry, setJournalEntry] = useState(""); const [journalEntries, setJournalEntries] = useState([]); const { data: user } = useUser(); const isPremium = user?.isPremium; useEffect(()=>{ setTimeout(()=>setLoading(false), 1500); }, []); const positions = [ { id: 1, name: "The Present", position: "Center", description: "Represents the heart of the matter and current situation", details: "This card reveals the core energy and immediate circumstances surrounding your question. As the central card, it acts as an anchor for the entire reading, showing both conscious and unconscious influences currently at play.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Present situation", "Core issue", "Current energy", "Immediate focus" ], elements: "Consider both the elemental nature and numerological value of this card" }, { id: 2, name: "The Challenge", position: "Crossing", description: "Shows the primary obstacle or challenge", details: "Crossing the first card, this position reveals what stands in your way or creates tension in the situation. It can represent either a challenge to overcome or a supporting energy that creates necessary friction for growth.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Obstacle", "Challenge", "Conflict", "Supporting force" ], elements: "Pay attention to whether this card strengthens or weakens the center card" }, { id: 3, name: "The Foundation", position: "Below", description: "Reveals the foundation or root of the situation", details: "This card shows what lies beneath the surface - the foundation upon which the current situation rests. It often reveals past influences, childhood patterns, or subconscious beliefs shaping the present circumstances.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Past influence", "Root cause", "Underlying factor", "Subconscious pattern" ], elements: "Look for connections to family patterns or karmic cycles" }, { id: 4, name: "The Past", position: "Left", description: "Shows recent past influences and events", details: "This position reveals the recent past events or energies that are still affecting the situation. It helps understand what is passing away and what lessons or experiences are still relevant.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Recent events", "Passing influence", "Previous experience", "Waning energy" ], elements: "Notice how this energy is transitioning into the present" }, { id: 5, name: "The Crown", position: "Above", description: "Represents conscious thoughts and aspirations", details: "The crown position shows your highest thoughts about the situation - your conscious mind's understanding, hopes, and intellectual approach to the matter at hand.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Conscious thoughts", "Mental approach", "Aspirations", "Ideals" ], elements: "Compare with the foundation card to see alignment between conscious and unconscious" }, { id: 6, name: "The Future", position: "Right", description: "Indicates upcoming influences and potential outcomes", details: "This position shows the energies coming into play in the near future. While not set in stone, it reveals the most likely outcome if current trends continue.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Coming influence", "Developing situation", "Near future", "Potential outcome" ], elements: "Look for ways this energy is already beginning to manifest" }, { id: 7, name: "The Self", position: "Bottom Staff", description: "Shows your attitude and approach to the situation", details: "This card reveals how you see yourself in relation to the question and your current emotional or psychological stance.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Self-image", "Attitude", "Personal approach", "Inner state" ], elements: "Consider how this aligns with your conscious thoughts" }, { id: 8, name: "The Environment", position: "Second Staff", description: "Represents external influences and environment", details: "Shows the influence of others and external factors affecting the situation. This can include family, friends, society, or circumstances beyond your control.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "External factors", "Other people", "Environment", "Outside influence" ], elements: "Note which elements are supporting or challenging your journey" }, { id: 9, name: "Hopes and Fears", position: "Third Staff", description: "Reveals inner hopes and fears about the situation", details: "This position shows what you secretly hope for or fear might happen. Often these are deeply intertwined, as we frequently fear what we most desire.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Hidden desires", "Secret fears", "Expectations", "Inner wishes" ], elements: "Look for paradoxes between hopes and fears" }, { id: 10, name: "The Outcome", position: "Top Staff", description: "Shows the potential final outcome", details: "The culmination of all other influences, this card suggests the ultimate resolution or final outcome if the current path is followed.", example: "https://ucarecdn.com/72d41da6-1876-4c1b-9a7b-4e79a0dd63a3/-/format/auto/", keywords: [ "Final outcome", "Resolution", "Integration", "Ultimate result" ], elements: "Compare with your hopes/fears and the near future card" } ]; const handleSaveJournal = ()=>{ if (journalEntry.trim()) { setJournalEntries([ ...journalEntries, { id: Date.now(), text: journalEntry, timestamp: new Date().toISOString(), position: selectedPosition?.name } ]); setJournalEntry(""); } }; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1A0B2E] flex items-center justify-center", __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 200, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 border-4 border-[#FFD700] border-t-transparent rounded-full animate-spin mb-4", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#FFD700]", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, "Unveiling ancient pathways..."))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1A0B2E] text-white p-4 md:p-8 relative", __source: { fileName: "", lineNumber: 209, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-32 h-32 bg-[url('https://create.xyz/stock/flourish-corner.png')] bg-contain bg-no-repeat transform rotate-0", __source: { fileName: "", lineNumber: 210, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 w-32 h-32 bg-[url('https://create.xyz/stock/flourish-corner.png')] bg-contain bg-no-repeat transform rotate-90", __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 w-32 h-32 bg-[url('https://create.xyz/stock/flourish-corner.png')] bg-contain bg-no-repeat transform -rotate-90", __source: { fileName: "", lineNumber: 212, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 right-0 w-32 h-32 bg-[url('https://create.xyz/stock/flourish-corner.png')] bg-contain bg-no-repeat transform rotate-180", __source: { fileName: "", lineNumber: 213, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto max-w-6xl relative", __source: { fileName: "", lineNumber: 215, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 216, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-crimson-text text-[#FFD700] mb-4", __source: { fileName: "", lineNumber: 217, columnNumber: 11 }, __self: this }, "Mysteries of the Crossroads"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-[#B19CD9] italic mb-8", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, "Where Past, Present & Future Converge"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "px-6 py-2 bg-[#FFD700] text-[#2D1B4E] rounded-lg hover:bg-[#FFE55C] transition-colors duration-300", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }), "Home"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGuide(!showGuide), className: "px-6 py-2 bg-[#2D1B4E] text-[#FFD700] border border-[#FFD700] rounded-lg hover:bg-[#3D2B5E] transition-all duration-300", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book mr-2", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }), "Reading Guide"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowHistory(!showHistory), className: "px-6 py-2 bg-[#2D1B4E] text-[#FFD700] border border-[#FFD700] rounded-lg hover:bg-[#3D2B5E] transition-all duration-300", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history mr-2", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }), "Reading History"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 245, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2D1B4E] p-6 rounded-lg", __source: { fileName: "", lineNumber: 246, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full aspect-square", __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 400 400", className: "w-full h-full", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "200", cy: "200", r: "180", fill: "none", stroke: "#FFD700", strokeWidth: "2", strokeDasharray: "4,4", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "200", y1: "50", x2: "200", y2: "350", stroke: "#FFD700", strokeWidth: "2", __source: { fileName: "", lineNumber: 258, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "50", y1: "200", x2: "350", y2: "200", stroke: "#FFD700", strokeWidth: "2", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this }), positions.map((position, index)=>{ const coords = [ { x: 200, y: 200 }, { x: 250, y: 200 }, { x: 200, y: 300 }, { x: 150, y: 200 }, { x: 200, y: 100 }, { x: 300, y: 200 }, { x: 350, y: 350 }, { x: 350, y: 250 }, { x: 350, y: 150 }, { x: 350, y: 50 } ]; return /*#__PURE__*/ React.createElement("g", { key: position.id, onClick: ()=>setSelectedPosition(position), className: "cursor-pointer transform transition-transform duration-300 hover:scale-110", __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("rect", { x: coords[index].x - 20, y: coords[index].y - 30, width: "40", height: "60", fill: selectedPosition?.id === position.id ? "#FFD700" : "#2D1B4E", stroke: "#FFD700", strokeWidth: "2", rx: "2", __source: { fileName: "", lineNumber: 295, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: coords[index].x, y: coords[index].y + 5, textAnchor: "middle", fill: selectedPosition?.id === position.id ? "#2D1B4E" : "#FFD700", fontSize: "14", __source: { fileName: "", lineNumber: 309, columnNumber: 23 }, __self: this }, position.id)); })))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2D1B4E] p-6 rounded-lg", __source: { fileName: "", lineNumber: 329, columnNumber: 11 }, __self: this }, selectedPosition ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 331, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text text-[#FFD700] mb-4", __source: { fileName: "", lineNumber: 332, columnNumber: 17 }, __self: this }, selectedPosition.name, /*#__PURE__*/ React.createElement("span", { className: "text-sm bg-[#1A0B2E] px-3 py-1 rounded-full ml-4", __source: { fileName: "", lineNumber: 334, columnNumber: 19 }, __self: this }, "Position ", selectedPosition.id)), /*#__PURE__*/ React.createElement("p", { className: "text-[#B19CD9] italic mb-4", __source: { fileName: "", lineNumber: 338, columnNumber: 17 }, __self: this }, selectedPosition.description), /*#__PURE__*/ React.createElement("div", { className: "text-[#B19CD9] space-y-4", __source: { fileName: "", lineNumber: 341, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, selectedPosition.details), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A0B2E] p-4 rounded-lg", __source: { fileName: "", lineNumber: 343, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#FFD700] mb-2", __source: { fileName: "", lineNumber: 344, columnNumber: 21 }, __self: this }, "Keywords:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 345, columnNumber: 21 }, __self: this }, selectedPosition.keywords.map((keyword)=>/*#__PURE__*/ React.createElement("span", { key: keyword, className: "px-2 py-1 bg-[#3D2B5E] rounded-full text-xs", __source: { fileName: "", lineNumber: 347, columnNumber: 25 }, __self: this }, keyword)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A0B2E] p-4 rounded-lg", __source: { fileName: "", lineNumber: 356, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#FFD700] mb-2", __source: { fileName: "", lineNumber: 357, columnNumber: 21 }, __self: this }, "Elemental Considerations:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 360, columnNumber: 21 }, __self: this }, selectedPosition.elements)))) : /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#B19CD9] py-12", __source: { fileName: "", lineNumber: 365, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hand-pointer text-4xl mb-4 text-[#FFD700]", __source: { fileName: "", lineNumber: 366, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 367, columnNumber: 17 }, __self: this }, "Select a position to explore its meaning")))), showGuide && /*#__PURE__*/ React.createElement("div", { className: "bg-[#2D1B4E] p-8 rounded-lg mt-8", __source: { fileName: "", lineNumber: 374, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text text-[#FFD700] mb-6", __source: { fileName: "", lineNumber: 375, columnNumber: 13 }, __self: this }, "Celtic Cross Reading Guide"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 378, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#FFD700] mb-4", __source: { fileName: "", lineNumber: 380, columnNumber: 17 }, __self: this }, "History & Tradition"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B19CD9]", __source: { fileName: "", lineNumber: 381, columnNumber: 17 }, __self: this }, "The Celtic Cross is one of the oldest and most revered tarot spreads, dating back to the early days of cartomancy. Its power lies in combining Christian symbolism with ancient Celtic wisdom, creating a comprehensive tool for divination and self-discovery.")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 389, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#FFD700] mb-4", __source: { fileName: "", lineNumber: 390, columnNumber: 17 }, __self: this }, "Spread Structure"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B19CD9]", __source: { fileName: "", lineNumber: 391, columnNumber: 17 }, __self: this }, "The spread consists of two main sections: the cross, representing immediate circumstances and challenges, and the staff, showing the development and potential outcomes. This dual structure allows for both detailed analysis and broader perspective.")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 399, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#FFD700] mb-4", __source: { fileName: "", lineNumber: 400, columnNumber: 17 }, __self: this }, "Best Practices"), /*#__PURE__*/ React.createElement("p", { className: "text-[#B19CD9]", __source: { fileName: "", lineNumber: 401, columnNumber: 17 }, __self: this }, "Take time to ground and center before beginning. Focus on your question while shuffling. Pay attention to card interactions and patterns, especially between opposing positions in the cross.")))), !isPremium && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-[#2D1B4E] p-4 rounded-lg shadow-lg border border-[#FFD700]", __source: { fileName: "", lineNumber: 413, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#FFD700] mb-2", __source: { fileName: "", lineNumber: 414, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-crown mr-2", __source: { fileName: "", lineNumber: 415, columnNumber: 15 }, __self: this }), "Unlock Premium Features"), /*#__PURE__*/ React.createElement("a", { href: "/premium-landing-page", className: "px-4 py-2 bg-[#FFD700] text-[#2D1B4E] rounded-lg hover:bg-[#FFE55C] inline-block", __source: { fileName: "", lineNumber: 418, columnNumber: 13 }, __self: this }, "Upgrade Now")))); }