// elder.jsx — 長者端完整流程（暖、大字、吉祥物、鼓勵）
const { useState: useE, useEffect: useEf, useRef: useER } = React;

function ElderApp({ onExit }) {
  const [step, setStep] = useE('role');
  const [elder, setElder] = useE(null);
  const [activity, setActivity] = useE(null);
  const [difficulty, setDifficulty] = useE(null);
  const [song, setSong] = useE(null);

  const reset = () => { setStep('menu'); setActivity(null); setDifficulty(null); setSong(null); };

  // wizard step index for the progress dots (activity→difficulty→song→play)
  const wizIdx = { activity: 0, difficulty: 1, song: 2, play: 3 }[step];

  return (
    <div id="scroll" className="warmbg" style={{ minHeight: '100vh', overflowY: 'auto' }}>
      <ElderTopBar elder={elder} step={step} onHome={reset} onExit={onExit} />
      <div style={{ maxWidth: 980, margin: '0 auto', padding: '24px 20px 60px' }}>
        {wizIdx != null && (
          <div style={{ margin: '4px 0 26px' }}><window.Steps total={4} current={wizIdx} /></div>
        )}

        {step === 'role' && <RoleSelect onPick={(e) => { setElder(e); setStep('menu'); }} />}
        {step === 'menu' && <MainMenu elder={elder} go={setStep} />}
        {step === 'activity' && <ActivitySelect onPick={(a) => { setActivity(a); setStep('difficulty'); }} onBack={reset} />}
        {step === 'difficulty' && <DifficultySelect activity={activity} onPick={(d) => { setDifficulty(d); setStep('song'); }} onBack={() => setStep('activity')} />}
        {step === 'song' && <SongSelect onPick={(s) => { setSong(s); setStep('play'); }} onBack={() => setStep('difficulty')} />}
        {step === 'play' && <GamePlay elder={elder} activity={activity} difficulty={difficulty} song={song} onFinish={() => setStep('result')} onQuit={reset} />}
        {step === 'result' && <ResultScreen elder={elder} activity={activity} onAgain={() => setStep('play')} onHome={reset} />}
        {step === 'checkin' && <CheckIn elder={elder} onHome={reset} />}
        {step === 'history' && <History elder={elder} onHome={reset} />}
        {step === 'soon' && <ComingSoon onHome={reset} />}
      </div>
    </div>
  );
}

function ElderTopBar({ elder, step, onHome, onExit }) {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 5, background: 'var(--surface)', borderBottom: '1.5px solid var(--border)',
      padding: '12px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <window.Mascot mood="happy" size={44} />
        <span style={{ fontSize: 'var(--fs-h3)', fontWeight: 900 }}>樂睦</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {elder && step !== 'role' && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <window.ElderAvatar avatar={elder.avatar} tone={elder.tone} size={44} />
            <span style={{ fontSize: 'var(--fs-lead)', fontWeight: 800 }}>{elder.callName}</span>
          </div>
        )}
        {elder && step !== 'role' && step !== 'menu' && (
          <window.GhostButton onClick={onHome} style={{ minHeight: 48, padding: '8px 18px' }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><window.IcHome size={18} color="var(--ink-2)" />首頁</span></window.GhostButton>
        )}
        <window.GhostButton onClick={onExit} style={{ minHeight: 48, padding: '8px 18px' }}>登出</window.GhostButton>
      </div>
    </div>
  );
}

