// mobile-portals.jsx — Authenticated screens (Enroll, Parent, Teacher, Owner)

// ── 5. ENROLL + e-sign ────────────────────────────────────────
function MPageEnroll({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const steps = en
    ? ['Student', 'Schedule', 'Agreement', 'Payment']
    : ['学生信息', '排课', '协议', '支付'];
  const step = 3;

  return (
    <div style={{ background: p.paper, color: p.ink, minHeight: '100%' }}>
      <MTopBar dark={dark} lang={lang} headingFont={headingFont} onBack={() => {}} title={en ? 'Enroll' : '在线注册'} />

      {/* Stepper */}
      <div style={{ padding: '14px 22px 4px', display: 'flex', gap: 4 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: i < step ? p.ink : p.line }} />
        ))}
      </div>
      <div style={{ padding: '8px 22px 14px', display: 'flex', justifyContent: 'space-between' }}>
        <Mono dark={dark} style={{ fontSize: 9 }}>{en ? `Step ${step} of 4` : `第 ${step} / 4 步`}</Mono>
        <Mono dark={dark} style={{ fontSize: 9 }}>{steps[step - 1]}</Mono>
      </div>

      <div style={{ padding: '6px 22px 14px' }}>
        <H as="h1" dark={dark} font={headingFont} size={26} style={{ marginBottom: 6 }}>{en ? 'Studio agreement' : '入学协议'}</H>
        <p style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, lineHeight: 1.55, margin: 0 }}>
          {en ? 'Read the four key terms below. Sign once at the bottom.' : '请阅读以下四项关键条款。在底部签字一次即可。'}
        </p>
      </div>

      <div style={{ padding: '0 22px' }}>
        {[
          { n: '01', h: en ? 'Term length' : '学期长度', b: en ? '8-week terms. Tuition billed monthly. 30-day notice to end.' : '8 周一学期。每月扣费。提前 30 天通知结课。' },
          { n: '02', h: en ? 'Makeup policy' : '补课政策', b: en ? 'Two makeups per term with 24-hour notice. Beyond two, $20 fee.' : '每学期两次补课（提前 24 小时）。超出收 ¥20。' },
          { n: '03', h: en ? 'Recital fee' : '演出费用', b: en ? '$45 spring + fall recital fee covers hall, recording, and program.' : '春季 + 秋季演出费 ¥45，含场地、录音、节目册。' },
          { n: '04', h: en ? 'Photo release' : '影像授权', b: en ? 'Studio may use class photos in marketing. Opt out anytime.' : '学校可使用课堂照片用于宣传。可随时取消授权。' },
        ].map((c, i) => (
          <div key={i} style={{ padding: '14px 0', borderTop: `0.5px solid ${p.line}` }}>
            <div style={{ display: 'flex', gap: 14 }}>
              <Mono dark={dark} style={{ fontSize: 9, paddingTop: 2 }}>{c.n}</Mono>
              <div>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, fontWeight: 600, marginBottom: 4 }}>{c.h}</div>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkSoft, lineHeight: 1.6 }}>{c.b}</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Signature pad */}
      <div style={{ padding: '20px 22px 16px' }}>
        <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Sign here' : '在此签字'}</Mono>
        <div style={{
          marginTop: 8, height: 110,
          border: `0.5px dashed ${p.line}`, borderRadius: TOKENS.radius.md,
          background: p.paperSoft, position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{ fontFamily: '"Caveat", cursive', fontSize: 32, color: p.ink, opacity: 0.85 }}>Lin Chen</span>
          <div style={{ position: 'absolute', bottom: 10, left: 14, right: 14, borderTop: `0.5px solid ${p.line}` }} />
          <div style={{ position: 'absolute', bottom: 0, left: 14, fontFamily: TOKENS.font.mono, fontSize: 9, color: p.inkMuted, transform: 'translateY(-2px)' }}>{en ? 'parent / guardian signature' : '家长/监护人签字'}</div>
        </div>
      </div>

      <div style={{ flex: 1 }} />
      <MStickyCTA dark={dark}>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button dark={dark} variant="secondary" size="lg" style={{ flex: 1 }}>{STRINGS[lang].cta.back}</Button>
          <Button dark={dark} variant="primary" size="lg" style={{ flex: 2 }}>{en ? 'Sign & continue →' : '签署并继续 →'}</Button>
        </div>
      </MStickyCTA>
    </div>
  );
}

