// page-faculty.jsx — Page 3: Faculty Detail

function PageFaculty({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const reviews = en ? [
    { who: 'Sarah L.', child: 'Mother of two students', body: '"Our kids look forward to lessons. The teacher knows when to push and when to let a piece breathe."' },
    { who: 'Min K.', child: 'Parent, age 9', body: '"The studio feels like a small university. Quiet, focused, and warm."' },
    { who: 'David R.', child: 'Adult student', body: '"I started at 42 with no background. Six months in and I played at the recital. Patient teaching."' },
  ] : [
    { who: 'Sarah L.', child: '两个孩子的母亲', body: '"孩子们每周都期待上课。老师懂得何时推动，何时让一首曲子留点呼吸。"' },
    { who: 'Min K.', child: '9 岁学生家长', body: '"琴房像一所小型大学，安静、专注、温暖。"' },
    { who: 'David R.', child: '成人学生', body: '"我 42 岁零基础开始，六个月后就在汇报演出上演奏了。教学很耐心。"' },
  ];

  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="faculty" headingFont={headingFont} />
      <div style={{  }}>
        <div style={{ padding: '56px 80px 32px' }}>
          <Mono dark={dark} style={{ marginBottom: 12, display: 'inline-block' }}>← {en ? 'Back to faculty' : '返回教师列表'}</Mono>
        </div>

        {/* Hero — portrait + bio */}
        <div style={{ padding: '0 80px 64px', display: 'grid', gridTemplateColumns: '420px 1fr', gap: 56, alignItems: 'start' }}>
          <div>
            <Stripes dark={dark} ratio="3 / 4" label="portrait · ji-eun park" />
            <div style={{ marginTop: 18, padding: 18, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.sm, background: p.paperSoft }}>
              <Mono dark={dark} style={{ marginBottom: 10, display: 'inline-block' }}>{en ? 'Quick facts' : '关键信息'}</Mono>
              {(en ? [
                ['Studio', 'B-3, Music Building'],
                ['Teaches', 'Mon · Wed · Fri'],
                ['Levels', 'RCM 4 — ARCT'],
                ['Languages', 'English · 한국어'],
              ] : [
                ['琴房', 'B-3，音乐楼'],
                ['授课日', '周一 · 三 · 五'],
                ['级别', 'RCM 4 — ARCT'],
                ['语言', '英语 · 한국어'],
              ]).map((row, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderTop: i ? `0.5px solid ${p.line}` : 'none' }}>
                  <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted }}>{row[0]}</span>
                  <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.ink, fontWeight: 500 }}>{row[1]}</span>
                </div>
              ))}
            </div>
          </div>
          <div>
            <Mono dark={dark} style={{ marginBottom: 16, display: 'inline-block' }}>{en ? 'Piano · Senior Faculty' : '钢琴 · 资深教师'}</Mono>
            <H as="h1" dark={dark} font={headingFont} size={56} style={{ marginBottom: 16 }}>Ji-eun Park</H>
            <div style={{ display: 'flex', gap: 8, marginBottom: 28, flexWrap: 'wrap' }}>
              {['RCM ARCT', en ? 'UBC, MMus' : 'UBC 硕士', en ? '12 yrs teaching' : '12 年教龄', en ? 'Yamaha-trained' : 'Yamaha 培训'].map((tag, i) => <Pill key={i} dark={dark} tone={i === 0 ? 'gold' : 'neutral'}>{tag}</Pill>)}
            </div>
            <p style={{ fontFamily: TOKENS.font.sans, fontSize: 15, color: p.inkSoft, lineHeight: 1.7, marginBottom: 18 }}>
              {en ? 'Ji-eun joined Mastery in 2014 after completing her Master\u2019s at UBC under Corey Hamm. She prepares students from the early grades to ARCT, with particular care for the bridge years between Grade 6 and 8 — where many students lose patience with their instrument.'
                  : '朴智恩老师于 2014 年加入 Mastery，曾师从 Corey Hamm 在 UBC 完成硕士学位。她带学生从初级一直到 ARCT 文凭，尤其关注 6–8 级之间的"过渡年"——这正是许多学生对乐器失去耐心的阶段。'}
            </p>
            <p style={{ fontFamily: TOKENS.font.sans, fontSize: 15, color: p.inkSoft, lineHeight: 1.7, marginBottom: 32 }}>
              {en ? 'Her students have placed in the Vancouver Kiwanis Festival every year since 2018. She also coaches the Saturday morning Theory cohort.' : '自 2018 年起，她的学生每年都在温哥华 Kiwanis 音乐节获奖。她同时担任周六上午的乐理小组指导。'}
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button dark={dark} variant="primary" size="lg">{STRINGS[lang].cta.trial}</Button>
              <Button dark={dark} variant="secondary" size="lg">{en ? 'Send a message' : '发送留言'}</Button>
            </div>
          </div>
        </div>

        {/* Schedule preview */}
        <div style={{ padding: '48px 80px', borderTop: `0.5px solid ${p.line}`, background: p.paperSoft }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
            <H as="h2" dark={dark} font={headingFont} size={26}>{en ? 'Available trial slots this week' : '本周可预约试听'}</H>
            <Mono dark={dark}>{en ? 'updated 12 min ago' : '12 分钟前更新'}</Mono>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            {(en ? ['Mon Mar 4', 'Wed Mar 6', 'Fri Mar 8', 'Mon Mar 11', 'Wed Mar 13'] : ['周一 3/4', '周三 3/6', '周五 3/8', '周一 3/11', '周三 3/13']).map((d, i) => (
              <div key={i} style={{ background: p.paper, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.sm, padding: 16 }}>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.ink, fontWeight: 500, marginBottom: 12 }}>{d}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {['3:30', '4:15', '5:00'].slice(0, i === 1 ? 1 : 3).map((t, j) => (
                    <div key={j} style={{ padding: '8px 12px', background: p.paperSoft, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.xs, fontFamily: TOKENS.font.mono, fontSize: 11, color: p.ink, textAlign: 'center', cursor: 'pointer' }}>{t} pm</div>
                  ))}
                  {i === 1 && <Mono dark={dark} style={{ textAlign: 'center', marginTop: 4 }}>{en ? 'mostly booked' : '基本已满'}</Mono>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Reviews */}
        <div style={{ padding: '64px 80px' }}>
          <H as="h2" dark={dark} font={headingFont} size={28} style={{ marginBottom: 32 }}>{en ? 'From families' : '家长的话'}</H>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {reviews.map((r, i) => (
              <Card key={i} dark={dark}>
                <div style={{ fontFamily: TOKENS.font.serif, fontStyle: 'italic', fontSize: 17, color: p.ink, lineHeight: 1.55, marginBottom: 18 }}>{r.body}</div>
                <Divider dark={dark} style={{ marginBottom: 14 }} />
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.ink, fontWeight: 500 }}>{r.who}</div>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: p.inkMuted, marginTop: 2 }}>{r.child}</div>
              </Card>
            ))}
          </div>
        </div>
        <Footer dark={dark} lang={lang} headingFont={headingFont} />
      </div>
    </Page>
  );
}

window.PageFaculty = PageFaculty;