// pages-safety.jsx — Safety & Facilities, Gallery
const SANITATION = [
  [['Daily cleaning.', '每日清洁。'], ['The whole house is cleaned and sanitised every day, with extra attention to toys, tables and door handles.', '整个屋子每天清洁消毒，玩具、桌面和门把手格外仔细。']],
  [['Hand hygiene.', '勤洗手。'], ['Children and staff wash hands often — before meals, after the restroom, after the yard.', '孩子和老师经常洗手——饭前、如厕后、从院子回来后。']],
  [['Safe materials.', '安全用品。'], ['Child-safe, non-toxic cleaning products only.', '只使用对儿童安全、无毒的清洁用品。']],
  [['Illness prevention.', '预防生病。'], ['Daily health checks and a strict stay-home policy when symptoms appear.', '每天做健康检查，出现症状时请家长务必让孩子在家休息。']],
];
const SECURITY = [
  [['Secured access.', '门禁管理。'], ['Only authorised adults come in; visitors check in and show identification.', '只有获得许可的成人才能进入，来访者需登记并出示身份证明。']],
  [['Close supervision.', '近距离照看。'], ['Small teacher-to-child ratios mean eyes and attention on every child.', '师生比小，才有目光和注意力落在每个孩子身上。']],
  [['Emergency ready.', '应急准备。'], ['Staff trained in first aid, CPR and emergency response, with fire drills and evacuation practice.', '老师接受过急救、CPR 与应急处理训练，并定期进行消防和疏散演练。']],
];

