// screens-meta.jsx — 教師頁、開發者 About、書籍宣傳、設定 / 個人

// ─────────────────────────────────────────────────────────────
// 教師頁
// ─────────────────────────────────────────────────────────────
const TeacherScreen = ({ dark, onBack, fontScale = 1 }) => {
  const T = useTheme(dark);
  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 120 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub="先生・PROFILE" title="井上 一宏" accent={TOKENS.red}/>

      {/* Hero */}
      <div style={{ padding: '0 20px' }}>
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '8px 0 20px' }}>
          {/* avatar (mock) */}
          <div style={{ position: 'relative' }}>
            <div style={{
              width: 124, height: 124, borderRadius: 62,
              background: `radial-gradient(circle at 35% 30%, ${TOKENS.book1Soft}, ${TOKENS.book1})`,
              border: `3px solid ${TOKENS.red}`,
              boxShadow: '0 8px 24px rgba(60,40,20,0.15)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative', overflow: 'hidden',
            }}>
              {/* face placeholder, hand-drawn feel */}
              <svg width="124" height="124" viewBox="0 0 124 124">
                <ellipse cx="62" cy="56" rx="34" ry="38" fill="#F4D9B4"/>
                <path d="M28 50 Q 30 24 62 22 Q 94 24 96 50 L 96 38 Q 92 14 62 14 Q 32 14 28 38 Z" fill="#3A2820"/>
                <circle cx="50" cy="58" r="2.5" fill="#231F1A"/>
                <circle cx="74" cy="58" r="2.5" fill="#231F1A"/>
                <path d="M52 72 Q 62 78 72 72" stroke="#231F1A" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
                <path d="M40 88 Q 62 100 84 88 L 90 124 L 34 124 Z" fill="#1F557C"/>
                <rect x="56" y="92" width="12" height="32" fill="#fff"/>
              </svg>
              <div style={{ position: 'absolute', top: -6, right: -6 }}>
                <Stamp char="師" color={TOKENS.red} size={36}/>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 16, fontFamily: FONTS.jpHand, fontSize: 28 * fontScale, fontWeight: 700, color: T.ink }}>井上 一宏</div>
          <div style={{ fontFamily: FONTS.zh, fontSize: 13, color: T.inkSoft, marginTop: 2 }}>イノウエ カズヒロ · Inoue Kazuhiro</div>
          <div style={{ marginTop: 10, display: 'flex', gap: 6 }}>
            <span style={{ fontFamily: FONTS.mono, fontSize: 10, padding: '4px 8px', borderRadius: 4, background: TOKENS.book1Soft, color: TOKENS.book1Ink, fontWeight: 700 }}>NATIVE</span>
            <span style={{ fontFamily: FONTS.mono, fontSize: 10, padding: '4px 8px', borderRadius: 4, background: TOKENS.book2Soft, color: TOKENS.book2Ink, fontWeight: 700 }}>4 BOOKS</span>
            <span style={{ fontFamily: FONTS.mono, fontSize: 10, padding: '4px 8px', borderRadius: 4, background: '#FBE5E0', color: TOKENS.red, fontWeight: 700 }}>YT 30M+</span>
          </div>
        </div>

        {/* Bio */}
        <PaperCard dark={dark} padding={18}>
          <SectionLabel color={TOKENS.red}>BIO · 簡介</SectionLabel>
          <div style={{ marginTop: 12, fontFamily: FONTS.zh, fontSize: 14 * fontScale, color: T.ink, lineHeight: 1.85 }}>
            日本神戶出身的日語老師，致力於以最貼近台灣學習者的方式，分享道地的日語表達。透過 YouTube 頻道與書籍，協助零基礎自學者快速入門。
          </div>
          <div style={{ marginTop: 16, paddingTop: 14, borderTop: `1px dashed ${T.rule}`, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { y: '1981', t: '日本神戶出生', d: '関西出身' },
              { y: '碩士', t: '國立台灣師範大學', d: '政治學研究所 碩士畢業' },
              { y: '博士班', t: '國立台灣大學', d: '國家發展研究所（未畢業）' },
            ].map((e, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ flexShrink: 0, width: 60, fontFamily: FONTS.mono, fontSize: 11, fontWeight: 700, color: TOKENS.red, paddingTop: 2 }}>{e.y}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: FONTS.zh, fontSize: 13, fontWeight: 600, color: T.ink }}>{e.t}</div>
                  <div style={{ fontFamily: FONTS.zh, fontSize: 12, color: T.inkSoft, marginTop: 1 }}>{e.d}</div>
                </div>
              </div>
            ))}
          </div>
        </PaperCard>

        {/* Contact */}
        <div style={{ marginTop: 16 }}>
          <SectionLabel>CONTACT · 聯絡</SectionLabel>
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { i: '✉️', l: 'taipeitaiwan55@gmail.com', s: 'Email' },
              { i: '🌐', l: 'www.ilovejp-blog.com', s: 'Blog' },
              { i: '📘', l: '/japanese.project', s: 'Facebook' },
              { i: '📸', l: '@inouesensei', s: 'Instagram' },
            ].map(c => (
              <PaperCard key={c.l} dark={dark} padding={12}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ fontSize: 18 }}>{c.i}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: T.inkMute, letterSpacing: 1.2 }}>{c.s.toUpperCase()}</div>
                    <div style={{ fontFamily: FONTS.mono, fontSize: 13, color: T.ink, marginTop: 1 }}>{c.l}</div>
                  </div>
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 11L11 3M5 3h6v6" stroke={T.inkMute} strokeWidth="1.8" fill="none" strokeLinecap="round"/></svg>
                </div>
              </PaperCard>
            ))}
          </div>
        </div>

        {/* Books */}
        <div style={{ marginTop: 20 }}>
          <SectionLabel>WORKS · 著作</SectionLabel>
          <div style={{ marginTop: 12, display: 'flex', gap: 10, overflowX: 'auto', margin: '12px -20px 0', padding: '4px 20px 8px' }}>
            {BOOKS.map(b => (
              <div key={b.id} style={{ flex: '0 0 110px' }}>
                <div style={{
                  background: b.color, borderRadius: 8, aspectRatio: '0.72',
                  border: `1px solid ${b.ink}40`,
                  position: 'relative', overflow: 'hidden', padding: 6,
                }}>
                  <div style={{ position: 'absolute', inset: 0, opacity: 0.2,
                    backgroundImage: `repeating-linear-gradient(135deg, ${b.ink} 0 1px, transparent 1px 12px)` }}/>
                  <div style={{ position: 'relative', fontFamily: FONTS.mono, fontSize: 8, color: b.ink, fontWeight: 700, letterSpacing: 1 }}>{b.tag}</div>
                  <div style={{ position: 'relative', marginTop: 6, fontFamily: FONTS.zhHand, fontSize: 10, color: b.ink, fontWeight: 700, lineHeight: 1.2 }}>從零開始<br/>{b.id > 1 ? `（${b.id}）`: ''}</div>
                </div>
                <div style={{ marginTop: 6, fontFamily: FONTS.zh, fontSize: 11, color: T.ink, fontWeight: 600 }}>{b.short}</div>
                <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: T.inkMute }}>{b.date}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </PaperBg>
  );
};

