// page-home.jsx — Page 1: Home

function PageHome({ dark, lang, headingFont }) {
  const p = palette(dark);
  const t = STRINGS[lang];
  const en = lang === 'en';
  const programs = en ? [
    { name: 'Private Lessons', sub: 'One-to-one, weekly', meta: 'Piano · Strings · Voice · Winds', age: 'Ages 5+' },
    { name: 'Group Classes', sub: 'Small cohorts, 4–8 students', meta: 'Theory · Ensemble · Choir', age: 'Ages 6–17' },
    { name: 'Summer Camps', sub: 'Two-week intensives', meta: 'Performance · Composition', age: 'Ages 7–14' },
  ] : [
    { name: '私人课', sub: '一对一周课', meta: '钢琴 · 弦乐 · 声乐 · 管乐', age: '5 岁起' },
    { name: '小组课', sub: '4–8 人小班', meta: '乐理 · 合奏 · 合唱', age: '6–17 岁' },
    { name: '夏令营', sub: '两周密集营', meta: '演奏 · 作曲', age: '7–14 岁' },
  ];

  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="home" headingFont={headingFont} />
      <div style={{  }}>
        <div style={{ padding: '120px 80px 110px', maxWidth: 1100 }}>
          <Mono dark={dark} style={{ marginBottom: 24, display: 'inline-block' }}>{t.hero.eyebrow}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={68} style={{ marginBottom: 28, maxWidth: 900, whiteSpace: 'pre-line' }}>{t.hero.title}</H>
          <p style={{ fontFamily: TOKENS.font.sans, fontSize: 17, color: p.inkSoft, lineHeight: 1.55, maxWidth: 580, margin: '0 0 36px' }}>{t.hero.sub}</p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <Button dark={dark} variant="primary" size="lg">{t.cta.trial}</Button>
            <Button dark={dark} variant="ghost" size="lg">{t.cta.learnMore} →</Button>
          </div>
          <div style={{ display: 'flex', gap: 40, marginTop: 80, paddingTop: 32, borderTop: `0.5px solid ${p.line}` }}>
            {t.hero.meta.map((m, i) => (
              <div key={i}>
                <Mono dark={dark}>{String(i + 1).padStart(2, '0')}</Mono>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.ink, marginTop: 6 }}>{m}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: '64px 80px', borderTop: `0.5px solid ${p.line}`, background: p.paperSoft }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 36 }}>
            <H as="h2" dark={dark} font={headingFont} size={32}>{t.sections.programs}</H>
            <Mono dark={dark}>03 / paths</Mono>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {programs.map((pr, i) => (
              <Card key={i} dark={dark} hoverable padding={0}>
                <Stripes dark={dark} ratio="3 / 2" label={`studio ${i + 1}`} />
                <div style={{ padding: 24 }}>
                  <Mono dark={dark} style={{ marginBottom: 8 }}>{pr.age}</Mono>
                  <H as="h3" dark={dark} font={headingFont} size={22} style={{ marginBottom: 6 }}>{pr.name}</H>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, marginBottom: 16 }}>{pr.sub}</div>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted, lineHeight: 1.6 }}>{pr.meta}</div>
                </div>
              </Card>
            ))}
          </div>
        </div>

        <div style={{ padding: '96px 80px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 72, alignItems: 'center' }}>
          <div>
            <Mono dark={dark} style={{ marginBottom: 18, display: 'inline-block' }}>{en ? '23 years on UBC campus' : '驻 UBC 校园 23 年'}</Mono>
            <H as="h2" dark={dark} font={headingFont} size={40} style={{ marginBottom: 24 }}>{t.sections.proof}</H>
            <p style={{ fontFamily: TOKENS.font.sans, fontSize: 15, color: p.inkSoft, lineHeight: 1.7, maxWidth: 460 }}>
              {en ? 'Thirty faculty. Seven studios. Two classrooms. Year-round recitals. We teach the way good music is learned — slowly, patiently, with people who listen.' : '三十位教师。七间琴房。两间教室。全年汇报演出。我们以好音乐被学会的方式去教——慢一些，耐心一些，让会倾听的人陪伴学生。'}
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: p.line, border: `0.5px solid ${p.line}` }}>
            {[{ n: '30', l: en ? 'Faculty' : '教师' }, { n: '420+', l: en ? 'Active students' : '在校学生' }, { n: '12', l: en ? 'Recitals / year' : '年度演出' }, { n: '4.9', l: en ? 'Parent rating' : '家长评分' }].map((s, i) => (
              <div key={i} style={{ background: p.paper, padding: '36px 28px' }}>
                <H as="div" dark={dark} font={headingFont} size={42} weight={500} style={{ marginBottom: 8, letterSpacing: -1 }}>{s.n}</H>
                <Mono dark={dark}>{s.l}</Mono>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: '64px 80px', borderTop: `0.5px solid ${p.line}` }}>
          <H as="h2" dark={dark} font={headingFont} size={32} style={{ marginBottom: 32 }}>{t.sections.faq}</H>
          {[
            { q: en ? 'How does the trial lesson work?' : '试听课怎么进行？', open: true,
              a: en ? 'A 30-minute paid trial with the matched teacher. The fee is credited toward your first month if you enroll within 14 days.' : '与匹配教师进行 30 分钟付费试听。14 天内注册可抵扣首月学费。' },
            { q: en ? 'Do you offer makeup lessons?' : '可以补课吗？' },
            { q: en ? 'What instruments do you teach?' : '教授哪些乐器？' },
            { q: en ? 'How is tuition billed?' : '学费如何收取？' },
          ].map((f, i) => (
            <div key={i} style={{ borderBottom: `0.5px solid ${p.line}`, padding: '20px 0' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 15, color: p.ink, fontWeight: 500 }}>{f.q}</div>
                <span style={{ color: p.inkMuted, fontSize: 18 }}>{f.open ? '−' : '+'}</span>
              </div>
              {f.open && f.a && <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.inkSoft, marginTop: 14, lineHeight: 1.6, maxWidth: 720 }}>{f.a}</div>}
            </div>
          ))}
        </div>
        <Footer dark={dark} lang={lang} headingFont={headingFont} />
      </div>
    </Page>
  );
}

window.PageHome = PageHome;