// ── 6. PARENT PORTAL ──────────────────────────────────────────
function MPageParent({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const tabs = en
    ? [{ id: 'home', label: 'Home', icon: Icons.home }, { id: 'sched', label: 'Schedule', icon: Icons.calendar }, { id: 'pay', label: 'Pay', icon: Icons.bill }, { id: 'msg', label: 'Messages', icon: Icons.msg }, { id: 'me', label: 'Account', icon: Icons.user }]
    : [{ id: 'home', label: '主页', icon: Icons.home }, { id: 'sched', label: '课表', icon: Icons.calendar }, { id: 'pay', label: '账单', icon: Icons.bill }, { id: 'msg', label: '消息', icon: Icons.msg }, { id: 'me', label: '账户', icon: Icons.user }];

  return (
    <div style={{ background: p.paper, color: p.ink, minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{
        padding: '12px 22px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        borderBottom: `0.5px solid ${p.line}`, background: p.paper,
      }}>
        <div>
          <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Parent' : '家长'}</Mono>
          <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, fontWeight: 600, marginTop: 2 }}>{en ? 'Lin Chen' : '陈林'}</div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: 18, background: p.paperSoft, border: `0.5px solid ${p.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TOKENS.font.serif, fontSize: 14, fontStyle: 'italic' }}>L</div>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        <div style={{ padding: '20px 22px 8px' }}>
          <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Welcome back' : '欢迎回来'}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={26} style={{ marginTop: 6 }}>{en ? 'Mia’s week at the studio' : 'Mia 这一周'}</H>
        </div>

        {/* Next lesson — hero card */}
        <div style={{ margin: '14px 22px 12px', borderRadius: TOKENS.radius.lg, background: p.ink, color: p.paper, padding: 20, position: 'relative', overflow: 'hidden' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <Mono dark={!dark} style={{ fontSize: 9, color: 'rgba(242,237,226,0.65)' }}>{en ? 'Next lesson' : '下一节课'}</Mono>
            <Mono dark={!dark} style={{ fontSize: 9, color: p.gold }}>{en ? 'in 2 days' : '2 天后'}</Mono>
          </div>
          <H as="div" dark={!dark} font={headingFont} size={26} style={{ color: p.paper, marginTop: 14, letterSpacing: -0.4 }}>
            {en ? 'Wed Mar 6' : '3 月 6 日 周三'}<br/>4:15 pm
          </H>
          <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: 'rgba(242,237,226,0.7)', marginTop: 12, lineHeight: 1.55 }}>
            {en ? 'Studio B-3 · Ji-eun Park · Piano · 30 min' : 'B-3 琴房 · 朴智恩 · 钢琴 · 30 分钟'}
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
            <button style={{ background: p.paper, color: p.ink, border: 'none', borderRadius: 999, padding: '8px 14px', fontFamily: TOKENS.font.sans, fontSize: 12, fontWeight: 500, cursor: 'pointer' }}>{en ? 'Add to calendar' : '加入日历'}</button>
            <button style={{ background: 'transparent', color: p.paper, border: `0.5px solid rgba(242,237,226,0.3)`, borderRadius: 999, padding: '8px 14px', fontFamily: TOKENS.font.sans, fontSize: 12, fontWeight: 500, cursor: 'pointer' }}>{en ? 'Request makeup' : '申请补课'}</button>
          </div>
        </div>

        {/* Stats trio */}
        <div style={{ margin: '0 22px 18px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: p.line, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.md, overflow: 'hidden' }}>
          {[
            { n: '8/12', l: en ? 'Attended' : '已出勤' },
            { n: '2', l: en ? 'Makeups' : '补课' },
            { n: 'Apr 12', l: en ? 'Spring recital' : '春季演出' },
          ].map((s, i) => (
            <div key={i} style={{ background: p.paper, padding: '14px 10px' }}>
              <H as="div" dark={dark} font={headingFont} size={18} weight={500}>{s.n}</H>
              <Mono dark={dark} style={{ fontSize: 8, marginTop: 2, display: 'block' }}>{s.l}</Mono>
            </div>
          ))}
        </div>

        {/* Invoice due */}
        <div style={{ padding: '0 22px 14px' }}>
          <div style={{ padding: '16px 18px', background: p.paperSoft, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.md, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <Mono dark={dark} style={{ fontSize: 9 }}>INV-2026-0312</Mono>
              <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, fontWeight: 600, marginTop: 4 }}>{en ? 'March tuition' : '3 月学费'}</div>
              <div style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: p.inkMuted, marginTop: 2 }}>{en ? 'Due in 4 days' : '4 天后到期'}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <H as="div" dark={dark} font={headingFont} size={20}>$360</H>
              <Pill dark={dark} tone="gold" style={{ marginTop: 6 }}>{en ? 'Due' : '待付'}</Pill>
            </div>
          </div>
        </div>

        {/* Recent invoices list */}
        <div style={{ padding: '8px 22px 16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Recent invoices' : '近期账单'}</Mono>
            <span style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: p.gold, fontWeight: 500 }}>{en ? 'View all →' : '全部 →'}</span>
          </div>
          {[
            { p: 'Feb 2026', a: '$360.00', s: 'paid' },
            { p: 'Jan 2026', a: '$360.00', s: 'paid' },
            { p: 'Dec 2025', a: '$324.00', s: 'paid' },
          ].map((r, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderTop: `0.5px solid ${p.line}` }}>
              <div>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.ink }}>{r.p}</div>
                <Mono dark={dark} style={{ fontSize: 8 }}>INV-2026-{String(i + 1).padStart(4, '0')}</Mono>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontFamily: TOKENS.font.sans, fontSize: 13, fontWeight: 500 }}>{r.a}</span>
                <Pill dark={dark} tone="success">{r.s}</Pill>
              </div>
            </div>
          ))}
        </div>

        <div style={{ height: 12 }} />
      </div>

      <MTabBar dark={dark} items={tabs} active="home" />
    </div>
  );
}

// ── 7. TEACHER PORTAL ─────────────────────────────────────────
function MPageTeacher({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const tabs = en
    ? [{ id: 'today', label: 'Today', icon: Icons.calendar }, { id: 'roster', label: 'Roster', icon: Icons.user }, { id: 'notes', label: 'Notes', icon: Icons.notes }, { id: 'qr', label: 'Check-in', icon: Icons.qr }, { id: 'me', label: 'Me', icon: Icons.user }]
    : [{ id: 'today', label: '今日', icon: Icons.calendar }, { id: 'roster', label: '学生', icon: Icons.user }, { id: 'notes', label: '笔记', icon: Icons.notes }, { id: 'qr', label: '签到', icon: Icons.qr }, { id: 'me', label: '我', icon: Icons.user }];

  const lessons = en ? [
    { t: '3:30', s: 'Mia Chen', age: '8', dur: '30', state: 'done', note: 'Hanon #1 + Fur Elise A-section' },
    { t: '4:15', s: 'Aiden Park', age: '11', dur: '45', state: 'now', note: 'Sonatina mvt 2 — slow practice with metronome' },
    { t: '5:00', s: 'Hannah Lee', age: '7', dur: '30', state: 'next', note: 'New piece: My Heart Will Go On (simplified)' },
    { t: '5:45', s: 'Ethan Wu', age: '13', dur: '60', state: 'upcoming', note: 'Chopin Nocturne Op.9 No.2 — left hand voicing' },
    { t: '7:00', s: 'Sara Kim', age: '9', dur: '30', state: 'upcoming', note: 'Sight-reading exercises B-1 to B-4' },
  ] : [
    { t: '15:30', s: '陈 Mia', age: '8', dur: '30', state: 'done', note: '哈农 #1 + 致爱丽丝 A 段' },
    { t: '16:15', s: '朴 Aiden', age: '11', dur: '45', state: 'now', note: '小奏鸣曲 第二乐章 — 节拍器慢练' },
    { t: '17:00', s: '李 Hannah', age: '7', dur: '30', state: 'next', note: '新曲：我心永恒（简化版）' },
    { t: '17:45', s: '吴 Ethan', age: '13', dur: '60', state: 'upcoming', note: '肖邦夜曲 Op.9 No.2 — 左手层次' },
    { t: '19:00', s: '金 Sara', age: '9', dur: '30', state: 'upcoming', note: '视奏练习 B-1 至 B-4' },
  ];

  const stateLabel = (s) => {
    if (s === 'done') return en ? 'Done' : '已完成';
    if (s === 'now') return en ? 'In session' : '上课中';
    if (s === 'next') return en ? 'Up next' : '下一位';
    return en ? 'Upcoming' : '即将';
  };
  const stateTone = (s) => s === 'now' ? 'gold' : s === 'done' ? 'success' : 'neutral';

  return (
    <div style={{ background: p.paper, color: p.ink, minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 22px 14px', borderBottom: `0.5px solid ${p.line}`, background: p.paper }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Teacher' : '教师'}</Mono>
            <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, fontWeight: 600, marginTop: 2 }}>{en ? 'Ji-eun Park' : '朴智恩'}</div>
          </div>
          <div style={{ width: 36, height: 36, borderRadius: 18, background: p.paperSoft, border: `0.5px solid ${p.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TOKENS.font.serif, fontSize: 14, fontStyle: 'italic' }}>J</div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        <div style={{ padding: '20px 22px 6px' }}>
          <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Wed Mar 6 · 5 lessons' : '3/6 周三 · 5 节课'}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={26} style={{ marginTop: 6 }}>{en ? 'Today’s schedule' : '今日课程'}</H>
        </div>

        {/* Day metric strip */}
        <div style={{ margin: '14px 22px 18px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: p.line, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.md, overflow: 'hidden' }}>
          {[
            { n: '1/5', l: en ? 'Done' : '已完成' },
            { n: '3.5h', l: en ? 'On schedule' : '排课' },
            { n: '$252', l: en ? 'Today' : '今日' },
          ].map((s, i) => (
            <div key={i} style={{ background: p.paper, padding: '14px 10px' }}>
              <H as="div" dark={dark} font={headingFont} size={18} weight={500}>{s.n}</H>
              <Mono dark={dark} style={{ fontSize: 8, marginTop: 2, display: 'block' }}>{s.l}</Mono>
            </div>
          ))}
        </div>

        {/* Lesson rows */}
        <div style={{ padding: '0 22px 16px' }}>
          {lessons.map((l, i) => (
            <div key={i} style={{
              padding: '14px 0', borderTop: `0.5px solid ${p.line}`,
              opacity: l.state === 'done' ? 0.6 : 1,
            }}>
              <div style={{ display: 'flex', gap: 14 }}>
                <div style={{ width: 56, flexShrink: 0 }}>
                  <div style={{ fontFamily: TOKENS.font.mono, fontSize: 13, color: p.ink, fontWeight: 500 }}>{l.t}</div>
                  <Mono dark={dark} style={{ fontSize: 8, marginTop: 2, display: 'block' }}>{l.dur} {en ? 'min' : '分'}</Mono>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                    <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, fontWeight: 600 }}>{l.s} <span style={{ color: p.inkMuted, fontWeight: 400, fontSize: 12 }}>· {l.age}</span></div>
                    <Pill dark={dark} tone={stateTone(l.state)} style={{ fontSize: 9 }}>{stateLabel(l.state)}</Pill>
                  </div>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkSoft, marginTop: 4, lineHeight: 1.5 }}>{l.note}</div>
                  {l.state === 'now' && (
                    <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
                      <Button dark={dark} variant="primary" size="sm">{en ? 'Mark attended' : '标记出勤'}</Button>
                      <Button dark={dark} variant="secondary" size="sm">{en ? 'Lesson notes' : '课后笔记'}</Button>
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ height: 12 }} />
      </div>

      <MTabBar dark={dark} items={tabs} active="today" />
    </div>
  );
}

