// 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 ' + CLIENT.shortName + ' 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 年加入 ' + CLIENT.shortName + '，曾师从 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;