function MainComponent() { const [currentQuestion, setCurrentQuestion] = React.useState(0); const [answers, setAnswers] = React.useState([]); const questions = [ { question: "あなたが誰かに引かれる瞬間はどんな時ですか？", options: [ "知的な会話ができると感じたとき", "親切な行動を見たとき", "自分と似た価値観を感じたとき", "不思議な魅力を感じたとき" ] }, { question: "未来に対して、どんな風に向き合いたいですか？", options: [ "明確な目標に向かって進んでいきたい", "穏やかで安定した生活を送りたい", "人生の中で深い繋がりを感じたい", "予測できない冒険に身を任せたい" ] }, { question: "出会いの瞬間、どんなことを感じると思いますか？", options: [ "知っていたかのような懐かしさ", "穏やかな安心感", "謎めいた強い引力", "楽しくて自由な感覚" ] }, { question: "人間関係で大事にしていることは何ですか？", options: [ "誠実さと信頼", "共感と優しさ", "理解し合う深い対話", "互いに刺激を与え合うこと" ] }, { question: "あなたが大切にしている日常の瞬間は？", options: [ "目標に向かって努力している時", "家族や友人と過ごす時間", "静かに自分自身と向き合う時間", "新しいことに挑戦する時" ] }, { question: "あなたが惹かれる理想のデートシチュエーションは？", options: [ "ロマンチックなディナーで深く語り合う", "自然の中でリラックスして過ごす", "文化的な体験を共にする（美術館、映画など）", "ちょっとした冒険やアクティブな体験をする" ] }, { question: "あなたにとって運命を感じる瞬間はどんな時ですか？", options: [ "計画していたことが思った以上に上手くいった時", "偶然の一致が何度も重なる時", "心が不思議に惹かれる瞬間が訪れる時", "新しい出会いが突然訪れた時" ] }, { question: "今までに出会った誰かと深く繋がったと感じた瞬間は？", options: [ "お互いを理解し合い、心を開いた瞬間", "共に過ごした時間が特別な意味を持った時", "出会った瞬間に強く感じた引力", "一緒に何か新しいことを始めた時" ] }, { question: "あなたが心から安心できるのはどんな瞬間ですか？", options: [ "自分の努力が認められた時", "愛する人がそばにいる時", "自分の感情に素直になれる時", "未来にワクワクしている時" ] }, { question: "運命の出会いが訪れるとしたら、あなたはどう感じますか？", options: [ "すぐにその人だと分かると思う", "時間をかけてじっくり気づくと思う", "突然訪れて衝撃を受ける", "楽しい冒険のように感じる" ] } ]; const handleAnswer = (optionIndex)=>{ setAnswers([ ...answers, optionIndex ]); if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { setCurrentQuestion(null); } }; const resetQuiz = ()=>{ setAnswers([]); setCurrentQuestion(0); }; const renderQuestion = ()=>{ const questionObj = questions[currentQuestion]; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white p-6 rounded-xl shadow-md", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text text-gray-900", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, questionObj.question), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid gap-4", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, questionObj.options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "w-full bg-pink-200 text-white font-medium py-2 rounded-md hover:bg-pink-300 transition", onClick: ()=>handleAnswer(index), __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, option)))); }; const renderResult = ()=>{ let resultText = ""; const scoreOccurrences = answers.reduce((acc, curr)=>{ acc[curr] = (acc[curr] || 0) + 1; return acc; }, {}); const total = answers.length; const nostalgicCount = (scoreOccurrences[0] || 0) + (scoreOccurrences[1] || 0); const connectionCount = (scoreOccurrences[2] || 0) + (scoreOccurrences[3] || 0); if (nostalgicCount / total > 0.5) { resultText = "あなたは運命の人にすでに出会っています。"; } else if (connectionCount / total > 0.5) { const years = nostalgicCount / total > 0.2 ? "3〜5年" : "1〜2年"; resultText = `あなたは運命の人に${years}後に出会います。`; } else { resultText = "あなたは運命の人に5年以上後に出会います。"; } return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white p-6 rounded-xl shadow-md", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text text-gray-900 mb-4", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, "結果"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, resultText), /*#__PURE__*/ React.createElement("button", { className: "mt-6 w-full bg-pink-200 text-white font-medium py-2 rounded-md hover:bg-pink-300 transition", onClick: resetQuiz, __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "もう一度試す？")); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-pink-200 via-pink-100 to-yellow-100", __source: { fileName: "", lineNumber: 167, columnNumber: 5 }, __self: this }, currentQuestion !== null ? renderQuestion() : renderResult(), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, ` body { font-family: 'Crimson Text', serif; } `)); }