// ── 8. OWNER DASHBOARD ────────────────────────────────────────
function MPageOwner({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const tabs = en
    ? [{ id: 'kpi', label: 'Overview', icon: Icons.chart }, { id: 'rev', label: 'Revenue', icon: Icons.bill }, { id: 'sched', label: 'Studios', icon: Icons.calendar }, { id: 'people', label: 'People', icon: Icons.user }, { id: 'me', label: 'Me', icon: Icons.user }]
    : [{ id: 'kpi', label: '概览', icon: Icons.chart }, { id: 'rev', label: '收入', icon: Icons.bill }, { id: 'sched', label: '琴房', icon: Icons.calendar }, { id: 'people', label: '人员', icon: Icons.user }, { id: 'me', label: '我', icon: Icons.user }];

  // Tiny inline sparkline
  const Spark = ({ data, accent = false }) => {
    const w = 120, h = 36;
    const max = Math.max(...data), min = Math.min(...data);
    const pts = data.map((d, i) => {
      const x = (i / (data.length - 1)) * w;
      const y = h - ((d - min) / (max - min || 1)) * h;
      return `${x},${y}`;
    }).join(' ');
    return (
      <svg width={w} height={h}>
        <polyline fill="none" stroke={accent ? p.gold : p.ink} strokeWidth="1.2" points={pts} strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    );
  };

  return (
    <div style={{ background: p.paper, color: p.ink, minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 22px 14px', borderBottom: `0.5px solid ${p.line}`, background: p.paper, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Owner · UBC' : 'Owner · UBC'}</Mono>
          <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, fontWeight: 600, marginTop: 2 }}>{en ? 'Mastery Studio' : 'Mastery 总部'}</div>
        </div>
        <Pill dark={dark} tone="success">{en ? 'On track' : '正常'}</Pill>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        <div style={{ padding: '20px 22px 6px' }}>
          <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'March 2026 · MTD' : '2026 年 3 月 · 月内累计'}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={26} style={{ marginTop: 6 }}>{en ? 'Studio at a glance' : '运营一览'}</H>
        </div>

        {/* KPI cards 2x2 */}
        <div style={{ padding: '14px 22px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { l: en ? 'Revenue' : '收入', n: '$94,320', d: '+8.4%', sp: [40, 42, 44, 41, 45, 48, 52, 55], gold: true },
            { l: en ? 'Active students' : '在校学生', n: '428', d: '+6', sp: [400, 405, 408, 410, 415, 420, 422, 428] },
            { l: en ? 'Trial → enrolled' : '试听转化', n: '64%', d: '+3pt', sp: [55, 58, 56, 60, 61, 62, 63, 64] },
            { l: en ? 'Studio fill' : '琴房使用率', n: '82%', d: '−1pt', sp: [78, 80, 84, 86, 85, 83, 82, 82] },
          ].map((k, i) => (
            <div key={i} style={{ padding: 16, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.md, background: p.paper }}>
              <Mono dark={dark} style={{ fontSize: 9 }}>{k.l}</Mono>
              <H as="div" dark={dark} font={headingFont} size={22} style={{ marginTop: 6, letterSpacing: -0.6 }}>{k.n}</H>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 6 }}>
                <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: k.d.startsWith('−') ? p.danger : p.success }}>{k.d}</span>
                <Spark data={k.sp} accent={k.gold} />
              </div>
            </div>
          ))}
        </div>

        {/* Today's signals */}
        <div style={{ padding: '14px 22px 8px' }}>
          <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Signals today' : '今日动态'}</Mono>
        </div>
        <div style={{ padding: '0 22px 16px' }}>
          {[
            { tone: 'gold', t: en ? '3 trials booked' : '新增 3 个试听', s: en ? 'piano · violin · voice' : '钢琴 · 小提琴 · 声乐' },
            { tone: 'success', t: en ? '$2,160 collected' : '收款 ¥2,160', s: en ? '6 invoices · auto-charge' : '6 笔账单 · 自动扣款' },
            { tone: 'danger', t: en ? '1 makeup needs slot' : '1 个补课待安排', s: en ? 'Aiden P. · piano · 45 min' : 'Aiden P. · 钢琴 · 45 分钟' },
            { tone: 'neutral', t: en ? 'Recital reminder sent' : '已发送演出提醒', s: en ? '218 families · open 71%' : '218 个家庭 · 打开 71%' },
          ].map((sig, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderTop: `0.5px solid ${p.line}` }}>
              <div style={{ width: 6, height: 28, borderRadius: 3, background: sig.tone === 'gold' ? p.gold : sig.tone === 'success' ? p.success : sig.tone === 'danger' ? p.danger : p.line }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, fontWeight: 500 }}>{sig.t}</div>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: p.inkMuted, marginTop: 2 }}>{sig.s}</div>
              </div>
              <span style={{ color: p.inkMuted, fontSize: 16 }}>›</span>
            </div>
          ))}
        </div>

        <div style={{ height: 12 }} />
      </div>

      <MTabBar dark={dark} items={tabs} active="kpi" />
    </div>
  );
}

