// pages-faq.jsx — FAQs + Book a Tour
const FAQS = [
  [['What is your student-to-teacher ratio?', '师生比是多少？'], ['We keep it low so every child gets personal attention: three teachers, and a typical ratio of 1:4 depending on the age group.', '我们保持很低的比例，让每个孩子都能被单独关注：三位老师，按年龄段通常为 1:4。']],
  [['What are your tuition rates?', '学费怎么算？'], ['Rates depend on your child’s age, how many days a week they attend and whether you choose half or full days. The full 2026 schedule is on the Tuition page.', '费用取决于孩子年龄、每周来几天，以及选择半天还是全天。完整的 2026 年价格表在「学费」页面。']],
  [['What does your curriculum include?', '课程包括哪些内容？'], ['Foundational physical activity, academic learning, arts and crafts, music and social skills — with a professional physical-fitness focus that builds strong bodies alongside creativity and self-expression.', '基础体能活动、学业启蒙、手工美术、音乐和社交能力——其中体能是专业重点，在长身体的同时培养创造力与表达。']],
  [['How do you handle behavioural issues?', '孩子有行为问题怎么处理？'], ['With positive guidance and reinforcement. Our teachers are practised at recognising what is behind a behaviour, and we build personalised support plans together with parents.', '用正向引导和鼓励。老师善于看出行为背后的原因，并和家长一起制定个别的支持方案。']],
  [['Do you provide nap time?', '有午睡吗？'], ['Yes — usually between afternoon activities, in a quiet, comfortable space. We provide a mat for each child; parents bring blankets and sheets.', '有，通常安排在下午活动之间，在安静舒适的空间。我们为每个孩子准备睡垫，被子和床单请家长自备。']],
  [['How do you communicate with parents?', '怎么和家长沟通？'], ['Daily. Texts and photos through the day keep you up to date on how your child is doing and what they are working on.', '每天沟通。白天会用短信和照片让您知道孩子的状态和在做什么。']],
  [['How do you handle sick children?', '孩子生病了怎么办？'], ['We contact parents immediately, follow California Department of Health guidance, and require a doctor’s note before a child returns.', '我们会立即联系家长，遵照加州卫生部门的规定，返园需要医生证明。']],
  [['What is your enrolment process?', '入园流程是怎样的？'], ['An application form, health records, a tour of the house and a meeting with the teachers. New children have a two-week settling-in period, and we hand over all paperwork at your first visit.', '填写申请表、提供健康记录、参观园所并与老师见面。新入园的孩子有两周适应期，所有材料会在第一次参观时给您。']],
  [['How do you handle allergies?', '过敏怎么处理？'], ['Very seriously. We learn each child’s specific needs, our staff is trained to respond to reactions, and we have a strict policy against any food that could trigger a severe allergy.', '非常认真地对待。我们了解每个孩子的具体情况，老师受过过敏反应处理训练，并严格禁止可能引发严重过敏的食物。']],
  [['What is your holiday schedule?', '假期怎么安排？'], ['We follow California’s major holidays and give parents the full schedule at the start of each year.', '我们按加州主要节假日安排，每年年初会把完整的假期表发给家长。']],
  [['What if I’m late picking up my child?', '接孩子迟到了怎么办？'], ['Let the teacher know in advance — extended care is free. If we can’t reach you, we work down the emergency contacts you’ve given us.', '请提前告诉老师——延时看护是免费的。如果联系不上您，我们会按您提供的紧急联系人顺序联系。']],
  [['When can we visit?', '什么时候可以参观？'], ['Weekdays after 6 PM and any time at weekends. Call or text ' + PHONE + ' to arrange it; if we don’t answer straight away we’re with the children.', '工作日晚 6 点后、周末任意时间。请打电话或发短信到 ' + PHONE + ' 预约；没有马上接听通常是在照顾孩子。']],
];

