const renderEnding = () => {
    const isSuccess = score >= 3;
    // 獲取所有真實線索
    const allRealClues = data.SCENE_DATA.flatMap(s => s.clues).filter(c => c.isRealClue);
    // 獲取所有劇情選擇
    const allScenarios = data.SCENARIOS;

    return (
        <div className="w-full max-w-6xl mx-auto p-8 animate-fade-in">
            {/* 1. 成績總結區塊 */}
            <div className={`p-10 rounded-3xl shadow-2xl text-center mb-10 ${isSuccess ? 'bg-green-100' : 'bg-indigo-100'}`}>
                <h2 className="text-5xl font-black mb-4">{isSuccess ? "任務成功！你接住了小星！" : "偵查結束"}</h2>
                <p className="text-2xl font-bold">你的守門人知能得分：{score} / 4 分</p>
            </div>

            {/* 2. 劇情選擇回顧 (這裡補上您缺失的劇情回顧) */}
            <div className="bg-white p-10 rounded-3xl shadow-xl mb-10 border border-slate-200">
                <h3 className="text-3xl font-black mb-8 text-center">時光倒流抉擇回顧</h3>
                <div className="space-y-6">
                    {allScenarios.map((sc, idx) => (
                        <div key={idx} className="p-6 bg-slate-50 rounded-2xl border-l-4 border-indigo-500">
                            <p className="font-bold text-lg text-indigo-700 mb-2">{sc.time}</p>
                            <p className="text-xl">{sc.situation}</p>
                        </div>
                    ))}
                </div>
            </div>

            {/* 3. 案發現場線索大解密 */}
            <div className="bg-white rounded-3xl shadow-xl border p-10 mb-10">
                <h3 className="text-3xl font-black text-center mb-10">案發現場線索大解密</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {allRealClues.map(clue => (
                        <div key={clue.id} className="p-6 bg-slate-50 rounded-2xl border-2">
                            <h4 className="font-black text-xl mb-3">{clue.title}</h4>
                            <p className="mb-4 italic">"{clue.content}"</p>
                            {!revealedClues[clue.id] ? (
                                <button onClick={() => setRevealedClues({...revealedClues, [clue.id]: true})} className="w-full bg-indigo-600 text-white py-2 rounded-lg font-bold">點擊解密</button>
                            ) : (
                                <div className="bg-red-100 p-3 rounded-lg font-bold text-red-800 text-sm">{clue.type}</div>
                            )}
                        </div>
                    ))}
                </div>
            </div>

            {/* 4. 守門人 123 步驟 */}
            <div className="bg-slate-800 text-white rounded-3xl p-10 mb-10">
                <h3 className="text-3xl font-black text-indigo-300 text-center mb-10">珍愛生命守門人 123 步驟</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="bg-slate-700 p-6 rounded-xl"><h4>1. 一問：主動關懷</h4></div>
                    <div className="bg-slate-700 p-6 rounded-xl"><h4>2. 二應：支持陪伴</h4></div>
                    <div className="bg-rose-900 p-6 rounded-xl border-l-4 border-rose-500"><h4>3. 三轉介：資源求助</h4></div>
                </div>
            </div>
        </div>
    );
};