function MainComponent() { const majorArcana = [ { name: "The Fool", description: "Beginnings, innocence, spontaneity, a free spirit" }, { name: "The Magician", description: "Manifestation, resourcefulness, power, inspired action" }, { name: "The High Priestess", description: "Intuition, sacred knowledge, divine feminine, the subconscious mind" }, { name: "The Empress", description: "Femininity, beauty, nature, nurturing, abundance" }, { name: "The Emperor", description: "Authority, establishment, structure, a father figure" }, { name: "The Hierophant", description: "Spiritual wisdom, religious beliefs, conformity, tradition, institutions" }, { name: "The Lovers", description: "Love, harmony, relationships, value alignment, choices" }, { name: "The Chariot", description: "Control, willpower, success, action, determination" }, { name: "Strength", description: "Strength, courage, patience, control, compassion" }, { name: "The Hermit", description: "Soul-searching, introspection, being alone, inner guidance" }, { name: "Wheel of Fortune", description: "Good luck, karma, life cycles, destiny, a turning point" }, { name: "Justice", description: "Justice, fairness, truth, cause and effect, law" }, { name: "The Hanged Man", description: "Pause, surrender, letting go, new perspectives" }, { name: "Death", description: "Endings, change, transformation, transition" }, { name: "Temperance", description: "Balance, moderation, patience, purpose, meaning" }, { name: "The Devil", description: "Addiction, materialism, playfulness, bondage" }, { name: "The Tower", description: "Sudden change, upheaval, chaos, revelation, awakening" }, { name: "The Star", description: "Hope, faith, purpose, renewal, spirituality" }, { name: "The Moon", description: "Illusion, fear, anxiety, subconscious, intuition" }, { name: "The Sun", description: "Positivity, fun, warmth, success, vitality" }, { name: "Judgement", description: "Judgement, rebirth, inner calling, absolution" }, { name: "The World", description: "Completion, integration, accomplishment, travel" } ]; const [cards, setCards] = React.useState(Array.from({ length: 10 }).fill(null)); const [shuffled, setShuffled] = React.useState(false); const [selectedCardIndex, setSelectedCardIndex] = React.useState(null); const shuffleCards = ()=>{ const newCards = majorArcana.sort(()=>Math.random() - 0.5).slice(0, 10); setCards(newCards); setShuffled(true); setSelectedCardIndex(null); }; const handleCardClick = (index)=>{ if (selectedCardIndex === index) { setSelectedCardIndex(null); } else { setSelectedCardIndex(index); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F4ECD8]", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-4xl text-[#8B5D5D] mb-10", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "Celtic Cross Tarot Spread"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#806D5A] mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Unveil the wisdom of Major Arcana for your life path"), /*#__PURE__*/ React.createElement("button", { onClick: shuffleCards, className: "bg-[#8B5D5D] text-white font-roboto py-2 px-4 rounded-sm hover:bg-[#7A4C4C] transition-colors", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, shuffled ? "Shuffle Again" : "Shuffle Cards"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-4 mt-10", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, cards.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[120px] h-[180px] cursor-pointer relative", onClick: ()=>handleCardClick(index), __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, selectedCardIndex === index ? /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#f8e08e] border-[6px] border-black p-1 rounded-md", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-xl text-[#333]", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, card.name), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm text-[#222] p-2", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, card.description)) : /*#__PURE__*/ React.createElement("img", { src: "img/golden-tarot-card.png", alt: "Elegant black-relief golden tarot card", className: "absolute inset-0 w-full h-full border-[6px] border-black rounded-md", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }))))); }