function FaqPage() {
  const t = useT();
  return (
    <>
      <PageHead eyebrow={t('FAQs', '常见问题')} title={t('Questions we’re asked on every tour', '每次参观都会被问到的问题')} titleMax="none" leadMax="none"
        lead={t('If yours isn’t here, call or text — we’d rather answer it properly.', '如果这里没有您的问题，欢迎打电话或发短信——我们更愿意好好回答。')}/>
      <section className="sec" style={{ paddingBottom: 'clamp(27px,3.3vw,50px)' }}>
        <div className="wrap" style={{ maxWidth: 900 }}>
          {FAQS.map(([q, a], i) => (
            <details className="faq" key={i} open={i === 0}>
              <summary>{t(...q)}<span className="mark"><SIcon name="plus" size={17}/></span></summary>
              <div className="ans">{t(...a)}</div>
            </details>
          ))}
          <div className="card" style={{ marginTop: 12, background: 'color-mix(in oklch,var(--sun-soft) 22%,white)', boxShadow: 'none', display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <h3 className="d4" style={{ marginBottom: 6 }}>{t('Still wondering something?', '还有其他问题？')}</h3>
              <p className="small muted">{t('We welcome calls at any time for enquiries.', '任何时间都欢迎来电咨询。')}</p>
            </div>
            <a className="btn btn-primary nums" href={PHONE_TEL}><SIcon name="phone" size={19}/>{PHONE}</a>
          </div>
        </div>
      </section>
      <VisitBand/>
    </>
  );
}

function TourPage() {
  const t = useT();
  const WHENS = [['Weekday after 6 PM', '工作日晚 6 点后'], ['Saturday', '周六'], ['Sunday', '周日'], ['Flexible', '都可以']];
  const AGES = [['3–11 months', '3–11 个月'], ['1 year', '1 岁'], ['2 years', '2 岁'], ['3 years', '3 岁'], ['4 years', '4 岁'], ['5 years', '5 岁']];
  const [sent, setSent] = React.useState(false);
  const blank = { parent: '', phone: '', email: '', age: '', when: 0, note: '' };
  const [f, setF] = React.useState(blank);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const ok = f.parent.trim() && f.phone.trim();
  return (
    <>
      <PageHead eyebrow={t('Book a tour', '预约参观')} title={t('Come and see the house', '来看看我们的家')}
        lead={t('Tell us a little about your family and when suits you. We’ll confirm by text or call — usually the same evening.',
          '简单告诉我们您的情况和方便的时间，我们会用短信或电话确认，通常当天晚上就回。')}/>
      <section className="sec">
        <div className="wrap split" style={{ alignItems: 'start' }}>
          <div className="card" style={{ padding: 'clamp(24px,3vw,40px)' }}>
            {sent ? (
              <div style={{ display: 'grid', gap: 16, placeItems: 'start' }}>
                <div style={{ width: 54, height: 54, borderRadius: 999, background: 'var(--sage-soft)', color: 'var(--sage-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><SIcon name="check" size={28}/></div>
                <h2 className="d3">{t('Thank you — request received.', '谢谢您，我们收到啦。')}</h2>
                <p className="muted">{t('We’ll be in touch at %s to confirm your visit. If you’d like an answer sooner, call or text %s — we pick up whenever we’re not with the children.',
                  '我们会通过 %s 与您确认参观时间。如果想更快得到回复，可以打电话或发短信到 %s——只要不在照顾孩子，我们都会接。', f.phone, PHONE)}</p>
                <button className="btn btn-ghost btn-sm" onClick={() => { setSent(false); setF(blank); }}>{t('Send another request', '再提交一次')}</button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); if (ok) setSent(true); }} style={{ display: 'grid', gap: 18 }}>
                <div className="grid g2" style={{ gap: 18 }}>
                  <div className="field"><label htmlFor="t-parent">{t('Parent’s name', '家长姓名')}</label><input className="input" id="t-parent" value={f.parent} onChange={set('parent')} placeholder={t('Your name', '您的姓名')} required/></div>
                  <div className="field"><label htmlFor="t-phone">{t('Phone or text', '电话或短信')}</label><input className="input" id="t-phone" value={f.phone} onChange={set('phone')} placeholder="(858) 000-0000" required/></div>
                </div>
                <div className="grid g2" style={{ gap: 18 }}>
                  <div className="field"><label htmlFor="t-email">{t('Email', '邮箱')} <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>{t('(optional)', '（选填）')}</span></label><input className="input" id="t-email" type="email" value={f.email} onChange={set('email')} placeholder="you@email.com"/></div>
                  <div className="field"><label htmlFor="t-age">{t('Child’s age', '孩子年龄')}</label>
                    <select className="input" id="t-age" value={f.age} onChange={set('age')}>
                      <option value="">{t('Select an age', '请选择')}</option>
                      {AGES.map((a, i) => <option key={i} value={a[0]}>{t(...a)}</option>)}
                    </select>
                  </div>
                </div>
                <div className="field"><label>{t('When would you like to come?', '什么时候方便来？')}</label>
                  <div className="chiprow">
                    {WHENS.map((w, i) => (
                      <button type="button" key={i} className={'chip' + (f.when === i ? ' chip-primary' : '')} style={{ border: 'none', cursor: 'pointer' }} onClick={() => setF({ ...f, when: i })}>{t(...w)}</button>
                    ))}
                  </div>
                </div>
                <div className="field"><label htmlFor="t-note">{t('Anything we should know?', '还有什么想告诉我们的？')}</label><textarea className="input" id="t-note" value={f.note} onChange={set('note')} placeholder={t('Schedule you need, allergies, questions…', '需要的出勤安排、过敏情况、想问的问题……')}/></div>
                <button className="btn btn-primary" type="submit" disabled={!ok} style={{ opacity: ok ? 1 : .45, justifySelf: 'start' }}><SIcon name="calendar" size={19}/>{t('Request a tour', '提交预约')}</button>
                <p className="small muted">{t('This form is a demo — nothing is sent yet. Call or text %s to book right away.', '此表单为演示，暂时不会真正发送。想马上预约请打电话或发短信到 %s。', PHONE, PHONE)}</p>
              </form>
            )}
          </div>
          <div style={{ display: 'grid', gap: 18 }}>
            <Plate id="tour-photo" ar="ar-43" label={t('Photo of the house / yard', '房子或院子的照片')}/>
            <div className="card" style={{ display: 'grid', gap: 16 }}>
              {[
                ['clock', 'sun', ['Visiting hours', '参观时间'], ['Weekdays after 6 PM · weekends any time', '工作日晚 6 点后 · 周末任意时间']],
                ['calendar', 'sage', ['Care hours', '托育时间'], ['Mon – Fri · 7:00 AM – 5:30 PM', '周一至周五 · 上午 7:00 – 下午 5:30']],
              ].map(([ic, tone, label, val]) => (
                <div key={label[0]} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 14 }}>
                  <span style={{ color: `var(--${tone}-ink)` }}><SIcon name={ic} size={21}/></span>
                  <span><b style={{ fontFamily: 'var(--font-disp)' }}>{t(...label)}</b><br/><span className="small muted">{t(...val)}</span></span>
                </div>
              ))}
              <div style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 14 }}><span style={{ color: 'var(--primary-ink)' }}><SIcon name="pin" size={21}/></span><span><b style={{ fontFamily: 'var(--font-disp)' }}>{t('Address', '地址')}</b><br/><a className="small" href={MAP_URL} target="_blank" rel="noreferrer">{t(ADDRESS_EN, ADDRESS_ZH)}</a></span></div>
              <div style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 14 }}><span style={{ color: 'var(--sky-ink)' }}><SIcon name="phone" size={21}/></span><span><b style={{ fontFamily: 'var(--font-disp)' }}>{t('Call or text', '电话／短信')}</b><br/><a className="small nums" href={PHONE_TEL}>{PHONE}</a></span></div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
Object.assign(window, { FAQS, FaqPage, TourPage });