function MainComponent() { const [step, setStep] = React.useState("question"); const [selectedQuestion, setSelectedQuestion] = React.useState(null); const [selectedCard, setSelectedCard] = React.useState(null); const [isFlipped, setIsFlipped] = React.useState(false); const [reading, setReading] = React.useState(""); const questions = [ { id: 1, text: "今日の運勢を占う", category: "運勢", icon: "fas fa-sun", description: "今日一日の運勢とアドバイスを占います" }, { id: 2, text: "恋愛について占う", category: "恋愛", icon: "fas fa-heart", description: "あなたの恋愛の行方と、幸せへの導きを占います" }, { id: 3, text: "仕事について占う", category: "仕事", icon: "fas fa-briefcase", description: "キャリアの展望と、成功への道筋を占います" }, { id: 4, text: "金運について占う", category: "金運", icon: "fas fa-coins", description: "金運の流れと、財運を引き寄せる方法を占います" } ]; const tarotCards = [ { id: 1, name: "太陽", meaning: "幸運、成功、前進", image: "/tarot/sun.jpg", description: "明るい未来への予兆。あなたの前に開かれる新しい扉と、それに伴う幸運の到来を示唆しています。自信を持って前に進むことで、望む結果を手に入れることができるでしょう。", advice: "自信を持って行動することで、さらなる幸運を引き寄せることができます。", keywords: [ "活力", "成功", "喜び", "達成" ] }, { id: 2, name: "月", meaning: "直感、不安、変化", image: "/tarot/moon.jpg", description: "深い洞察と直感の時期。表面的なものを超えて、より深い真実を見出すことができます。一時的な不安や混乱を感じるかもしれませんが、それは新しい気づきへの過程です。", advice: "直感を信じ、内なる声に耳を傾けることで、正しい道が見えてきます。", keywords: [ "直感", "神秘", "変化", "気づき" ] }, { id: 3, name: "星", meaning: "希望、導き、インスピレーション", image: "/tarot/star.jpg", description: "希望に満ちた未来への道しるべ。あなたの夢や目標に向かって進むための導きと、創造的なインスピレーションが得られる時期です。", advice: "理想を高く持ち、それに向かって着実に歩みを進めることで、望む結果を得られます。", keywords: [ "希望", "導き", "癒し", "創造性" ] }, { id: 4, name: "魔術師", meaning: "創造性、意志力、新しい始まり", image: "/tarot/magician.jpg", description: "あなたの中に眠る無限の可能性。意志の力と創造性を活かすことで、望むものを現実化する力を持っています。新しい始まりに向けて、すべての準備が整っています。", advice: "自分の能力を信じ、積極的に行動することで、望む変化を生み出すことができます。", keywords: [ "創造", "実現", "意志", "変化" ] }, { id: 5, name: "女帝", meaning: "豊かさ、実り、愛情", image: "/tarot/empress.jpg", description: "豊かさと愛に満ちた時期の到来。物質的な充実だけでなく、精神的な満足感も得られます。周囲との関係も温かく、実りある結果をもたらすでしょう。", advice: "感謝の気持ちを持ち、周囲との調和を大切にすることで、さらなる豊かさを引き寄せられます。", keywords: [ "豊かさ", "愛", "調和", "成長" ] }, { id: 6, name: "運命の輪", meaning: "転機、チャンス、運命", image: "/tarot/wheel.jpg", description: "人生の大きな転換期を示唆。予期せぬ出来事や変化が、新たな機会をもたらします。運命の流れに身を任せることで、望ましい結果へと導かれるでしょう。", advice: "変化を恐れず、流れに従うことで、運命の導きを受けることができます。", keywords: [ "転機", "運命", "機会", "循環" ] } ]; const selectQuestion = (question)=>{ setSelectedQuestion(question); setStep("cards"); }; const selectCard = (card)=>{ setSelectedCard(card); generateReading(card); setTimeout(()=>{ setIsFlipped(true); }, 500); setStep("result"); }; const generateReading = (card)=>{ const readings = { 運勢: `${card.name}のカードは、あなたの運勢について次のことを示唆しています：\n\n${card.description}\n\n${card.advice}`, 恋愛: `恋愛に関して、${card.name}のカードは次のメッセージを伝えています：\n\n${card.description}\n\n${card.advice}`, 仕事: `キャリアについて、${card.name}のカードは以下の導きを示しています：\n\n${card.description}\n\n${card.advice}`, 金運: `金運に関して、${card.name}のカードは次のような示唆を与えています：\n\n${card.description}\n\n${card.advice}` }; setReading(readings[selectedQuestion.category]); }; const resetReading = ()=>{ setStep("question"); setSelectedQuestion(null); setSelectedCard(null); setIsFlipped(false); setReading(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-indigo-900 via-purple-900 to-indigo-900 py-12 px-4 font-crimson-text", __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-300 text-4xl mb-4", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-moon", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "無料タロット占い"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-300", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, "あなたの運命をタロットカードが導きます")), step === "question" && /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-lg p-8", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-yellow-300 mb-6 text-center", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, "占いたい質問を選んでください"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, questions.map((question)=>/*#__PURE__*/ React.createElement("button", { key: question.id, onClick: ()=>selectQuestion(question), className: "p-6 bg-white/5 rounded-lg hover:bg-white/10 transition-all text-left group relative overflow-hidden", __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 w-32 h-32 bg-yellow-300/5 rounded-full transform translate-x-16 -translate-y-16 group-hover:scale-150 transition-transform duration-500", __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-300 mb-4 text-3xl", __source: { fileName: "", lineNumber: 169, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: question.icon, __source: { fileName: "", lineNumber: 170, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-white mb-2", __source: { fileName: "", lineNumber: 172, columnNumber: 21 }, __self: this }, question.text), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 173, columnNumber: 21 }, __self: this }, question.description)))))), step === "cards" && /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-lg p-8", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-yellow-300 mb-6 text-center", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, "カードを1枚選んでください"), /*#__PURE__*/ React.createElement("p", { className: "text-white text-center mb-4", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, "質問：", selectedQuestion.text), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-center mb-8", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, "心を落ち着かせ、直感に従ってカードを選んでください"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, tarotCards.map((card)=>/*#__PURE__*/ React.createElement("button", { key: card.id, onClick: ()=>selectCard(card), className: "aspect-[2/3] bg-[#1a1a3a] rounded-lg hover:transform hover:scale-105 transition-all relative group overflow-hidden", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-yellow-300/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-300 transform group-hover:scale-110 transition-transform", __source: { fileName: "", lineNumber: 203, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question text-4xl", __source: { fileName: "", lineNumber: 204, columnNumber: 23 }, __self: this }))))))), step === "result" && /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-lg p-8", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-yellow-300 mb-6 text-center", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }, "あなたの運命"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `aspect-[2/3] bg-[#1a1a3a] rounded-lg mb-8 transform transition-all duration-700 ${isFlipped ? "scale-100" : "scale-95"}`, __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center p-8", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-yellow-300 text-4xl mb-6", __source: { fileName: "", lineNumber: 224, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star", __source: { fileName: "", lineNumber: 225, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-3xl text-white mb-4", __source: { fileName: "", lineNumber: 227, columnNumber: 21 }, __self: this }, selectedCard.name), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mb-6", __source: { fileName: "", lineNumber: 230, columnNumber: 21 }, __self: this }, selectedCard.keywords.map((keyword, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "px-3 py-1 bg-white/10 rounded-full text-yellow-300 text-sm", __source: { fileName: "", lineNumber: 232, columnNumber: 25 }, __self: this }, keyword))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-lg mb-6 whitespace-pre-line", __source: { fileName: "", lineNumber: 240, columnNumber: 21 }, __self: this }, reading)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: resetReading, className: "flex-1 py-3 bg-yellow-300 text-indigo-900 rounded-full font-medium hover:bg-yellow-200 transition-colors", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, "もう一度占う"), /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex-1 py-3 bg-white/10 text-yellow-300 rounded-full font-medium hover:bg-white/20 transition-colors text-center", __source: { fileName: "", lineNumber: 253, columnNumber: 17 }, __self: this }, "占い師に相談する"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 265, columnNumber: 7 }, __self: this }, ` @keyframes cardFloat { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } 100% { transform: translateY(0) rotate(0); } } .card-float { animation: cardFloat 3s ease-in-out infinite; } `)); }