// 1) 選角色（單一明確點選 + 選中回饋，修掉舊版兩段式壓鈴）
function RoleSelect({ onPick }) {
  return (
    <div className="screen">
      <window.MascotSay text={window.MASCOT.pickRole} mood="happy" />
      <h2 style={{ fontSize: 'var(--fs-h2)', fontWeight: 900, margin: '24px 0 18px' }}>請點一下你的名字</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(220px,1fr))', gap: 16 }}>
        {window.ELDER_ROSTER.map((e, i) => {
          const c = window.tone(e.tone);
          return (
          <div key={e.id} className="card-hover" onClick={() => onPick(e)} style={{
            display: 'flex', alignItems: 'center', gap: 16, background: 'linear-gradient(180deg,#fff,' + c.soft + ')',
            border: '1px solid ' + c.solid + '2E', borderRadius: 20, padding: 18, cursor: 'pointer',
            boxShadow: '0 1px 2px rgba(120,84,40,.05), 0 8px 18px ' + c.solid + '1F',
            animation: 'rise .45s ease backwards', animationDelay: (i * 0.04) + 's' }}>
            <window.ElderAvatar avatar={e.avatar} tone={e.tone} size={64} />
            <span style={{ fontSize: 'var(--fs-h3)', fontWeight: 900 }}>{e.callName}</span>
          </div>
          );
        })}
      </div>
    </div>
  );
}

// 2) 主選單（舊版六宮格；釐清入口）
const MENU_TILES = [
  { key: 'activity', label: '開始遊戲', icon: 'play', tone: 'primary', sub: '今天來動一動' },
  { key: 'checkin', label: '簽到', icon: 'checkin', tone: 'sky', sub: '我今天來了' },
  { key: 'history', label: '我的紀錄', icon: 'star', tone: 'sun', sub: '看看我的進步' },
  { key: 'soon', label: '任務活動', icon: 'trophy', tone: 'mint', sub: '集點拿獎勵' },
  { key: 'soon', label: '節慶遊戲', icon: 'festival', tone: 'rose', sub: '應景小活動' },
  { key: 'soon', label: 'AI 音樂挑戰', icon: 'musicAI', tone: 'grape', sub: '跟著旋律玩' },
];
function MainMenu({ elder, go }) {
  return (
    <div className="screen">
      <window.MascotSay text={`${elder.callName}，今天想做什麼呢？`} mood="cheer" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(260px,1fr))', gap: 18, marginTop: 26 }}>
        {MENU_TILES.map((t, i) => {
          const c = window.tone(t.tone);
          return (
            <div key={i} className="card-hover" onClick={() => go(t.key)} style={{
              background: 'linear-gradient(180deg, #FFFFFF, ' + c.soft + ')', border: '1px solid ' + c.solid + '33', borderRadius: 24, padding: 24,
              cursor: 'pointer', boxShadow: '0 1px 2px rgba(120,84,40,.05), 0 10px 24px ' + c.solid + '22', display: 'flex', alignItems: 'center', gap: 18,
              animation: 'rise .45s ease backwards', animationDelay: (i * 0.05) + 's' }}>
              <div style={{ width: 84, height: 84, borderRadius: 22, background: '#fff', display: 'flex',
                alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', boxShadow: 'inset 0 0 0 1px ' + c.solid + '22, 0 5px 12px ' + c.solid + '26' }}>
                <window.MenuIcon name={t.icon} color={c.ink} size={44} />
              </div>
              <div>
                <div style={{ fontSize: 'var(--fs-h3)', fontWeight: 900 }}>{t.label}</div>
                <div style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 700 }}>{t.sub}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// 3) 選活動
function ActivitySelect({ onPick, onBack }) {
  return (
    <div className="screen">
      <window.MascotSay text={window.MASCOT.pickActivity} mood="happy" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(260px,1fr))', gap: 18, margin: '24px 0' }}>
        {window.ACTIVITIES.map((a, i) => {
          const c = window.tone(a.tone);
          return (
            <div key={a.id} className="card-hover" onClick={() => onPick(a)} style={{
              background: 'var(--surface)', border: '1px solid ' + c.solid + '2E', borderRadius: 24, overflow: 'hidden',
              cursor: 'pointer', boxShadow: '0 1px 2px rgba(120,84,40,.05), 0 10px 24px ' + c.solid + '22',
              animation: 'rise .45s ease backwards', animationDelay: (i * 0.06) + 's' }}>
              <div style={{ background: 'linear-gradient(160deg, #fff, ' + c.soft + ')', padding: '26px 0', display: 'flex', justifyContent: 'center' }}>
                <window.Instrument name={a.icon} color={a.iconColor} size={88} />
              </div>
              <div style={{ padding: 20 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span style={{ fontSize: 'var(--fs-h3)', fontWeight: 900 }}>{a.name}</span>
                  <span style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-3)', fontWeight: 700 }}>{a.sub}</span>
                </div>
                <div style={{ margin: '10px 0' }}><window.Tag tone={a.tone}>{a.part}</window.Tag></div>
                <div style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 600 }}>{a.desc}</div>
              </div>
            </div>
          );
        })}
      </div>
      <window.GhostButton onClick={onBack}>← 上一步</window.GhostButton>
    </div>
  );
}

// 4) 選難度（溫和分級）
function DifficultySelect({ activity, onPick, onBack }) {
  return (
    <div className="screen">
      <window.MascotSay text={window.MASCOT.pickDifficulty} mood="happy" />
      <h2 style={{ fontSize: 'var(--fs-h3)', fontWeight: 800, color: 'var(--ink-2)', margin: '20px 0 14px' }}>
        {activity.name} · 選一個步調
      </h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, margin: '0 0 24px' }}>
        {window.DIFFICULTIES.map((d) => {
          const c = window.tone(d.tone);
          return (
            <div key={d.id} className="card-hover" onClick={() => onPick(d)} style={{
              display: 'flex', alignItems: 'center', gap: 20, background: 'var(--surface)', border: '2px solid var(--border)',
              borderRadius: 20, padding: '18px 24px', cursor: 'pointer', boxShadow: 'var(--shadow-soft)' }}>
              <div style={{ width: 72, height: 72, borderRadius: '50%', background: c.soft, display: 'flex',
                alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                <window.Face mood={d.id} size={54} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 'var(--fs-h3)', fontWeight: 900 }}>{d.name}</div>
                <div style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 700 }}>{d.note}</div>
              </div>
              <span style={{ fontSize: 'var(--fs-h3)', color: c.solid, fontWeight: 900 }}>選 →</span>
            </div>
          );
        })}
      </div>
      <window.GhostButton onClick={onBack}>← 上一步</window.GhostButton>
    </div>
  );
}

