// page-programs.jsx — Page 2: Programs / Pricing

function PageProgram({ dark, lang, headingFont, showPricing }) {
  const p = palette(dark);
  const en = lang === 'en';
  const tiers = en ? [
    { name: 'Discovery', price: 240, dur: '4 × 30 min', for: 'Beginners, ages 5–8', features: ['Weekly private lesson', 'Take-home practice plan', 'Recital invitation', 'Parent monthly note'] },
    { name: 'Mastery', price: 360, dur: '4 × 45 min', for: 'Core programme', features: ['Weekly private lesson', 'Theory micro-class', 'Two recitals / year', 'RCM exam prep optional'], featured: true },
    { name: 'Studio', price: 520, dur: '4 × 60 min', for: 'Pre-conservatory', features: ['Weekly private lesson', 'Performance coaching', 'Repertoire planning', 'Audition preparation'] },
  ] : [
    { name: '入门', price: 240, dur: '4 × 30 分钟', for: '5–8 岁初学者', features: ['每周私人课', '回家练习计划', '汇报演出邀请', '家长月度反馈'] },
    { name: '主线', price: 360, dur: '4 × 45 分钟', for: '核心课程', features: ['每周私人课', '乐理小课', '每年两次演出', 'RCM 考级辅导可选'], featured: true },
    { name: '专修', price: 520, dur: '4 × 60 分钟', for: '考前准备', features: ['每周私人课', '舞台辅导', '曲目规划', '面试准备'] },
  ];

  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="programs" headingFont={headingFont} />
      <div style={{  }}>
        <div style={{ padding: '72px 80px 48px' }}>
          <Mono dark={dark} style={{ marginBottom: 18, display: 'inline-block' }}>{en ? 'Program · Private Piano' : '项目 · 钢琴私人课'}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={52} style={{ marginBottom: 20, maxWidth: 760 }}>
            {en ? 'Private Piano — A weekly conversation between teacher and student.' : '钢琴私人课——师生之间每周一次的对话。'}
          </H>
          <p style={{ fontFamily: TOKENS.font.sans, fontSize: 16, color: p.inkSoft, lineHeight: 1.6, maxWidth: 640 }}>
            {en ? 'Our most enrolled programme. Weekly, year-round, with two recitals and an optional RCM exam path. Match with a teacher in three days.' : '最受欢迎的项目。每周一次，全年开课，含两次汇报演出和可选 RCM 考级路径。三天内匹配教师。'}
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 28, flexWrap: 'wrap' }}>
            {[en ? 'Ages 5+' : '5 岁起', en ? 'In-studio' : '到校上课', en ? 'Year-round' : '全年', en ? 'RCM optional' : 'RCM 可选'].map((tag, i) => <Pill key={i} dark={dark}>{tag}</Pill>)}
          </div>
        </div>

        <div style={{ padding: '0 80px 32px', display: 'flex', gap: 12, alignItems: 'center', borderBottom: `0.5px solid ${p.line}`, paddingBottom: 24 }}>
          <Mono dark={dark}>filter</Mono>
          {[
            { k: 'instrument', v: en ? 'Piano' : '钢琴' },
            { k: 'age', v: en ? 'Ages 5–17' : '5–17 岁' },
            { k: 'level', v: en ? 'All levels' : '全水平' },
            { k: 'format', v: en ? 'In-studio' : '到校' },
          ].map((f, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 14px', border: `0.5px solid ${p.line}`, borderRadius: 999, background: p.paper }}>
              <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted, textTransform: 'uppercase' }}>{f.k}</span>
              <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.ink, fontWeight: 500 }}>{f.v}</span>
            </div>
          ))}
        </div>

        {showPricing ? (
          <div style={{ padding: '56px 80px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 28 }}>
              <H as="h2" dark={dark} font={headingFont} size={28}>{en ? 'Tuition' : '学费'}</H>
              <Mono dark={dark}>{en ? 'monthly · CAD · GST included' : '月费 · 加币 · 含税'}</Mono>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {tiers.map((tier, i) => (
                <div key={i} style={{
                  border: `${tier.featured ? '1px' : '0.5px'} solid ${tier.featured ? p.gold : p.line}`,
                  borderRadius: TOKENS.radius.md, padding: 28, background: p.paper, position: 'relative',
                }}>
                  {tier.featured && (
                    <div style={{ position: 'absolute', top: -10, left: 24, background: p.gold, color: '#fff', padding: '3px 10px', borderRadius: 999, fontFamily: TOKENS.font.sans, fontSize: 10, fontWeight: 600, letterSpacing: 0.4 }}>
                      {en ? 'MOST CHOSEN' : '最受欢迎'}
                    </div>
                  )}
                  <H as="h3" dark={dark} font={headingFont} size={22} style={{ marginBottom: 4 }}>{tier.name}</H>
                  <Mono dark={dark} style={{ marginBottom: 20, display: 'inline-block' }}>{tier.for}</Mono>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
                    <span style={{ fontFamily: TOKENS.font.sans, fontSize: 36, color: p.ink, fontWeight: 600, letterSpacing: -1 }}>${tier.price}</span>
                    <span style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkMuted }}>/ {en ? 'month' : '月'}</span>
                  </div>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted, marginBottom: 24 }}>{tier.dur}</div>
                  <Divider dark={dark} style={{ marginBottom: 18 }} />
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
                    {tier.features.map((feat, j) => (
                      <div key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                        <span style={{ color: p.gold, fontSize: 11, marginTop: 2 }}>✓</span>
                        <span style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, lineHeight: 1.5 }}>{feat}</span>
                      </div>
                    ))}
                  </div>
                  <Button dark={dark} variant={tier.featured ? 'primary' : 'secondary'} fullWidth>{STRINGS[lang].cta.trial}</Button>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 24, padding: 18, background: p.paperSoft, borderRadius: TOKENS.radius.sm, fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted, lineHeight: 1.6 }}>
              {en ? 'Sibling discount: 10% off the second enrollment. Tuition is billed on the 1st via Stripe; cancel any month with 30 days notice. Makeup credits transferable within term.' : '兄弟姐妹优惠：第二位学生 9 折。学费每月 1 日通过 Stripe 自动扣款；提前 30 天可取消。补课额度在学期内可转。'}
            </div>
          </div>
        ) : (
          <div style={{ padding: '80px 80px' }}>
            <EmptyState dark={dark}
              title={en ? 'Pricing is shown after a free consultation' : '价格将在免费咨询后告知'}
              body={en ? 'We tailor a plan after the trial lesson. Schedule one — it takes a minute.' : '我们会在试听后为您定制方案。预约只需一分钟。'}
              action={<Button dark={dark} variant="primary">{STRINGS[lang].cta.trial}</Button>} />
          </div>
        )}

        {/* What's included */}
        <div style={{ padding: '64px 80px', borderTop: `0.5px solid ${p.line}`, background: p.paperSoft }}>
          <H as="h2" dark={dark} font={headingFont} size={28} style={{ marginBottom: 32 }}>{en ? 'What\u2019s included' : '包含的内容'}</H>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {(en ? [
              { t: 'Matched teacher', d: 'Paired by temperament and goal, not just instrument.' },
              { t: 'Two recitals', d: 'Mid-year and end-of-year, on a real Steinway.' },
              { t: 'Practice plan', d: 'A weekly take-home plan written by your teacher.' },
              { t: 'Parent updates', d: 'Monthly progress note in the parent portal.' },
            ] : [
              { t: '匹配教师', d: '按性格与目标，而非只看乐器配对。' },
              { t: '两次演出', d: '年中与年末汇报演出，使用 Steinway 真琴。' },
              { t: '练习计划', d: '每周由您的老师手写练习方案。' },
              { t: '家长反馈', d: '每月在家长账户中查看成长记录。' },
            ]).map((b, i) => (
              <div key={i}>
                <Mono dark={dark} style={{ marginBottom: 12, display: 'inline-block' }}>{String(i + 1).padStart(2, '0')}</Mono>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 15, color: p.ink, fontWeight: 500, marginBottom: 8 }}>{b.t}</div>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkMuted, lineHeight: 1.6 }}>{b.d}</div>
              </div>
            ))}
          </div>
        </div>
        <Footer dark={dark} lang={lang} headingFont={headingFont} />
      </div>
    </Page>
  );
}

window.PageProgram = PageProgram;