// page-enroll.jsx — Page 5: Online enrollment + e-signature

function PageEnroll({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const steps = en ? ['Family', 'Student', 'Program', 'Sign', 'Pay'] : ['家庭', '学生', '课程', '签署', '支付'];

  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="enroll" headingFont={headingFont} />
      <div style={{ padding: '48px 80px 80px' }}>
        <Mono dark={dark} style={{ marginBottom: 14, display: 'inline-block' }}>{en ? 'Enrollment · Step 4 of 5' : '注册 · 第 4 步 / 共 5 步'}</Mono>
        <H as="h1" dark={dark} font={headingFont} size={42} style={{ marginBottom: 10 }}>
          {en ? 'From trial to signed,\nin one sitting.' : '从试听到签约，\n一次完成。'}
        </H>
        <p style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.inkSoft, marginBottom: 32, maxWidth: 540 }}>
          {en ? 'Submit family details, choose a program, and sign electronically.' : '提交家庭信息、选择课程方案，并在线签署。'}
        </p>

        <div style={{ marginBottom: 40 }}><Stepper dark={dark} steps={steps} current={3} /></div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 32 }}>
          {/* Document preview */}
          <div style={{ border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.md, background: p.paper, overflow: 'hidden' }}>
            <div style={{ padding: '14px 20px', borderBottom: `0.5px solid ${p.line}`, background: p.paperSoft, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{ width: 8, height: 8, borderRadius: 4, background: p.gold }} />
                <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.ink, fontWeight: 500 }}>{en ? 'Lesson Agreement · 2026/27' : '上课协议 · 2026/27 学年'}</span>
              </div>
              <Mono dark={dark}>3 / 3 pages</Mono>
            </div>
            <div style={{ padding: '40px 56px', minHeight: 420 }}>
              <div style={{ fontFamily: TOKENS.font.serif, fontSize: 22, color: p.ink, marginBottom: 18, fontWeight: 500 }}>{en ? 'Studio Policies & Tuition Agreement' : '琴房政策与学费协议'}</div>
              <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkSoft, lineHeight: 1.75, marginBottom: 14 }}>
                {en ? 'This agreement is between Mastery School of Music ("the Studio") and the parent/guardian named below ("Family"), regarding lessons for the student named in Schedule A.' : '本协议由 Mastery 音乐学校（"学校"）与下方家长/监护人（"家庭"）就附录 A 中所列学生的课程事宜签订。'}
              </div>
              <div style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: p.inkMuted, lineHeight: 1.7, marginBottom: 14 }}>
                {en ? '1. Tuition is billed monthly on the 1st via Stripe. 2. Cancellation requires 30 days written notice. 3. Makeup credits expire at term end. 4. Recordings made during recitals may be shared on the studio website…' : '1. 学费每月 1 日通过 Stripe 自动扣款；2. 取消课程需提前 30 天书面通知；3. 补课额度学期末作废；4. 汇报演出录像可能于学校官网展示……'}
              </div>
              <div style={{ marginTop: 32, padding: 20, border: `1px dashed ${p.gold}`, borderRadius: TOKENS.radius.sm, background: 'rgba(183,146,90,0.04)' }}>
                <Mono dark={dark} style={{ marginBottom: 8, display: 'inline-block' }}>{en ? 'Sign here' : '在此签名'}</Mono>
                <div style={{ height: 64, borderBottom: `1px solid ${p.ink}`, marginTop: 6, display: 'flex', alignItems: 'flex-end', paddingBottom: 6 }}>
                  <span style={{ fontFamily: '"Caveat", cursive', fontSize: 28, color: p.ink }}>Lin Chen</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
                  <span style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: p.inkMuted }}>Lin Chen · {en ? 'Parent / Guardian' : '家长 / 监护人'}</span>
                  <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted }}>2026-03-04 14:32 PT</span>
                </div>
              </div>
            </div>
          </div>

          {/* Sign panel */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card dark={dark}>
              <Mono dark={dark} style={{ marginBottom: 12, display: 'inline-block' }}>{en ? 'Summary' : '小结'}</Mono>
              {[
                [en ? 'Family' : '家庭', 'Chen Family'],
                [en ? 'Student' : '学生', 'Mia C., age 8'],
                [en ? 'Program' : '项目', en ? 'Mastery · Piano' : '主线 · 钢琴'],
                [en ? 'Teacher' : '教师', en ? 'Ji-eun Park' : '朴智恩'],
                [en ? 'Tuition' : '学费', '$360 / mo'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderTop: i ? `0.5px solid ${p.lineSoft}` : 'none' }}>
                  <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted }}>{r[0]}</span>
                  <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.ink, fontWeight: 500 }}>{r[1]}</span>
                </div>
              ))}
            </Card>
            <Card dark={dark} padding={20}>
              <Mono dark={dark} style={{ marginBottom: 12, display: 'inline-block' }}>{en ? 'Confirm to sign' : '确认后签署'}</Mono>
              {[
                en ? 'I have read and accept the studio policies' : '已阅读并同意琴房政策',
                en ? 'I authorize monthly billing on the 1st' : '同意每月 1 日自动扣款',
                en ? 'I consent to recital photography' : '同意演出影像使用',
              ].map((c, i) => (
                <label key={i} style={{ display: 'flex', gap: 10, padding: '10px 0', alignItems: 'flex-start' }}>
                  <div style={{ width: 16, height: 16, borderRadius: 3, border: `0.5px solid ${p.line}`, background: i < 2 ? p.ink : p.paper, color: p.paper, fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>{i < 2 ? '✓' : ''}</div>
                  <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkSoft, lineHeight: 1.5 }}>{c}</span>
                </label>
              ))}
            </Card>
            <Button dark={dark} variant="primary" size="lg" fullWidth>{STRINGS[lang].cta.sign}</Button>
            <Button dark={dark} variant="ghost" fullWidth>← {STRINGS[lang].cta.back}</Button>
          </div>
        </div>
      </div>
    </Page>
  );
}

window.PageEnroll = PageEnroll;