// screens-conv-video-quiz.jsx — 會話/振假名、影片、測驗

// ─────────────────────────────────────────────────────────────
// 會話 / 振假名模組（A-B 對話跟讀）
// ─────────────────────────────────────────────────────────────
const ConversationScreen = ({ dark, onBack, fontScale = 1, showFurigana = 'auto' }) => {
  const T = useTheme(dark);
  const [activeIdx, setActiveIdx] = React.useState(2);
  const [furi, setFuri] = React.useState(showFurigana !== 'never');

  const dialogue = [
    { who: 'A', name: '田中', avatar: TOKENS.book3, jp: [['すみません'],['、', null],['駅','えき'],'は', ['どこ', 'どこ'],'ですか。'], zh: '不好意思，請問車站在哪裡？', rom: 'Sumimasen, eki wa doko desu ka.' },
    { who: 'B', name: '店員', avatar: TOKENS.book2, jp: [['まっすぐ', null],['行','い'],['って'],'、', ['二','ふた'],'つ', ['目','め'],'の', ['信号','しんごう'],'を', ['右','みぎ'],'に', ['曲','ま'],['がって'],['ください。']], zh: '直走，在第二個紅綠燈右轉。', rom: 'Massugu itte, futatsu me no shingou wo migi ni magatte kudasai.' },
    { who: 'A', name: '田中', avatar: TOKENS.book3, jp: [['ありがとう'],['ございます。']], zh: '謝謝您。', rom: 'Arigatou gozaimasu.' },
    { who: 'B', name: '店員', avatar: TOKENS.book2, jp: [['いいえ'],['、', null],['気','き'],'を', ['つけて'],['ください。']], zh: '不會，請小心。', rom: 'Iie, ki wo tsukete kudasai.' },
  ];

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 180 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub="BOOK 3 · LESSON 2-2" title="觀光日語：問路篇" accent={TOKENS.book3Ink}
        right={<button onClick={() => setFuri(!furi)} style={{
          width: 42, height: 32, borderRadius: 999, border: `1px solid ${T.rule}`,
          background: furi ? TOKENS.book3Soft : T.ivory, color: furi ? TOKENS.book3Ink : T.inkMute,
          fontFamily: FONTS.jp, fontSize: 11, fontWeight: 700, cursor: 'pointer',
        }}>振</button>}/>

      {/* Scene card */}
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{
          background: TOKENS.book3Soft, borderRadius: 16, padding: 14,
          border: `1px solid ${TOKENS.book3}`, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ fontSize: 26 }}>🚉</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: TOKENS.book3Ink, letterSpacing: 1.2 }}>SCENE · 場面</div>
            <div style={{ fontFamily: FONTS.zhHand, fontSize: 15, fontWeight: 700, color: TOKENS.book3Ink, marginTop: 2 }}>在街上向人問路</div>
          </div>
          <button style={{
            padding: '8px 12px', borderRadius: 999, background: TOKENS.book3Ink,
            color: '#fff', border: 'none', fontFamily: FONTS.zh, fontSize: 12, fontWeight: 700, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            <svg width="10" height="10" viewBox="0 0 10 10"><path d="M0 0l10 5L0 10z" fill="#fff"/></svg>
            完整朗讀
          </button>
        </div>
      </div>

      {/* Dialogue list */}
      <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {dialogue.map((d, i) => (
          <div key={i} style={{
            display: 'flex', flexDirection: d.who === 'A' ? 'row' : 'row-reverse',
            gap: 10, alignItems: 'flex-end',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 18, flexShrink: 0,
              background: d.avatar, border: `2px solid #fff`,
              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONTS.jpHand, fontSize: 14, fontWeight: 700, color: d.who === 'A' ? TOKENS.book3Ink : TOKENS.book2Ink,
            }}>{d.name[0]}</div>
            <div style={{ flex: 1, maxWidth: '78%' }}>
              <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: T.inkMute, marginBottom: 4, textAlign: d.who === 'A' ? 'left' : 'right' }}>{d.name}</div>
              <div onClick={() => setActiveIdx(i)} style={{
                background: activeIdx === i ? (d.who === 'A' ? TOKENS.book3Soft : TOKENS.book2Soft) : T.ivory,
                borderRadius: d.who === 'A' ? '4px 18px 18px 18px' : '18px 4px 18px 18px',
                padding: '12px 14px', border: `1px solid ${activeIdx === i ? (d.who === 'A' ? TOKENS.book3 : TOKENS.book2) : T.rule}`,
                cursor: 'pointer', boxShadow: activeIdx === i ? `0 0 0 3px ${(d.who === 'A' ? TOKENS.book3 : TOKENS.book2)}33` : 'none',
                position: 'relative',
              }}>
                <div style={{ lineHeight: 2.2, fontSize: 16 * fontScale }}>
                  <Furigana size={16 * fontScale} show={furi} pairs={d.jp}/>
                </div>
                {activeIdx === i && (
                  <>
                    <div style={{ marginTop: 6, fontFamily: FONTS.mono, fontSize: 10, color: T.inkSoft, fontStyle: 'italic' }}>{d.rom}</div>
                    <div style={{ marginTop: 6, fontFamily: FONTS.zh, fontSize: 12, color: T.inkSoft, paddingTop: 6, borderTop: `1px dashed ${T.rule}` }}>{d.zh}</div>
                  </>
                )}
              </div>
              {activeIdx === i && (
                <div style={{ marginTop: 6, display: 'flex', gap: 6, justifyContent: d.who === 'A' ? 'flex-start' : 'flex-end' }}>
                  <MiniBtn icon="play" label="聽"/>
                  <MiniBtn icon="mic" label="跟讀"/>
                  <MiniBtn icon="slow" label="慢速"/>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* Floating practice control */}
      <div style={{
        position: 'absolute', bottom: 110, left: 20, right: 20, zIndex: 10,
        background: T.ink, borderRadius: 999, padding: '12px 16px',
        display: 'flex', alignItems: 'center', gap: 12,
        boxShadow: '0 8px 28px rgba(0,0,0,0.18)',
      }}>
        <div style={{ width: 36, height: 36, borderRadius: 18, background: TOKENS.book3, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><rect x="3" y="2" width="3" height="10" fill={T.ink}/><rect x="8" y="2" width="3" height="10" fill={T.ink}/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: FONTS.zh, fontSize: 12, color: T.paper, fontWeight: 600 }}>跟讀練習中</div>
          <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, marginTop: 1 }}>3 / 4 句完成</div>
        </div>
        <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end' }}>
          {[0.5,0.7,0.4,0.9,0.6,0.8,0.5].map((h,i)=>(
            <div key={i} style={{ width: 3, height: h*20, background: TOKENS.book3, borderRadius: 2, opacity: 0.5+h*0.5 }}/>
          ))}
        </div>
      </div>
    </PaperBg>
  );
};

