// pages-tuition.jsx
const RATES_02 = [[['2 or 3 half days per week', '每周 2–3 个半天'], '$900'], [['4 or 5 half days per week', '每周 4–5 个半天'], '$1,050'], [['2 or 3 full days per week', '每周 2–3 个全天'], '$1,100'], [['4 full days per week', '每周 4 个全天'], '$1,350'], [['5 full days per week', '每周 5 个全天'], '$1,500']];
const RATES_35 = [[['2 or 3 half days per week', '每周 2–3 个半天'], '$850'], [['4 or 5 half days per week', '每周 4–5 个半天'], '$1,050'], [['2 or 3 full days per week', '每周 2–3 个全天'], '$1,000'], [['4 full days per week', '每周 4 个全天'], '$1,200'], [['5 full days per week', '每周 5 个全天'], '$1,350']];
const STEPS = [
  [['Schedule a visit', '预约参观'], ['Book a tour, meet the teachers, see the rooms and the yard, and ask everything you want to ask.', '约一次参观，见见老师，看看教室和院子，把想问的都问一遍。']],
  [['Receive the forms', '领取表格'], ['We hand you the enrolment pack — child information, emergency contacts and the required documents.', '我们会给您一套入园材料：孩子信息、紧急联系人和需要的证明文件。']],
  [['Return them to us', '交回材料'], ['Bring the completed forms and documents back and your child’s place is confirmed.', '把填好的表格和文件交回来，孩子的名额就确认了。']],
  [['Welcome to the family', '欢迎加入'], ['Your little one joins the bears. New children get a two-week settling-in period.', '小朋友正式成为小熊的一员，新入园的孩子有两周适应期。']],
];

function RateTable({ title, rows, tone }) {
  const t = useT();
  return (
    <div className="card">
      <span className={'chip chip-' + tone}>{title}</span>
      <table className="rate" style={{ marginTop: 22 }}>
        <thead><tr><th>{t('Schedule', '出勤方式')}</th><th style={{ textAlign: 'right' }}>{t('Monthly', '每月')}</th></tr></thead>
        <tbody>{rows.map(([s, p]) => <tr key={s[0]}><td>{t(...s)}</td><td>{p}</td></tr>)}</tbody>
      </table>
    </div>
  );
}

function TuitionPage() {
  const t = useT();
  return (
    <>
      <PageHead eyebrow={t('Tuition · 2026 rates', '学费 · 2026 年标准')} title={t('Clear rates, four simple steps', '价格清楚，四步入园')}
        lead={t('Full days, half days or drop-in — priced by the month, with no surprises. Questions are always welcome by phone.',
          '全天、半天或临时托育，按月收费，没有隐藏费用。任何问题都欢迎打电话问。')}/>
      <section className="sec">
        <div className="wrap">
          <div className="grid g4">
            {STEPS.map(([h, b], i) => (
              <div key={h[0]} className="card card-lift">
                <div style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--primary-soft)', color: 'var(--primary-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-disp)', fontWeight: 700, fontVariantNumeric: 'tabular-nums', marginBottom: 16 }}>{i + 1}</div>
                <h3 className="d4" style={{ marginBottom: 10 }}>{t(...h)}</h3>
                <p className="small muted">{t(...b)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="sec band-surface">
        <div className="wrap">
          <div style={{ maxWidth: '40ch', marginBottom: 38 }}>
            <Eyebrow>{t('2026 tuition rates', '2026 年学费')}</Eyebrow>
            <h2 className="tuition-cost-title" style={{ marginTop: 16 }}>{t('What care costs here', '在这里的费用')}</h2>
          </div>
          <div className="grid g2" style={{ alignItems: 'start' }}>
            <RateTable title={t('Children aged 0 – 2', '0 – 2 岁')} rows={RATES_02} tone="sun"/>
            <RateTable title={t('Children aged 3 – 5', '3 – 5 岁')} rows={RATES_35} tone="sky"/>
          </div>
          <div className="grid g2" style={{ marginTop: 'clamp(18px,2vw,28px)', alignItems: 'stretch' }}>
            <div className="card" style={{ background: 'var(--primary-soft)', boxShadow: 'none', display: 'flex', gap: 26, flexWrap: 'wrap', alignItems: 'center' }}>
              <div>
                <b className="small" style={{ letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--primary-ink)' }}>{t('Drop-in rates', '临时托育')}</b>
                <div style={{ display: 'flex', gap: 34, marginTop: 12 }}>
                  <div className="stat"><b>$17<span style={{ fontSize: 16 }}>/hr</span></b><span>{t('Ages 0 – 2', '0 – 2 岁')}</span></div>
                  <div className="stat"><b>$16<span style={{ fontSize: 16 }}>/hr</span></b><span>{t('Ages 3 – 5', '3 – 5 岁')}</span></div>
                </div>
              </div>
            </div>
            <div className="card">
              <h3 className="d4" style={{ marginBottom: 10 }}>{t('Free childcare through MAAC', '通过 MAAC 申请免费托育')}</h3>
              <p className="small muted" style={{ marginBottom: 16 }}>
                {t('We partner with the ', '我们与 ')}<a href="https://maacproject.org" target="_blank" rel="noreferrer">MAAC Project</a>
                {t(' so that eligible families can access high-quality care at no cost. Call us and we’ll walk you through eligibility.', ' 合作，符合条件的家庭可以免费获得高质量的托育服务。欢迎打电话，我们帮您看看是否符合条件。')}
              </p>
              <a className="btn btn-ghost btn-sm nums" href={PHONE_TEL}><SIcon name="phone" size={18}/>{PHONE}</a>
            </div>
          </div>
          <p className="small muted" style={{ marginTop: 24 }}>
            {t('Half days and full days both include homemade meals and snacks. Extended care at the end of the day is free — just tell your child’s teacher in advance.',
              '半天和全天都包含家里现做的饭菜与点心。傍晚的延时看护免费，只要提前告诉老师。')}
          </p>
        </div>
      </section>
      <VisitBand/>
    </>
  );
}
Object.assign(window, { TuitionPage });