// ─────────────────────────────────────────────────────────────
// 開發者 About 頁
// ─────────────────────────────────────────────────────────────
const AboutDevScreen = ({ dark, onBack, fontScale = 1 }) => {
  const T = useTheme(dark);
  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 120 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub="ABOUT THIS APP" title="開發者の話" accent={TOKENS.book3Ink}/>

      <div style={{ padding: '0 20px' }}>
        {/* 1 page intro */}
        <div style={{ position: 'relative', padding: '8px 0 20px', textAlign: 'center' }}>
          <div style={{ display: 'inline-block', position: 'relative' }}>
            <div style={{ fontFamily: FONTS.jpHand, fontSize: 32 * fontScale, fontWeight: 700, color: T.ink, lineHeight: 1.2 }}>
              はじめまして<br/>
              <span style={{ color: TOKENS.red }}>こんにちは。</span>
            </div>
            <Squiggle color={TOKENS.book3} w={120} h={8} style={{ margin: '8px auto 0' }}/>
          </div>
          <div style={{ marginTop: 12, fontFamily: FONTS.zh, fontSize: 14 * fontScale, color: T.inkSoft, lineHeight: 1.8 }}>
            這個 App 是把井上老師的書籍 + YouTube 頻道<br/>整合成一個方便每天打開的學習空間。
          </div>
        </div>

        {/* Mission */}
        <PaperCard dark={dark} padding={20} accent={TOKENS.book3}>
          <div style={{ paddingLeft: 8 }}>
            <SectionLabel color={TOKENS.book3Ink}>WHY · 為什麼做這個 App</SectionLabel>
            <div style={{ marginTop: 12, fontFamily: FONTS.zh, fontSize: 14 * fontScale, color: T.ink, lineHeight: 1.85 }}>
              學日文的朋友常需要在書、YouTube、PDF 之間切換，很容易斷掉節奏。<br/><br/>
              這個 App 把同一課的影片、振假名課文、單字、測驗放在同一個畫面，希望你可以更專注、更有節奏地學下去。
            </div>
          </div>
        </PaperCard>

        {/* Roadmap */}
        <div style={{ marginTop: 20 }}>
          <SectionLabel color={TOKENS.book4Ink}>ROADMAP · 規劃中</SectionLabel>
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { s: '已上線', t: '4 本書全套課程內容', c: TOKENS.book4 },
              { s: '已上線', t: '7 種介面語言切換', c: TOKENS.book4 },
              { s: '進行中', t: '會話 AI 跟讀評分', c: TOKENS.book2 },
              { s: '規劃中', t: '社群學習・學伴配對', c: TOKENS.book3 },
              { s: '規劃中', t: '老師後續新書持續上架', c: TOKENS.book1 },
            ].map((r, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: 12,
                background: T.ivory, borderRadius: 12, border: `1px solid ${T.rule}`,
              }}>
                <div style={{ width: 8, height: 8, borderRadius: 4, background: r.c }}/>
                <div style={{ flex: 1, fontFamily: FONTS.zh, fontSize: 13, color: T.ink }}>{r.t}</div>
                <span style={{ fontFamily: FONTS.mono, fontSize: 9, padding: '3px 6px', borderRadius: 3, background: r.c + '33', color: T.inkSoft, fontWeight: 700 }}>{r.s}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Credits */}
        <div style={{ marginTop: 20 }}>
          <SectionLabel>CREDITS · 製作</SectionLabel>
          <PaperCard dark={dark} padding={16} style={{ marginTop: 10 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr', rowGap: 10, columnGap: 12, fontFamily: FONTS.zh, fontSize: 13 }}>
              <div style={{ color: T.inkMute }}>內容</div>
              <div style={{ color: T.ink }}>井上 一宏 老師</div>
              <div style={{ color: T.inkMute }}>設計</div>
              <div style={{ color: T.ink }}>本 App 開發者</div>
              <div style={{ color: T.inkMute }}>開發</div>
              <div style={{ color: T.ink }}>本 App 開發者</div>
              <div style={{ color: T.inkMute }}>感謝</div>
              <div style={{ color: T.ink }}>所有支持井上老師的學習者</div>
            </div>
          </PaperCard>
        </div>

        {/* Personal note */}
        <div style={{ marginTop: 20, padding: '20px', background: TOKENS.book3Soft, borderRadius: 16, border: `1px dashed ${TOKENS.book3Ink}55`, position: 'relative' }}>
          <WashiTape color={TOKENS.book3} w={48} h={16} rot={-4} pattern="stripe" style={{ position: 'absolute', top: -8, right: 16 }}/>
          <div style={{ fontFamily: FONTS.zhHand, fontSize: 14 * fontScale, color: TOKENS.book3Ink, lineHeight: 1.85 }}>
            如果這個 App 對你的日文學習有幫助，<br/>
            我會非常開心。一起加油吧！<br/>
            <span style={{ fontFamily: FONTS.jpHand, marginTop: 8, display: 'inline-block' }}>一緒に頑張りましょう ✨</span>
          </div>
        </div>

        <div style={{ marginTop: 20, textAlign: 'center', fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute }}>
          v 1.0.0 · build 2026.05<br/>made with ☕ + ✏️
        </div>
      </div>
    </PaperBg>
  );
};