// ── EXTRAS ────────────────────────────────────────────────────

// Lock-screen mock — incoming lesson reminder notification
function MLockScreen({ dark, lang, headingFont }) {
  const en = lang === 'en';
  // Locked screen always uses dark wallpaper for realism
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'radial-gradient(1200px 600px at 50% -10%, #2a2820 0%, #15140F 60%, #050402 100%)',
      color: '#F2EDE2', display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      <div style={{ height: 60 }} />
      {/* Time + date */}
      <div style={{ textAlign: 'center', marginTop: 20 }}>
        <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: 'rgba(242,237,226,0.7)', letterSpacing: 0.4 }}>
          {en ? 'Monday, March 4' : '3 月 4 日 周一'}
        </div>
        <div style={{ fontFamily: '-apple-system, "SF Pro Display", system-ui', fontSize: 76, fontWeight: 200, letterSpacing: -2, marginTop: 4 }}>9:41</div>
      </div>

      {/* Notification card */}
      <div style={{ padding: '120px 14px 0' }}>
        <div style={{
          background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(20px) saturate(180%)',
          WebkitBackdropFilter: 'blur(20px) saturate(180%)',
          border: '0.5px solid rgba(255,255,255,0.18)', borderRadius: 18, padding: '14px 16px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <div style={{ width: 22, height: 22, borderRadius: 5, background: '#B7925A', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TOKENS.font.serif, fontStyle: 'italic', fontSize: 13, color: '#fff' }}>M</div>
            <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, fontWeight: 600 }}>MASTERY</div>
            <div style={{ flex: 1 }} />
            <div style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: 'rgba(242,237,226,0.6)' }}>{en ? 'now' : '刚刚'}</div>
          </div>
          <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, fontWeight: 600, marginBottom: 4 }}>
            {en ? 'Mia’s lesson tomorrow at 4:15 pm' : 'Mia 明日 16:15 上课'}
          </div>
          <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: 'rgba(242,237,226,0.85)', lineHeight: 1.45 }}>
            {en ? 'Studio B-3 with Ji-eun Park. Tap to add to calendar or request a makeup.' : 'B-3 琴房，朴智恩老师。点击加入日历或申请补课。'}
          </div>
        </div>

        <div style={{ marginTop: 12, padding: '10px 16px', background: 'rgba(255,255,255,0.08)', borderRadius: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 18, height: 18, borderRadius: 9, background: 'rgba(255,255,255,0.18)' }} />
          <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: 'rgba(242,237,226,0.85)' }}>{en ? 'INV-2026-0312 · $360 due in 4 days' : 'INV-2026-0312 · ¥360，4 天后到期'}</div>
        </div>
      </div>

      <div style={{ flex: 1 }} />
      <div style={{ textAlign: 'center', paddingBottom: 60, fontFamily: TOKENS.font.sans, fontSize: 13, color: 'rgba(242,237,226,0.55)', letterSpacing: 0.2 }}>
        {en ? 'Swipe up to open' : '上滑解锁'}
      </div>
    </div>
  );
}

