// Handbook web page — opens when parent taps WhatsApp link.
// Self-contained, mobile-web responsive. Branded Tom Lee, EN/中.

function HandbookWeb({ dark, onLangChange, onClose }) {
  const c = TL_TOKENS[dark ? 'dark' : 'light'];
  const lang = tlLang();
  const [, force] = React.useState(0);
  const toggleLang = () => {
    window.__tlLang = (lang === 'zh' ? 'en' : 'zh');
    if (onLangChange) onLangChange(window.__tlLang);
    force(x => x + 1);
  };
  const student = TL_STUDENTS[0];
  const remarkEn = "Sophie's tone in the Arabesque is really starting to sing. Tackle the LH staccato in bars 9–12 slowly with a metronome — it's the last technical hurdle before this piece is ready for the recital.";
  const remarkZh = '今堂 Sophie 的《Arabesque》音色開始有歌唱性，非常美妙。請她用節拍器慢練第 9–12 小節左手斷奏 — 這是準備演奏會前最後一個技術關卡。';
  const homeworkEn = 'Hanon No.3 at ♩=96 by next lesson. Memorise bars 1–16 of the Bach Minuet. Slow LH staccato bars 9–12 of the Arabesque.';
  const homeworkZh = '下堂前 Hanon 第 3 首 ♩=96。背 Bach 小步舞曲第 1–16 小節。Arabesque 第 9–12 小節左手斷奏慢練。';

  return (
    <div style={{ height: '100%', overflow: 'auto', background: c.bg, color: c.ink, position: 'relative' }} className="tl-noscroll">
      {/* sticky top bar — like a browser tab */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 5, background: c.bg,
        padding: '10px 20px', borderBottom: `1px solid ${c.line}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <button onClick={onClose} style={{ background: 'none', border: 'none', padding: 4, cursor: 'pointer', color: c.ink2 }}>
          <TLIcon name="chevL" size={18} color={c.ink2} />
        </button>
        <div style={{ flex: 1, fontFamily: TL_FONTS.mono, fontSize: 10, color: c.ink3, letterSpacing: '0.06em' }}>
          portal.tomleeacademy.hk/h/s1-h1
        </div>
        <button onClick={toggleLang} style={{
          background: 'transparent', border: `1px solid ${c.line}`, padding: '4px 8px', cursor: 'pointer',
          fontFamily: TL_FONTS.mono, fontSize: 10, color: c.ink2,
        }}>{t('lang.toggle')}</button>
      </div>

      <div style={{ padding: '20px 24px 60px' }}>
        <TLLogo height={48} />
        <div style={{ marginTop: 18, fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.1em', color: c.ink3, textTransform: 'uppercase' }}>
          {lang === 'zh' ? '課堂手冊 · 2026 年 4 月 28 日（二）' : 'Lesson Handbook · Tue, Apr 28, 2026'}
        </div>
        <h1 style={{
          fontFamily: TL_FONTS.serif, fontWeight: 500, fontSize: 30, lineHeight: 1.1,
          margin: '8px 0 14px', letterSpacing: '-0.02em',
        }}>
          {lang === 'zh' ? <>Sophie 的 <em style={{ fontStyle: 'italic' }}>鋼琴課</em></> : <>Sophie's <em style={{ fontStyle: 'italic' }}>piano lesson</em></>}
        </h1>
        <div style={{ fontFamily: TL_FONTS.sans, fontSize: 13, color: c.ink3 }}>
          {lang === 'zh' ? '陳慧琳老師 · 4 號琴室 · 45 分鐘' : 'Ms. Chen Wai-Lam · Studio 4 · 45 min'}
        </div>

        <div style={{ marginTop: 22, padding: '18px 20px', background: c.surface, border: `1px solid ${c.line}` }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.1em', color: c.ink3, marginBottom: 10, textTransform: 'uppercase' }}>
            {lang === 'zh' ? '老師評語' : 'Teacher remark'}
          </div>
          <div style={{ fontFamily: TL_FONTS.serif, fontSize: 17, lineHeight: 1.5, fontStyle: 'italic', color: c.ink }}>
            "{lang === 'zh' ? remarkZh : remarkEn}"
          </div>
          <div style={{ marginTop: 12, padding: '10px 14px', background: c.bg, border: `1px solid ${c.line}`, display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 28, height: 28, background: c.ink, color: c.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>▶</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.08em', color: c.ink3 }}>{lang === 'zh' ? '錄音 · 0:42' : 'Audio note · 0:42'}</div>
              <div style={{ height: 3, background: c.line, marginTop: 4 }}><div style={{ width: '0%', height: '100%', background: c.accent }} /></div>
            </div>
          </div>
        </div>

        {/* Skills */}
        <div style={{ marginTop: 24 }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.1em', color: c.ink3, marginBottom: 10, textTransform: 'uppercase' }}>
            {lang === 'zh' ? '技能評分' : 'Skill ratings'}
          </div>
          {[
            { en: 'Tone',       zh: '音色', v: 4 },
            { en: 'Rhythm',     zh: '節奏', v: 4 },
            { en: 'Posture',    zh: '姿勢', v: 3 },
            { en: 'Musicality', zh: '音樂感', v: 4 },
          ].map(s => (
            <div key={s.en} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 0', borderBottom: `1px solid ${c.line2}` }}>
              <div style={{ fontFamily: TL_FONTS.sans, fontSize: 14, color: c.ink2 }}>{lang === 'zh' ? s.zh : s.en}</div>
              <div style={{ display: 'flex', gap: 3 }}>
                {[1,2,3,4,5].map(i => (
                  <span key={i} style={{ fontFamily: TL_FONTS.serif, fontSize: 16, color: i <= s.v ? c.accent : c.line.replace('rgba(20,20,20,0.10)', '#CCC') }}>★</span>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Pieces */}
        <div style={{ marginTop: 24 }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.1em', color: c.ink3, marginBottom: 10, textTransform: 'uppercase' }}>
            {lang === 'zh' ? '練習曲目' : 'Pieces practiced'}
          </div>
          {[
            { name: 'Burgmüller — Arabesque, Op.100 No.2', tag: lang === 'zh' ? '打磨中' : 'Polishing', mins: 15 },
            { name: 'Bach — Minuet in G major', tag: lang === 'zh' ? '背譜中' : 'Memorising', mins: 12 },
          ].map((p, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 14px', background: c.surface, border: `1px solid ${c.line}`, marginBottom: 8 }}>
              <div style={{ width: 4, background: c.accent, flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: TL_FONTS.sans, fontSize: 14, color: c.ink }}>{p.name}</div>
                <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                  <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '2px 6px', background: c.ink, color: c.bg }}>{p.tag}</span>
                  <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.08em', color: c.ink3 }}>{p.mins} {lang === 'zh' ? '分鐘' : 'MIN'}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Homework */}
        <div style={{ marginTop: 24, padding: '18px 20px', background: c.accent, color: c.accentInk }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.1em', marginBottom: 8, textTransform: 'uppercase' }}>
            {lang === 'zh' ? '下週功課' : 'Homework for next week'}
          </div>
          <div style={{ fontFamily: TL_FONTS.sans, fontSize: 14, lineHeight: 1.6 }}>
            {lang === 'zh' ? homeworkZh : homeworkEn}
          </div>
        </div>

        {/* Tags */}
        <div style={{ marginTop: 20, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {[
            { en: 'Focused', zh: '專注' },
            { en: 'Recital prep', zh: '備考演奏' },
          ].map(tg => (
            <span key={tg.en} style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '5px 10px', border: `1px solid ${c.line}`, color: c.ink2 }}>{lang === 'zh' ? tg.zh : tg.en}</span>
          ))}
        </div>

        {/* Next focus */}
        <div style={{ marginTop: 24, paddingTop: 18, borderTop: `1px solid ${c.line}` }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.1em', color: c.ink3, marginBottom: 8, textTransform: 'uppercase' }}>
            {lang === 'zh' ? '下堂重點' : 'Focus for next lesson'}
          </div>
          <div style={{ fontFamily: TL_FONTS.serif, fontSize: 16, fontStyle: 'italic', color: c.ink, lineHeight: 1.5 }}>
            {lang === 'zh' ? '完成 Arabesque 全曲背譜，準備五月演奏會試演。' : 'Finish memorising the Arabesque, run-through for the May recital.'}
          </div>
        </div>

        <div style={{ marginTop: 32, padding: '16px 0', textAlign: 'center', borderTop: `1px solid ${c.line2}` }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, letterSpacing: '0.1em', color: c.muted, textTransform: 'uppercase' }}>
            {lang === 'zh' ? '通利音樂學院 · 受密碼保護連結' : 'Tom Lee Academy · Password-protected link'}
          </div>
        </div>
      </div>
    </div>
  );
}

window.HandbookWeb = HandbookWeb;