// 5) 選音樂（含試聽示意）
function SongSelect({ onPick, onBack }) {
  return (
    <div className="screen">
      <window.MascotSay text={window.MASCOT.pickSong} mood="happy" />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '24px 0' }}>
        {window.SONGS.map((s) => (
          <div key={s.id} className="card-hover" onClick={() => onPick(s)} style={{
            display: 'flex', alignItems: 'center', gap: 18, background: 'var(--surface)', border: '2px solid var(--border)',
            borderRadius: 18, padding: '16px 22px', cursor: 'pointer', boxShadow: 'var(--shadow-soft)' }}>
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--sunken)', display: 'flex',
              alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
              <window.MenuIcon name="musicAI" color="var(--primary)" size={28} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 'var(--fs-h3)', fontWeight: 900 }}>{s.name}</div>
              <div style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-3)', fontWeight: 700 }}>{s.tag}</div>
            </div>
            <span onClick={(e) => e.stopPropagation()} style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-2)', fontWeight: 800, border: '1.5px solid var(--border)', borderRadius: 999, padding: '6px 14px' }}>試聽</span>
            <span style={{ fontSize: 'var(--fs-lead)', color: 'var(--primary)', fontWeight: 900 }}>選 →</span>
          </div>
        ))}
      </div>
      <window.GhostButton onClick={onBack}>← 上一步</window.GhostButton>
    </div>
  );
}

// 6) 遊戲進行（同舊機制：中央＝老先生彈奏彩色鈴鐺的鏡頭；敲哪一顆 → 上方對應位置亮起「對應顏色」+ 響該音 + GOOD）
let _audioCtx;
function playBell(freq) {
  try {
    _audioCtx = _audioCtx || new (window.AudioContext || window.webkitAudioContext)();
    const ctx = _audioCtx;
    if (ctx.state === 'suspended') ctx.resume();
    const now = ctx.currentTime;
    const master = ctx.createGain();
    master.connect(ctx.destination);
    master.gain.setValueAtTime(0.0001, now);
    master.gain.exponentialRampToValueAtTime(0.4, now + 0.02);
    master.gain.exponentialRampToValueAtTime(0.0001, now + 1.6); // 緩慢衰減 ≈ 響一段
    [[1, 1], [2, 0.4], [2.8, 0.2]].forEach(([m, g]) => {
      const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.value = freq * m;
      const gg = ctx.createGain(); gg.gain.value = g;
      o.connect(gg); gg.connect(master); o.start(now); o.stop(now + 1.7);
    });
  } catch (e) {}
}