const MiniBtn = ({ icon, label }) => {
  const T = useTheme(false);
  const icons = {
    play: <svg width="10" height="10" viewBox="0 0 10 10"><path d="M0 0l10 5L0 10z" fill={T.ink}/></svg>,
    mic: <svg width="10" height="12" viewBox="0 0 10 12"><rect x="3" width="4" height="7" rx="2" fill={T.ink}/><path d="M1 6c0 2.5 1.8 4 4 4s4-1.5 4-4M5 10v2" stroke={T.ink} strokeWidth="1.2" fill="none"/></svg>,
    slow: <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4.5" stroke={T.ink} strokeWidth="1.2" fill="none"/><text x="5" y="7" textAnchor="middle" fontSize="5" fontWeight="700" fill={T.ink}>0.7</text></svg>,
  };
  return (
    <button style={{
      padding: '5px 10px', borderRadius: 999, background: '#fff',
      border: `1px solid ${T.rule}`, fontFamily: FONTS.zh, fontSize: 10,
      color: T.ink, fontWeight: 600, cursor: 'pointer',
      display: 'flex', alignItems: 'center', gap: 4,
    }}>{icons[icon]}{label}</button>
  );
};

// ─────────────────────────────────────────────────────────────
// 影片播放頁（YouTube）
// ─────────────────────────────────────────────────────────────
const VideoScreen = ({ dark, onBack, fontScale = 1 }) => {
  const T = useTheme(dark);
  const [tab, setTab] = React.useState('notes');
  const [playing, setPlaying] = React.useState(true);

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 100 }}>
      {/* Custom dark video header */}
      <div style={{ background: '#000', paddingTop: 54, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 12px 8px' }}>
          <button onClick={onBack} style={{ width: 38, height: 38, borderRadius: 19, border: 'none', background: 'rgba(255,255,255,0.15)', cursor: 'pointer' }}>
            <svg width="20" height="20" viewBox="0 0 20 20"><path d="M13 4l-6 6 6 6" stroke="#fff" strokeWidth="2" strokeLinecap="round" fill="none"/></svg>
          </button>
          <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: '#fff', opacity: 0.7 }}>BOOK 1 · LESSON 5</div>
          <button style={{ width: 38, height: 38, borderRadius: 19, border: 'none', background: 'rgba(255,255,255,0.15)', cursor: 'pointer' }}>
            <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="5" cy="10" r="1.5" fill="#fff"/><circle cx="10" cy="10" r="1.5" fill="#fff"/><circle cx="15" cy="10" r="1.5" fill="#fff"/></svg>
          </button>
        </div>
        {/* Player */}
        <div style={{ aspectRatio: '16/9', position: 'relative', background: `linear-gradient(135deg, ${TOKENS.book1Ink}, ${TOKENS.book1})` }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.18,
            backgroundImage: `repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 22px)` }}/>
          <div style={{ position: 'absolute', top: 12, left: 12, padding: '4px 8px', borderRadius: 4, background: '#E53935', fontFamily: FONTS.mono, fontSize: 10, color: '#fff', fontWeight: 700 }}>YOUTUBE</div>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <button onClick={() => setPlaying(!playing)} style={{
              width: 64, height: 64, borderRadius: 32, background: 'rgba(255,255,255,0.95)',
              border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {playing ? (
                <svg width="20" height="22" viewBox="0 0 20 22"><rect x="2" y="0" width="6" height="22" rx="1" fill={TOKENS.book1Ink}/><rect x="12" y="0" width="6" height="22" rx="1" fill={TOKENS.book1Ink}/></svg>
              ) : (
                <svg width="22" height="26" viewBox="0 0 22 26"><path d="M0 0l22 13L0 26z" fill={TOKENS.book1Ink}/></svg>
              )}
            </button>
          </div>
          {/* Subtitle bar */}
          <div style={{ position: 'absolute', bottom: 50, left: 12, right: 12, padding: '8px 12px', borderRadius: 8, background: 'rgba(0,0,0,0.6)' }}>
            <div style={{ fontFamily: FONTS.jp, fontSize: 14, color: '#fff' }}>
              <ruby>動詞<rt style={{ fontSize: 8 }}>どうし</rt></ruby>の「て<ruby>形<rt style={{ fontSize: 8 }}>けい</rt></ruby>」は…
            </div>
            <div style={{ fontFamily: FONTS.zh, fontSize: 11, color: '#fff', opacity: 0.85, marginTop: 2 }}>動詞的「て形」是…</div>
          </div>
          {/* Progress */}
          <div style={{ position: 'absolute', bottom: 16, left: 12, right: 12 }}>
            <div style={{ height: 3, background: 'rgba(255,255,255,0.3)', borderRadius: 2, position: 'relative' }}>
              <div style={{ width: '34%', height: '100%', background: '#E53935', borderRadius: 2 }}/>
              <div style={{ position: 'absolute', left: '34%', top: -4, width: 11, height: 11, borderRadius: 6, background: '#E53935', transform: 'translateX(-50%)' }}/>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontFamily: FONTS.mono, fontSize: 10, color: '#fff', opacity: 0.85 }}>
              <span>10:58</span><span>32:18</span>
            </div>
          </div>
        </div>
        {/* Controls */}
        <div style={{ display: 'flex', justifyContent: 'space-around', padding: 12, background: '#000' }}>
          {[
            ['0.7×', 'speed'], ['CC', 'cc'], ['振', 'furi'], ['🔁', 'loop'], ['📝', 'note'],
          ].map(([l, k]) => (
            <button key={k} style={{
              padding: '6px 10px', borderRadius: 999, border: '1px solid rgba(255,255,255,0.25)',
              background: 'transparent', color: '#fff', fontFamily: FONTS.zh, fontSize: 11, cursor: 'pointer',
            }}>{l}</button>
          ))}
        </div>
      </div>

      {/* Title */}
      <div style={{ padding: '20px 20px 0' }}>
        <SectionLabel color={TOKENS.book1Ink}>第5課</SectionLabel>
        <div style={{ marginTop: 6, fontFamily: FONTS.zhHand, fontSize: 22 * fontScale, fontWeight: 700, color: T.ink, lineHeight: 1.3 }}>
          動詞て形的變化與用法
        </div>
        <div style={{ marginTop: 6, display: 'flex', gap: 12, fontFamily: FONTS.mono, fontSize: 11, color: T.inkMute }}>
          <span>👁 1.2M views</span>
          <span>📅 2022.10</span>
          <span>⭐ 4.9</span>
        </div>
      </div>

      {/* Tab */}
      <div style={{ padding: '16px 20px 0', display: 'flex', gap: 6, borderBottom: `1px solid ${T.rule}` }}>
        {[['notes','學習筆記'],['chap','章節'],['trans','逐字稿']].map(([id, label]) => (
          <button key={id} onClick={() => setTab(id)} style={{
            padding: '8px 0', flex: 1, border: 'none', background: 'transparent',
            borderBottom: `2px solid ${tab === id ? TOKENS.book1Ink : 'transparent'}`,
            fontFamily: FONTS.zh, fontSize: 13, fontWeight: tab === id ? 700 : 500,
            color: tab === id ? TOKENS.book1Ink : T.inkSoft, cursor: 'pointer',
          }}>{label}</button>
        ))}
      </div>

      {/* Notes / chapters */}
      {tab === 'notes' && (
        <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { time: '02:15', text: 'Ⅰ類動詞「う・つ・る」結尾 → 「って」' },
            { time: '08:42', text: '不規則動詞：する→して、来る→きて' },
            { time: '15:30', text: '「て形」可表達連續動作' },
          ].map((n, i) => (
            <div key={i} style={{
              display: 'flex', gap: 12, alignItems: 'flex-start',
              padding: 12, background: T.ivory, borderRadius: 12,
              border: `1px solid ${T.rule}`,
            }}>
              <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: TOKENS.book1Ink, fontWeight: 700, padding: '2px 6px', background: TOKENS.book1Soft, borderRadius: 4 }}>{n.time}</div>
              <div style={{ flex: 1, fontFamily: FONTS.zh, fontSize: 13, color: T.ink }}>{n.text}</div>
              <button style={{ padding: '2px 8px', borderRadius: 999, background: 'transparent', border: `1px solid ${T.rule}`, fontFamily: FONTS.zh, fontSize: 10, color: T.inkMute, cursor: 'pointer' }}>跳轉</button>
            </div>
          ))}
          <button style={{ padding: '12px', borderRadius: 12, background: TOKENS.book1Soft, border: `1.5px dashed ${TOKENS.book1Ink}`, fontFamily: FONTS.zh, fontSize: 13, color: TOKENS.book1Ink, fontWeight: 600, cursor: 'pointer' }}>
            + 在 11:24 新增筆記
          </button>
        </div>
      )}
      {tab === 'chap' && (
        <div style={{ padding: '16px 20px' }}>
          {['00:00 開場介紹','02:15 Ⅰ類動詞變化','08:42 不規則動詞','15:30 例句練習','22:00 練習問題'].map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: `1px solid ${T.rule}` }}>
              <div style={{ width: 24, height: 24, borderRadius: 12, background: i === 1 ? TOKENS.book1 : T.paperDeep, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONTS.mono, fontSize: 11, color: i === 1 ? TOKENS.book1Ink : T.inkSoft, fontWeight: 700 }}>{i+1}</div>
              <div style={{ fontFamily: FONTS.zh, fontSize: 13, color: T.ink }}>{c}</div>
            </div>
          ))}
        </div>
      )}
      {tab === 'trans' && (
        <div style={{ padding: '16px 20px', fontFamily: FONTS.jp, fontSize: 13, color: T.inkSoft, lineHeight: 2 }}>
          皆さん、こんにちは。井上です。今日は動詞のて形について勉強します。て形は会話で…
        </div>
      )}
    </PaperBg>
  );
};