// ─────────────────────────────────────────────────────────────
// 書籍宣傳頁
// ─────────────────────────────────────────────────────────────
const BookPromoScreen = ({ dark, onBack, bookId = 1, fontScale = 1, onChange }) => {
  const T = useTheme(dark);
  const book = BOOKS.find(b => b.id === bookId) || BOOKS[0];

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 100 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub="WORKS · 著作與教學資源" title="從零開始 用YouTube學日文" accent={book.ink}/>

      {/* book picker */}
      <div style={{ padding: '4px 20px 0', display: 'flex', gap: 6 }}>
        {BOOKS.map(b => (
          <button key={b.id} onClick={() => onChange && onChange(b.id)} style={{
            flex: 1, padding: '8px 4px', borderRadius: 10,
            background: b.id === bookId ? b.color : 'transparent',
            border: `1px solid ${b.id === bookId ? b.ink : T.rule}`,
            fontFamily: FONTS.mono, fontSize: 11, fontWeight: 700,
            color: b.id === bookId ? b.ink : T.inkSoft, cursor: 'pointer',
          }}>{b.tag}</button>
        ))}
      </div>

      {/* Cover */}
      <div style={{ padding: '20px' }}>
        <div style={{
          background: book.color, borderRadius: 20, padding: 28, position: 'relative', overflow: 'hidden',
          border: `1px solid ${book.ink}40`, aspectRatio: '0.72',
          maxHeight: 420, display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.18,
            backgroundImage: `repeating-linear-gradient(135deg, ${book.ink} 0 1px, transparent 1px 22px)` }}/>
          <div style={{ position: 'relative', fontFamily: FONTS.mono, fontSize: 11, color: book.ink, letterSpacing: 1.2, fontWeight: 700 }}>井上一宏 著</div>
          <div style={{ position: 'relative', marginTop: 14, fontFamily: FONTS.zhHand, fontSize: 32 * fontScale, fontWeight: 700, color: book.ink, lineHeight: 1.15 }}>
            從零開始<br/>用 YouTube 影片學日文 {book.id > 1 ? `（${book.id}）` : ''}
          </div>
          <div style={{ position: 'relative', marginTop: 8, fontFamily: FONTS.zh, fontSize: 14, color: book.ink, opacity: 0.9 }}>{book.subtitle}</div>
          <div style={{ flex: 1 }}/>
          <div style={{ position: 'relative', display: 'inline-flex', gap: 8, alignSelf: 'flex-start', background: '#fff', padding: '8px 12px', borderRadius: 8 }}>
            <div style={{ fontFamily: FONTS.zh, fontSize: 11, color: book.ink, fontWeight: 700 }}>{book.desc}</div>
          </div>
        </div>
      </div>

      {/* Stats */}
      <div style={{ padding: '0 20px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {[
          { k: '上市', v: book.date },
          { k: '課數', v: `${book.lessons} 課` },
          { k: '部分', v: `${book.parts} 大單元` },
        ].map(s => (
          <div key={s.k} style={{ background: T.ivory, border: `1px solid ${T.rule}`, borderRadius: 12, padding: 12, textAlign: 'center' }}>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, letterSpacing: 1 }}>{s.k.toUpperCase()}</div>
            <div style={{ fontFamily: FONTS.zhHand, fontSize: 16, fontWeight: 700, color: book.ink, marginTop: 4 }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Watch video */}
      <div style={{ padding: '20px' }}>
        <button style={{
          width: '100%', padding: 14, borderRadius: 14,
          background: '#E53935', color: '#fff', border: 'none',
          fontFamily: FONTS.zh, fontSize: 14, fontWeight: 700, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <svg width="20" height="14" viewBox="0 0 20 14"><rect width="20" height="14" rx="3" fill="#fff" fillOpacity="0.18"/><path d="M8 4l5 3-5 3z" fill="#fff"/></svg>
          觀看教學影片
        </button>
      </div>

      {/* Buy links */}
      <div style={{ padding: '0 20px' }}>
        <SectionLabel color={book.ink}>購買 · WHERE TO BUY</SectionLabel>
        <div style={{ marginTop: 12 }}>
          <div style={{ fontFamily: FONTS.zh, fontSize: 12, fontWeight: 700, color: T.inkSoft, marginBottom: 8 }}>📘 實體書</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {['博客來','誠品線上','金石堂','MOMO'].map(s => <BuyLink key={s} name={s} dark={dark}/>)}
          </div>
          <div style={{ fontFamily: FONTS.zh, fontSize: 12, fontWeight: 700, color: T.inkSoft, marginTop: 14, marginBottom: 8 }}>📱 電子書</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {['博客來電子書','Readmoo','KOBO','Bookwalker'].map(s => <BuyLink key={s} name={s} dark={dark}/>)}
          </div>
          <div style={{ marginTop: 12, fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, fontStyle: 'italic' }}>
            ※ 詳細價格依照各販賣網站顯示為主
          </div>
        </div>
      </div>
    </PaperBg>
  );
};

const BuyLink = ({ name, dark }) => {
  const T = useTheme(dark);
  return (
    <button style={{
      padding: '12px', background: T.ivory, border: `1px solid ${T.rule}`,
      borderRadius: 12, fontFamily: FONTS.zh, fontSize: 12, fontWeight: 600,
      color: T.ink, cursor: 'pointer', textAlign: 'left',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      {name}
      <svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 9L9 3M5 3h4v4" stroke={T.inkMute} strokeWidth="1.6" fill="none" strokeLinecap="round"/></svg>
    </button>
  );
};

// ─────────────────────────────────────────────────────────────
// 個人 / 設定頁
// ─────────────────────────────────────────────────────────────
const ProfileScreen = ({ dark, onGoTeacher, onGoAbout, onLanguage, fontScale = 1 }) => {
  const T = useTheme(dark);
  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 120 }}>
      <div style={{ paddingTop: 56, paddingLeft: 20, paddingRight: 20 }}>
        <SectionLabel>マイ · MY</SectionLabel>
        <div style={{ marginTop: 8, fontFamily: FONTS.jpHand, fontSize: 30 * fontScale, fontWeight: 700, color: T.ink }}>我的</div>
      </div>

      {/* User card */}
      <div style={{ padding: '16px 20px 0' }}>
        <PaperCard dark={dark} padding={16}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 56, height: 56, borderRadius: 28,
              background: TOKENS.book2Soft, border: `2px dashed ${TOKENS.book2Ink}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONTS.jpHand, fontSize: 22, fontWeight: 700, color: TOKENS.book2Ink,
            }}>あ</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: FONTS.zh, fontSize: 15, fontWeight: 700, color: T.ink }}>學習者あなた</div>
              <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: T.inkMute, marginTop: 2 }}>JLPT N4 · 學習中</div>
            </div>
            <PaperButton size="sm">編輯</PaperButton>
          </div>
          <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px dashed ${T.rule}`, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
            {[['12','連續日'],['86','已學課'],['540','單字']].map((s,i)=>(
              <div key={i} style={{ textAlign: 'center', borderLeft: i ? `1px solid ${T.rule}` : 'none' }}>
                <div style={{ fontFamily: FONTS.jpHand, fontSize: 22, fontWeight: 700, color: TOKENS.red }}>{s[0]}</div>
                <div style={{ fontFamily: FONTS.zh, fontSize: 11, color: T.inkMute }}>{s[1]}</div>
              </div>
            ))}
          </div>
        </PaperCard>
      </div>

      {/* Section: Learning */}
      <SettingGroup title="學習設定" dark={dark}>
        <SettingRow icon="📚" title="我在讀的書" detail="4 本" dark={dark}/>
        <SettingRow icon="🔤" title="振假名顯示" detail="自動" dark={dark} chevron/>
        <SettingRow icon="🎯" title="每日學習目標" detail="20 分鐘" dark={dark}/>
        <SettingRow icon="🔔" title="提醒時間" detail="每天 20:00" dark={dark}/>
      </SettingGroup>

      <SettingGroup title="App 設定" dark={dark}>
        <SettingRow icon="🌐" title="介面語言" detail="繁體中文" onClick={onLanguage} dark={dark}/>
        <SettingRow icon="🌓" title="外觀" detail="跟隨系統" dark={dark}/>
        <SettingRow icon="🔡" title="字級大小" detail="標準" dark={dark}/>
        <SettingRow icon="📥" title="離線下載" detail="管理" dark={dark}/>
      </SettingGroup>

      <SettingGroup title="關於" dark={dark}>
        <SettingRow icon="👨‍🏫" title="井上老師" onClick={onGoTeacher} dark={dark}/>
        <SettingRow icon="📖" title="書籍與購買" dark={dark}/>
        <SettingRow icon="ℹ️" title="關於這個 App" onClick={onGoAbout} dark={dark}/>
        <SettingRow icon="📝" title="使用條款" dark={dark}/>
      </SettingGroup>

      <div style={{ padding: '20px', textAlign: 'center', fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute }}>
        ilovejp · v 1.0.0 · 2026.05
      </div>
    </PaperBg>
  );
};

const SettingGroup = ({ title, children, dark }) => {
  const T = useTheme(dark);
  return (
    <div style={{ padding: '20px 20px 0' }}>
      <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, letterSpacing: 1.2, paddingLeft: 14, marginBottom: 8, textTransform: 'uppercase' }}>{title}</div>
      <div style={{ background: T.ivory, borderRadius: 14, border: `1px solid ${T.rule}`, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
};

const SettingRow = ({ icon, title, detail, onClick, chevron = true, dark }) => {
  const T = useTheme(dark);
  return (
    <button onClick={onClick} style={{
      width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
      background: 'transparent', border: 'none', borderBottom: `1px solid ${T.rule}`,
      cursor: 'pointer', textAlign: 'left',
    }}>
      <div style={{ width: 28, height: 28, borderRadius: 8, background: T.paperDeep, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15 }}>{icon}</div>
      <div style={{ flex: 1, fontFamily: FONTS.zh, fontSize: 14, color: T.ink, fontWeight: 500 }}>{title}</div>
      {detail && <div style={{ fontFamily: FONTS.zh, fontSize: 12, color: T.inkMute }}>{detail}</div>}
      {chevron && <svg width="10" height="14" viewBox="0 0 10 14"><path d="M2 1l6 6-6 6" stroke={T.inkMute} strokeWidth="1.8" fill="none" strokeLinecap="round"/></svg>}
    </button>
  );
};

// ─────────────────────────────────────────────────────────────
// 首次啟動語言引導
// ─────────────────────────────────────────────────────────────
const LanguageOnboard = ({ dark, onDone, current = 'zh-TW' }) => {
  const T = useTheme(dark);
  const [pick, setPick] = React.useState(current);
  const langs = [
    { id: 'zh-TW', name: '繁體中文', sub: 'Traditional Chinese', flag: '🇹🇼' },
    { id: 'zh-CN', name: '简体中文', sub: 'Simplified Chinese', flag: '🇨🇳' },
    { id: 'en', name: 'English', sub: 'English', flag: '🇺🇸' },
    { id: 'ko', name: '한국어', sub: 'Korean', flag: '🇰🇷' },
    { id: 'vi', name: 'Tiếng Việt', sub: 'Vietnamese', flag: '🇻🇳' },
    { id: 'id', name: 'Bahasa Indonesia', sub: 'Indonesian', flag: '🇮🇩' },
    { id: 'ja', name: '日本語', sub: 'Japanese', flag: '🇯🇵' },
  ];
  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 100 }}>
      <div style={{ padding: '64px 24px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10, background: TOKENS.red,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: FONTS.jpHand, color: '#fff', fontSize: 18, fontWeight: 700,
            transform: 'rotate(-3deg)',
          }}>井</div>
          <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: T.inkMute, letterSpacing: 1.5 }}>ILOVEJP</div>
        </div>
        <div style={{ fontFamily: FONTS.jpHand, fontSize: 32, fontWeight: 700, color: T.ink, lineHeight: 1.2 }}>
          ようこそ。<br/>
          <span style={{ color: TOKENS.red }}>歡迎</span> · Welcome
        </div>
        <div style={{ marginTop: 8, fontFamily: FONTS.zh, fontSize: 14, color: T.inkSoft }}>
          請選擇你的介面語言<br/>
          <span style={{ fontFamily: FONTS.mono, fontSize: 11 }}>Please choose your interface language</span>
        </div>
      </div>

      <div style={{ padding: '24px 20px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {langs.map(l => (
          <button key={l.id} onClick={() => setPick(l.id)} style={{
            background: pick === l.id ? TOKENS.book1Soft : T.ivory,
            border: `1.5px solid ${pick === l.id ? TOKENS.book1Ink : T.rule}`,
            borderRadius: 14, padding: '14px 16px', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{ fontSize: 22 }}>{l.flag}</div>
            <div style={{ flex: 1, textAlign: 'left' }}>
              <div style={{ fontFamily: FONTS.zh, fontSize: 14, fontWeight: 700, color: T.ink }}>{l.name}</div>
              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, marginTop: 1 }}>{l.sub}</div>
            </div>
            <div style={{
              width: 22, height: 22, borderRadius: 11,
              border: `1.5px solid ${pick === l.id ? TOKENS.book1Ink : T.rule}`,
              background: pick === l.id ? TOKENS.book1Ink : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {pick === l.id && <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6l3 3 5-6" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>}
            </div>
          </button>
        ))}
      </div>

      <div style={{ padding: '24px 20px 0' }}>
        <button onClick={() => onDone && onDone(pick)} style={{
          width: '100%', padding: 14, borderRadius: 999,
          background: T.ink, color: T.paper, border: 'none',
          fontFamily: FONTS.zh, fontSize: 15, fontWeight: 700, cursor: 'pointer',
        }}>はじめる · 開始學日文</button>
      </div>
    </PaperBg>
  );
};

window.TeacherScreen = TeacherScreen;
window.AboutDevScreen = AboutDevScreen;
window.BookPromoScreen = BookPromoScreen;
window.ProfileScreen = ProfileScreen;
window.LanguageOnboard = LanguageOnboard;