// 8 顆彩色鈴鐺：對照實體手搖鈴的顏色與位置（do re mi fa sol la ti do）
const NOTES = [
  { color: '#E5392F', freq: 523.25, note: 'C' },  // 紅  do
  { color: '#F2913D', freq: 587.33, note: 'D' },  // 橙  re
  { color: '#F2C200', freq: 659.25, note: 'E' },  // 黃  mi
  { color: '#3FA64B', freq: 698.46, note: 'F' },  // 綠  fa
  { color: '#29B6D8', freq: 783.99, note: 'G' },  // 青  sol
  { color: '#2F6FD0', freq: 880.00, note: 'A' },  // 藍  la
  { color: '#8C5BD0', freq: 987.77, note: 'B' },  // 紫  ti
  { color: '#E5392F', freq: 1046.50, note: "C'" }, // 紅  do(高音，同低 do)
];
// 上方鈴鐺弧形座標（8 顆，寬扁橢圓弧，環抱中央鏡頭；與下方實體鈴鐺同索引 → 位置＋顏色都對應）
const ARC = NOTES.map((_, i) => {
  const a = (202 + i * 19.43) * Math.PI / 180;
  return { x: 380 + 322 * Math.cos(a), y: 312 + 250 * Math.sin(a) };
});

const TOTAL_ROUNDS = 8;
function GamePlay({ elder, activity, difficulty, song, onFinish, onQuit }) {
  const [presses, setPresses] = useE(0);
  const [lit, setLit] = useE(-1);
  const [good, setGood] = useE(false);
  const wrapRef = useER(null);
  const [scale, setScale] = useE(1);
  useEf(() => {
    const fit = () => { const w = wrapRef.current ? wrapRef.current.clientWidth : 760; setScale(Math.min(1, w / 760)); };
    fit(); window.addEventListener('resize', fit); return () => window.removeEventListener('resize', fit);
  }, []);

  const hit = (i) => {
    if (presses >= TOTAL_ROUNDS) return;
    playBell(NOTES[i].freq);
    setLit(i); setGood(true);
    const p = presses + 1;
    setPresses(p);
    setTimeout(() => { setLit(-1); setGood(false); }, 650);
    if (p >= TOTAL_ROUNDS) setTimeout(onFinish, 800);
  };

  return (
    <div className="screen" style={{ textAlign: 'center' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <window.Tag tone={activity.tone}>{activity.name} · {difficulty.name}</window.Tag>
        <window.GhostButton onClick={onQuit} style={{ minHeight: 48, padding: '8px 18px' }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><window.IcPause size={16} color="var(--ink-2)" />結束</span></window.GhostButton>
      </div>
      <div style={{ fontSize: 'var(--fs-lead)', color: 'var(--ink-2)', fontWeight: 800, marginBottom: 4 }}>
        <span style={{ color: 'var(--primary)' }}>♪</span> {song.name}　第 <span className="num">{Math.min(presses + 1, TOTAL_ROUNDS)}</span> / {TOTAL_ROUNDS} 回
      </div>
      <div style={{ height: 12, background: 'var(--sunken)', borderRadius: 999, overflow: 'hidden', maxWidth: 520, margin: '8px auto 14px' }}>
        <div style={{ width: (presses / TOTAL_ROUNDS * 100) + '%', height: '100%', background: 'var(--primary)', transition: 'width .4s' }} />
      </div>

      {/* 舞台（自動縮放以適應寬度，避免裁切） */}
      <div ref={wrapRef} style={{ width: '100%' }}>
      <div style={{ width: 760 * scale, height: 540 * scale, margin: '0 auto' }}>
      <div style={{ position: 'relative', width: 760, height: 540, transform: 'scale(' + scale + ')', transformOrigin: 'top left' }}>
        {/* 柔和舞台底，避免畫面過空 */}
        <div style={{ position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, borderRadius: 30,
          background: 'radial-gradient(120% 85% at 50% 6%, #FFF7EA 0%, #FBEAD2 68%, #F4DDBE 100%)',
          boxShadow: 'inset 0 2px 20px rgba(150,100,40,0.10)' }} />

        {/* 上方弧形彩色鈴鐺（顯示） */}
        {NOTES.map((n, i) => {
          const on = lit === i;
          return (
            <div key={i} style={{ position: 'absolute', left: ARC[i].x - 39, top: ARC[i].y - 39, width: 78, height: 78,
              borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'all .14s', background: on ? n.color : '#FFFFFF',
              border: '4px solid ' + (on ? '#FFFFFF' : n.color + '66'),
              boxShadow: on ? '0 0 0 6px ' + n.color + '40, 0 10px 24px ' + n.color + '99' : '0 5px 14px rgba(120,90,50,0.16)',
              transform: on ? 'scale(1.16)' : 'scale(1)' }}>
              <window.Bell color={on ? '#FFFFFF' : n.color} filled={on} size={44} />
              {on && <span className="pop" style={{ position: 'absolute', top: -28, fontSize: 26, color: n.color, fontWeight: 900 }}>♪</span>}
            </div>
          );
        })}

        {good && <div className="pop" style={{ position: 'absolute', right: 24, top: 116, fontSize: 'var(--fs-h1)', fontWeight: 900, color: 'var(--gain)', textShadow: '0 2px 0 #fff', letterSpacing: 1 }}>GOOD!</div>}

        {/* 中央：老先生鏡頭（示範佔位）＋實體彩色鈴鐺（可點＝輸入） */}
        <div style={{ position: 'absolute', left: '50%', bottom: 18, transform: 'translateX(-50%)', width: 432,
          borderRadius: 22, overflow: 'hidden', border: '5px solid #FFFFFF', boxShadow: '0 14px 34px rgba(120,80,40,0.30)' }}>
          <div style={{ position: 'relative', height: 226, background: 'linear-gradient(180deg,#6E8C82,#48635B)', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(0,0,0,0.45)', color: '#fff',
              borderRadius: 999, padding: '4px 12px', fontSize: 'var(--fs-small)', fontWeight: 800, display: 'flex', alignItems: 'center', gap: 6, zIndex: 2 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF5A3C', display: 'inline-block' }} />連線中 · 1 人
            </div>
            <div style={{ position: 'absolute', top: 12, right: 12, background: 'rgba(255,255,255,0.9)', color: 'var(--ink-2)',
              borderRadius: 8, padding: '3px 10px', fontSize: 'var(--fs-small)', fontWeight: 700, zIndex: 2 }}>示範畫面</div>
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', justifyContent: 'center' }}>
              <window.ElderBust size={230} />
            </div>
          </div>
          {/* 木架上的實體彩色鈴鐺 */}
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 6, padding: '12px 10px 14px',
            background: 'linear-gradient(180deg,#D9A86C,#C4894F)' }}>
            {NOTES.map((n, i) => (
              <button key={i} className="bell-input" onClick={() => hit(i)} aria-label={'bell-' + i} style={{
                background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
                filter: 'drop-shadow(0 3px 3px rgba(0,0,0,0.28))' }}>
                <window.Bell color={n.color} filled size={40} />
              </button>
            ))}
          </div>
        </div>
      </div>
      </div>
      </div>

      <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--ink-2)', marginTop: 10, fontWeight: 800 }}>
        敲下面的彩色鈴鐺，上面就會亮起一樣的顏色！
      </p>
    </div>
  );
}

// 7) 成績結算（反應力 / 協調力，本次 vs 上次；修掉舊版矛盾箭頭）
function ResultScreen({ elder, activity, onAgain, onHome }) {
  const res = window.gameResult(elder.id);
  const improved = res.metrics.some((m) => m.now > m.last);
  return (
    <div className="screen" style={{ maxWidth: 640, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 18 }}>
        <window.Mascot mood="cheer" size={140} style={{ margin: '0 auto' }} />
        <h2 style={{ fontSize: 'var(--fs-h1)', fontWeight: 900, margin: '8px 0 4px' }}>完成囉！</h2>
        <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--ink-2)', fontWeight: 800, margin: 0 }}>
          {improved ? window.MASCOT.finishGood : window.MASCOT.finishKeep}
        </p>
        <p style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-3)', marginTop: 6 }}>
          {elder.callName}　·　{activity.name}　·　今天
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {res.metrics.map((m) => <window.CompareBars key={m.key} metric={m} />)}
      </div>
      <div style={{ display: 'flex', gap: 14, marginTop: 26, justifyContent: 'center' }}>
        <window.GhostButton onClick={onHome}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><window.IcHome size={18} color="var(--ink-2)" />回首頁</span></window.GhostButton>
        <window.BigButton size="md" onClick={onAgain}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>再玩一次<window.IcReplay size={20} color="#fff" /></span></window.BigButton>
      </div>
    </div>
  );
}