function SafetyPage() {
  const t = useT();
  const pair = (arr) => arr.map(([a, b]) => [t(...a), t(...b)]);
  return (
    <>
      <PageHead eyebrow={t('Safety & facilities', '安全与设施')} title={t('The part parents ask about first', '家长最先问的那件事')}
        lead={t('Safety and well-being come before everything else here — in the floors, the doors, the routines and the training.',
          '在这里，安全和健康排在所有事情之前——体现在地面、门锁、日常流程和老师的训练里。')}/>
      <section className="sec">
        <div className="wrap grid g2" style={{ alignItems: 'stretch' }}>
          <div className="card">
            <div className="tile" style={{ background: 'var(--sage-soft)', color: 'var(--sage-ink)', marginBottom: 18 }}><SIcon name="spray" size={24}/></div>
            <h2 className="d3" style={{ marginBottom: 20 }}>{t('Sanitation practices', '清洁与卫生')}</h2>
            <Bullets items={pair(SANITATION)} tone="sage"/>
          </div>
          <div className="card">
            <div className="tile" style={{ background: 'var(--sky-soft)', color: 'var(--sky-ink)', marginBottom: 18 }}><SIcon name="lock" size={24}/></div>
            <h2 className="d3" style={{ marginBottom: 20 }}>{t('Security features', '安全管理')}</h2>
            <Bullets items={pair(SECURITY)} tone="sky" icon="check-circle"/>
          </div>
        </div>
      </section>
      <section className="sec-tight">
        <div className="wrap card" style={{ background: 'var(--primary-soft)', boxShadow: 'none' }}>
          <div className="split" style={{ gap: 'clamp(20px,3vw,48px)' }}>
            <div>
              <h2 className="d3" style={{ marginBottom: 12 }}>{t('Why safety matters', '为什么安全最重要')}</h2>
              <p className="muted">{t('Parents need peace of mind. Our team works to make sure every child feels secure and cared for while they learn, play and grow — and you are welcome to see all of it in action on a tour.',
                '家长需要的是放心。我们努力让每个孩子在学习、玩耍、成长时都感到安全和被照顾——也欢迎您来参观时亲眼看看这一切。')}</p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a className="btn btn-primary" href={purl('/tour')}>{t('See it on a tour', '来参观看看')}</a>
              <a className="btn btn-white nums" href={PHONE_TEL}><SIcon name="phone" size={19}/>{PHONE}</a>
            </div>
          </div>
        </div>
      </section>
      <section className="sec band-sage">
        <div className="wrap">
          <div className="split" style={{ marginBottom: 34 }}>
            <div>
              <Eyebrow>{t('Outdoor sports area', '户外运动区')}</Eyebrow>
              <h2 className="d2" style={{ margin: '16px 0 16px' }}>{t('A yard built for running', '一个为奔跑准备的院子')}</h2>
              <p className="muted" style={{ maxWidth: '52ch' }}>{t('Colourful plastic sports flooring with bright painted tracks to run along, plus a fleet of pedal ride-on toys — reliably the most fought-over thing in the house.',
                '彩色塑胶运动地面，画着明亮的跑道，还有一队脚踏车——常年是家里最抢手的东西。')}</p>
            </div>
            <Plate id="out-hero" ar="ar-32" tone="sage" label={t('Outdoor sports area', '户外运动区')}/>
          </div>
          <div className="grid g4">
            {[1, 2, 3, 4].map(n => <Plate key={n} id={'out-' + n} ar="ar-11" tone="sage" label={t('Outdoor photo', '户外照片')}/>)}
          </div>
        </div>
      </section>
      <section className="sec">
        <div className="wrap">
          <div className="split" style={{ marginBottom: 34 }}>
            <Plate id="in-hero" ar="ar-32" tone="sun" src="../uploads/indoor-room.jpg" label={t('Indoor room', '室内照片')}/>
            <div>
              <Eyebrow>{t('Indoor setting', '室内环境')}</Eyebrow>
              <h2 className="d2" style={{ margin: '16px 0 16px' }}>{t('Floors that forgive first steps', '接得住第一步的地面')}</h2>
              <p className="muted" style={{ maxWidth: '52ch' }}>{t('Cushioned foam flooring in bright colours, layered with carpets printed with cartoon numbers and letters — soft enough for learning to walk, and useful enough to learn from.',
                '明亮的泡沫软垫地面，铺上印有卡通数字和字母的地毯——软得可以学走路，也刚好能顺便学点东西。')}</p>
            </div>
          </div>
          <div className="grid g4">
            {[1, 2, 3, 4].map(n => <Plate key={n} id={'in-' + n} ar="ar-11" tone="sun" src={n === 1 ? '../uploads/indoor-play.jpg' : undefined} label={t('Indoor photo', '室内照片')}/>)}
          </div>
        </div>
      </section>
      <VisitBand/>
    </>
  );
}

function GalleryPage() {
  const t = useT();
  const groups = [
    [['Outdoor & movement', '户外与运动'], 'sage', ['g1', 'g2', 'g3', 'g4', 'g5']],
    [['Learning & art', '学习与美术'], 'sun', ['g6', 'g7', 'g8', 'g9', 'g10']],
    [['Everyday moments', '日常时刻'], 'sky', ['g11', 'g12', 'g13', 'g14', 'g15']],
  ];
  const ars = ['ar-32', 'ar-45', 'ar-11', 'ar-32', 'ar-11'];
  return (
    <>
      <PageHead eyebrow={t('Gallery', '照片')} title={t('Days at Seven Little Bears', '小熊们的日常')}
        lead={t('Capture the beautiful moments of the children.', '记录孩子们的美好时光')}/>
      {groups.map(([title, tone, ids], gi) => (
        <section key={title[0]} className={'sec' + (gi % 2 ? ' band-surface' : '')}>
          <div className="wrap">
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 30 }}>
              <span className={'chip chip-' + tone}>{t(...title)}</span><hr className="rule" style={{ flex: 1 }}/>
            </div>
            <div className="masonry">
              {ids.map((id, i) => <Plate key={id} id={'gal-' + id} ar={ars[i % ars.length]} tone={tone} label={t('Drop a photo', '拖入照片')}/>)}
            </div>
          </div>
        </section>
      ))}
      <VisitBand/>
    </>
  );
}
Object.assign(window, { SafetyPage, GalleryPage });