// QR check-in screen — student arrives at studio
function MQRCheckIn({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  // Build a fake QR using SVG noise
  const cells = 21;
  const seed = 'mastery-qr';
  const bits = [];
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  for (let i = 0; i < cells * cells; i++) {
    h = (h * 1664525 + 1013904223) >>> 0;
    bits.push((h & 1) === 1);
  }
  // Force corner finder patterns
  const isFinder = (r, c) => (r < 7 && c < 7) || (r < 7 && c >= cells - 7) || (r >= cells - 7 && c < 7);
  const finderCell = (r, c) => {
    let lr = r, lc = c;
    if (r >= cells - 7) lr = r - (cells - 7);
    if (c >= cells - 7) lc = c - (cells - 7);
    const onBorder = lr === 0 || lr === 6 || lc === 0 || lc === 6;
    const inCenter = lr >= 2 && lr <= 4 && lc >= 2 && lc <= 4;
    return onBorder || inCenter;
  };

  return (
    <div style={{ background: p.paper, color: p.ink, minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <MTopBar dark={dark} lang={lang} headingFont={headingFont} onBack={() => {}} title={en ? 'Studio check-in' : '到校签到'} />

      <div style={{ padding: '20px 22px 8px', textAlign: 'center' }}>
        <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Mia Chen · Piano · 4:15 pm' : '陈 Mia · 钢琴 · 16:15'}</Mono>
        <H as="h1" dark={dark} font={headingFont} size={24} style={{ marginTop: 8 }}>{en ? 'Show this at the front desk' : '请在前台出示此码'}</H>
        <p style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, lineHeight: 1.5, marginTop: 8, marginBottom: 0 }}>
          {en ? 'Auto-marks attendance and notifies your teacher.' : '自动记录出勤，并通知您的老师。'}
        </p>
      </div>

      {/* QR */}
      <div style={{ padding: '24px 22px 16px', display: 'flex', justifyContent: 'center' }}>
        <div style={{ background: p.paper, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.lg, padding: 18, width: 280 }}>
          <svg width="100%" viewBox={`0 0 ${cells} ${cells}`} style={{ display: 'block' }} shapeRendering="crispEdges">
            <rect width={cells} height={cells} fill={p.paper}/>
            {Array.from({ length: cells }).map((_, r) =>
              Array.from({ length: cells }).map((__, c) => {
                const idx = r * cells + c;
                const fill = isFinder(r, c) ? finderCell(r, c) : bits[idx];
                if (!fill) return null;
                return <rect key={`${r}-${c}`} x={c} y={r} width="1" height="1" fill={p.ink}/>;
              })
            )}
          </svg>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
            <Mono dark={dark} style={{ fontSize: 9 }}>MSM-MIA-26030615</Mono>
            <Mono dark={dark} style={{ fontSize: 9, color: p.gold }}>{en ? 'expires 4:30' : '4:30 失效'}</Mono>
          </div>
        </div>
      </div>

      <div style={{ padding: '8px 22px 22px' }}>
        <div style={{ padding: '14px 16px', background: p.paperSoft, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.md }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <Mono dark={dark} style={{ fontSize: 9 }}>{en ? 'Today' : '今日'}</Mono>
            <Pill dark={dark} tone="gold">{en ? 'Arriving in 8 min' : '8 分钟后到达'}</Pill>
          </div>
          <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.ink, lineHeight: 1.55 }}>
            {en ? 'Studio B-3, second floor. Ji-eun is finishing the previous lesson.' : 'B-3 琴房，二楼。朴老师正在上一节课。'}
          </div>
        </div>
      </div>

      <div style={{ flex: 1 }} />
    </div>
  );
}

Object.assign(window, {
  MPageEnroll, MPageParent, MPageTeacher, MPageOwner, MLockScreen, MQRCheckIn,
});