// 簽到
function CheckIn({ elder, onHome }) {
  return (
    <div className="screen" style={{ textAlign: 'center', maxWidth: 520, margin: '40px auto 0' }}>
      <window.Mascot mood="cheer" size={140} style={{ margin: '0 auto 12px' }} />
      <h2 style={{ fontSize: 'var(--fs-h1)', fontWeight: 900 }}>簽到成功！</h2>
      <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--ink-2)', fontWeight: 700 }}>
        {elder.callName}，今天也很高興見到你
      </p>
      <div style={{ marginTop: 26 }}><window.BigButton onClick={onHome}>回首頁</window.BigButton></div>
    </div>
  );
}

// 我的紀錄（用六力近期值做簡單呈現）
function History({ elder, onHome }) {
  const s = window.studentById(elder.id);
  const rows = window.SIX_ORDER.map((k) => ({ k, b: s.sp[k][0], r: s.sp[k][1] }));
  return (
    <div className="screen" style={{ maxWidth: 620, margin: '0 auto' }}>
      <window.MascotSay text={`${elder.callName}，看看你最近的進步！`} mood="happy" />
      <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {rows.map((row) => {
          const up = row.r - row.b;
          return (
            <window.Card key={row.k} pad={18}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 'var(--fs-h3)', fontWeight: 800 }}>{row.k}</span>
                <span className="num" style={{ fontSize: 'var(--fs-lead)', fontWeight: 800, color: up >= 0 ? 'var(--gain)' : 'var(--loss)' }}>
                  {up >= 0 ? '▲ +' + up : '▼ ' + up} 分
                </span>
              </div>
              <div style={{ height: 18, background: 'var(--sunken)', borderRadius: 999, marginTop: 10, overflow: 'hidden' }}>
                <div style={{ width: row.r + '%', height: '100%', background: 'var(--primary)' }} />
              </div>
            </window.Card>
          );
        })}
      </div>
      <div style={{ textAlign: 'center', marginTop: 24 }}><window.BigButton onClick={onHome}>回首頁</window.BigButton></div>
    </div>
  );
}

function ComingSoon({ onHome }) {
  return (
    <div className="screen" style={{ textAlign: 'center', maxWidth: 520, margin: '40px auto 0' }}>
      <window.Mascot mood="wink" size={130} style={{ margin: '0 auto 12px' }} />
      <h2 style={{ fontSize: 'var(--fs-h2)', fontWeight: 900 }}>即將推出</h2>
      <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--ink-2)', fontWeight: 700 }}>這個活動正在準備中，敬請期待！</p>
      <div style={{ marginTop: 24 }}><window.BigButton onClick={onHome}>回首頁</window.BigButton></div>
    </div>
  );
}

Object.assign(window, { ElderApp });