// ─────────────────────────────────────────────────────────────
// 測驗模組
// ─────────────────────────────────────────────────────────────
const QuizScreen = ({ dark, onBack, fontScale = 1 }) => {
  const T = useTheme(dark);
  const [picked, setPicked] = React.useState('A');
  const [revealed, setRevealed] = React.useState(true);
  const correct = 'A';

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 120 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub="LESSON 5 · QUIZ" title="本課測驗" accent={TOKENS.book4Ink}/>

      {/* progress */}
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ flex: 1, height: 6, background: T.rule, borderRadius: 3, overflow: 'hidden' }}>
            <div style={{ width: '40%', height: '100%', background: TOKENS.book4 }}/>
          </div>
          <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: T.inkMute }}>4 / 10</div>
        </div>
      </div>

      {/* Question */}
      <div style={{ padding: '20px' }}>
        <PaperCard dark={dark} padding={20}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <SectionLabel color={TOKENS.book4Ink}>第 4 題 · 文型</SectionLabel>
            <Stamp char={revealed ? '正' : '？'} color={revealed ? TOKENS.book4Ink : T.inkMute} size={36}/>
          </div>
          <div style={{ marginTop: 14, fontFamily: FONTS.jp, fontSize: 18 * fontScale, color: T.ink, lineHeight: 1.7 }}>
            <ruby>朝<rt style={{ fontSize: 9, color: T.inkMute }}>あさ</rt></ruby>ご<ruby>飯<rt style={{ fontSize: 9, color: T.inkMute }}>はん</rt></ruby>を <span style={{ display: 'inline-block', minWidth: 60, textAlign: 'center', borderBottom: `2px solid ${TOKENS.book4Ink}`, padding: '0 4px', color: TOKENS.book4Ink, fontWeight: 700 }}>＿＿＿</span>、<ruby>学校<rt style={{ fontSize: 9, color: T.inkMute }}>がっこう</rt></ruby>へ<ruby>行<rt style={{ fontSize: 9, color: T.inkMute }}>い</rt></ruby>きます。
          </div>
          <div style={{ marginTop: 6, fontFamily: FONTS.zh, fontSize: 12, color: T.inkSoft }}>請選擇正確的「て形」變化</div>
        </PaperCard>

        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { id: 'A', jp: '食べて', rom: 'tabete' },
            { id: 'B', jp: '食べた', rom: 'tabeta' },
            { id: 'C', jp: '食べる', rom: 'taberu' },
            { id: 'D', jp: '食べない', rom: 'tabenai' },
          ].map(opt => {
            const isPicked = picked === opt.id;
            const isCorrect = revealed && opt.id === correct;
            const isWrong = revealed && isPicked && opt.id !== correct;
            const accent = isCorrect ? TOKENS.book4Ink : (isWrong ? '#C8553D' : (isPicked ? T.ink : T.rule));
            const bg = isCorrect ? TOKENS.book4Soft : (isWrong ? '#FBE5E0' : T.ivory);
            return (
              <button key={opt.id} onClick={() => { setPicked(opt.id); setRevealed(true); }} style={{
                background: bg, border: `1.5px solid ${accent}`,
                borderRadius: 14, padding: '14px 16px', cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 14, textAlign: 'left',
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 14, flexShrink: 0,
                  background: isPicked ? accent : 'transparent',
                  border: `1.5px solid ${accent}`, color: isPicked ? '#fff' : T.inkSoft,
                  fontFamily: FONTS.mono, fontSize: 12, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{opt.id}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: FONTS.jp, fontSize: 17, fontWeight: 600, color: T.ink }}>{opt.jp}</div>
                  <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, fontStyle: 'italic' }}>{opt.rom}</div>
                </div>
                {isCorrect && <svg width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="10" fill={TOKENS.book4Ink}/><path d="M6 11l4 4 7-8" stroke="#fff" strokeWidth="2.4" fill="none" strokeLinecap="round"/></svg>}
                {isWrong && <svg width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="10" fill="#C8553D"/><path d="M6 6l10 10M16 6l-10 10" stroke="#fff" strokeWidth="2.4"/></svg>}
              </button>
            );
          })}
        </div>

        {revealed && (
          <PaperCard dark={dark} padding={14} style={{ marginTop: 16, background: TOKENS.book4Soft, borderColor: TOKENS.book4Ink + '55' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
              <Stamp char="解" color={TOKENS.book4Ink} size={28}/>
              <div style={{ fontFamily: FONTS.zhHand, fontSize: 14, fontWeight: 700, color: TOKENS.book4Ink }}>解說</div>
            </div>
            <div style={{ fontFamily: FONTS.zh, fontSize: 13, color: TOKENS.book4Ink, lineHeight: 1.7 }}>
              「食べる」屬於 Ⅱ 類動詞，去掉「る」加「て」即可。所以「食べて」是正確答案。
              <br/>例句：<span style={{ fontFamily: FONTS.jp }}>朝ご飯を食べて、学校へ行きます。</span>（吃完早餐後去學校）
            </div>
          </PaperCard>
        )}
      </div>

      {revealed && (
        <div style={{ position: 'absolute', bottom: 28, left: 20, right: 20, zIndex: 10 }}>
          <button style={{
            width: '100%', padding: 14, borderRadius: 999,
            background: TOKENS.book4Ink, color: '#fff', border: 'none',
            fontFamily: FONTS.zh, fontSize: 15, fontWeight: 700, cursor: 'pointer',
            boxShadow: '0 4px 16px rgba(63,96,40,0.35)',
          }}>下一題 →</button>
        </div>
      )}
    </PaperBg>
  );
};

window.ConversationScreen = ConversationScreen;
window.VideoScreen = VideoScreen;
window.QuizScreen = QuizScreen;