// page-trial.jsx — Page 4: Schedule a Trial (routing form + calendar)

function PageTrial({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const [step, setStep] = React.useState(1);
  const [selectedSlot, setSelectedSlot] = React.useState('Wed 4:15');
  const steps = en ? ['About the student', 'Goals', 'Pick a time', 'Confirm'] : ['学生信息', '学习目标', '选择时间', '确认'];

  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="schedule" headingFont={headingFont} />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 0 }}>
        <div style={{ padding: '56px 80px 80px', borderRight: `0.5px solid ${p.line}` }}>
          <Mono dark={dark} style={{ marginBottom: 16, display: 'inline-block' }}>{en ? 'Step 3 of 4' : '第 3 步 / 共 4 步'}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={42} style={{ marginBottom: 12 }}>
            {en ? 'Pick a time that works.' : '选一个适合的时间。'}
          </H>
          <p style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.inkSoft, marginBottom: 36, maxWidth: 540 }}>
            {en ? 'Trials run 30 minutes. We\u2019ll send a calendar invite, the studio address, and what to bring.' : '试听课时长 30 分钟。我们会发送日历邀请、学校地址与到场指引。'}
          </p>

          <div style={{ marginBottom: 32 }}><Stepper dark={dark} steps={steps} current={2} /></div>

          {/* Calendar */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, marginBottom: 32 }}>
            {(en ? ['Mon Mar 4', 'Tue Mar 5', 'Wed Mar 6', 'Thu Mar 7', 'Fri Mar 8'] : ['周一 3/4', '周二 3/5', '周三 3/6', '周四 3/7', '周五 3/8']).map((d, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: p.inkMuted, textAlign: 'center', padding: '6px 0', borderBottom: `0.5px solid ${p.line}` }}>{d}</div>
                {[
                  { t: '3:30', av: i !== 1 },
                  { t: '4:15', av: true, sel: i === 2 },
                  { t: '5:00', av: i !== 3 },
                  { t: '5:45', av: i % 2 === 0 },
                  { t: '6:30', av: i !== 0 },
                ].map((s, j) => (
                  <button key={j} onClick={() => s.av && setSelectedSlot(s.t)} disabled={!s.av} style={{
                    padding: '12px 8px', textAlign: 'center', border: `0.5px solid ${s.sel ? p.ink : p.line}`,
                    background: s.sel ? p.ink : (s.av ? p.paper : p.paperSoft),
                    color: s.sel ? p.paper : (s.av ? p.ink : p.inkMuted),
                    fontFamily: TOKENS.font.mono, fontSize: 11, borderRadius: TOKENS.radius.xs,
                    cursor: s.av ? 'pointer' : 'not-allowed', textDecoration: s.av ? 'none' : 'line-through',
                    minHeight: 44,
                  }}>{s.t}</button>
                ))}
              </div>
            ))}
          </div>

          <div style={{ padding: 18, background: p.paperSoft, borderRadius: TOKENS.radius.sm, fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted, lineHeight: 1.6, marginBottom: 32 }}>
            <span style={{ color: p.ink, fontWeight: 500 }}>{en ? 'Note' : '说明'} —</span> {en ? 'Times shown are local Vancouver (PT). If none of these work, leave us a note and we\u2019ll find an alternative.' : '时间为温哥华本地时间 (PT)。若以上时段均不合适，请留言，我们会另作安排。'}
          </div>

          <div style={{ display: 'flex', gap: 12, justifyContent: 'space-between', alignItems: 'center' }}>
            <Button dark={dark} variant="ghost">← {STRINGS[lang].cta.back}</Button>
            <Button dark={dark} variant="primary" size="lg">{STRINGS[lang].cta.save}</Button>
          </div>
        </div>

        {/* Sidebar — your selection */}
        <div style={{ padding: '56px 40px', background: p.paperSoft }}>
          <Mono dark={dark} style={{ marginBottom: 16, display: 'inline-block' }}>{en ? 'Your trial' : '您的试听'}</Mono>
          <H as="h3" dark={dark} font={headingFont} size={20} style={{ marginBottom: 24 }}>{en ? 'Ji-eun Park · Piano' : '朴智恩 · 钢琴'}</H>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 28 }}>
            {[
              [en ? 'Student' : '学生', 'Mia C., age 8'],
              [en ? 'Instrument' : '乐器', en ? 'Piano · Beginner' : '钢琴 · 初学'],
              [en ? 'Goal' : '目标', en ? 'Steady weekly progress' : '稳定的每周进步'],
              [en ? 'Time' : '时间', en ? `Wed Mar 6 · 4:15 pm` : '3/6 周三 · 下午 4:15'],
              [en ? 'Duration' : '时长', en ? '30 min · CA$0' : '30 分钟 · 免费'],
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, paddingBottom: 14, borderBottom: i < 4 ? `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, textAlign: 'right' }}>{r[1]}</span>
              </div>
            ))}
          </div>
          <Toast dark={dark} tone="info" title={en ? 'Free for new families' : '新家庭免费'} body={en ? 'No card required. We\u2019ll confirm by SMS within an hour.' : '无需付款。一小时内短信确认。'} />
        </div>
      </div>
    </Page>
  );
}

window.PageTrial = PageTrial;