// pages-programs.jsx — program data + Programs and Why-Us pages ([en, zh] pairs)
const PROGRAMS = [
  {
    id: 'toddler', tone: 'sun', icon: 'sun',
    age: ['3 months – 2 years', '3 个月 – 2 岁'], name: ['Toddler', '小小班'],
    blurb: ['First steps, first words, first friends — on floors built to catch every tumble.', '第一步、第一句话、第一个朋友——地面为每一次跌倒而准备。'],
    body: [
      ['Our youngest program follows the child’s own appetite for discovery. Rooms are laid with colourful foam cushioning so that pulling up, wobbling and walking all happen on a soft, forgiving floor.',
        '最小的孩子按自己的节奏探索世界。教室铺满彩色泡沫软垫，让扶站、摇摇晃晃到独立行走，都发生在柔软安全的地面上。'],
      ['Days move gently between sensory play, songs, movement and rest, with one caregiver never far away. Diapering, feeding and nap rhythms follow each family’s routine rather than a timetable.',
        '一天在感官游戏、儿歌、运动与休息之间温和过渡，老师始终在身边。换尿布、喝奶和午睡的节奏跟随每个家庭的习惯，而不是死板的时间表。'],
    ],
    chips: [['Foam-cushioned rooms', '泡沫软垫教室'], ['Sensory play', '感官游戏'], ['Songs & movement', '儿歌与律动'], ['Family nap rhythms', '尊重家庭作息']],
  },
  {
    id: 'two', tone: 'sage', icon: 'users',
    age: ['2 years', '2 岁'], name: ['Two-year-old', '小班'],
    blurb: ['Circle time, high fives and the first taste of belonging to a group.', '圆圈时间、击掌问候，第一次体会「我属于这个集体」。'],
    body: [
      ['The two-year-old day opens with Circle Time — a Conscious Discipline ritual where children greet each friend by name with a cheerful good morning, a high five or a kind hug.',
        '两岁孩子的一天从圆圈时间开始——这是「有意识管教」的日常仪式：孩子逐个叫出同伴的名字，说声早上好，击个掌，或轻轻抱一下。'],
      ['Those few minutes do a lot of work: they build the sense of community and connection that carries the rest of the day, from paint and play dough to running in the yard.',
        '这几分钟很重要：它建立起集体感与连接，支撑起之后的一整天——从颜料、橡皮泥，到院子里的奔跑。'],
    ],
    chips: [['Circle Time', '圆圈时间'], ['Conscious Discipline', '有意识管教'], ['Arts & crafts', '手工与美术'], ['Outdoor play', '户外活动']],
  },
  {
    id: 'three', tone: 'sky', icon: 'book',
    age: ['3 – 5 years', '3 – 5 岁'], name: ['Three-year-old & up', '中大班'],
    blurb: ['Curiosity gets structure: language, numbers, stories and strong bodies.', '好奇心开始有了结构：语言、数字、故事，以及结实的身体。'],
    body: [
      ['The oldest group lays the foundation for a lifelong love of learning — cognitive, social and language skills built through hands-on activities, interactive storytelling and group play. Children practise thinking out loud, expressing themselves and keeping a friendship going.',
        '最大的孩子在这里为终身学习打底——通过动手活动、互动讲故事和小组游戏，发展认知、社交与语言能力。他们练习把想法说出来、表达自己，也学着维持一段友谊。'],
      ['Physical development runs alongside the academics. With daily movement and active play, children make real gains in motor skills, coordination and strength — and with them, confidence and habits that stick.',
        '身体发展与学习同步进行。每天的运动与活跃游戏，让孩子在动作能力、协调性和力量上都有明显进步，随之而来的是自信与能保持一生的习惯。'],
    ],
    chips: [['Storytelling', '故事时间'], ['Numeracy', '数学启蒙'], ['Drawing', '绘画'], ['Daily PE', '每日体能']],
  },
];

const CURRICULUM = [
  ['music', ['Music', '音乐'], 'sun'], ['ball', ['Movement & sensory', '律动与感官'], 'sage'], ['run', ['PE & fitness', '体能训练'], 'primary'],
  ['plus', ['Numeracy', '数学启蒙'], 'sky'], ['palette', ['Drawing', '绘画'], 'berry'], ['book', ['Storytelling', '讲故事'], 'sun'],
  ['leaf', ['Outdoor activities', '户外活动'], 'sage'], ['star', ['Martial arts for kids', '儿童武术'], 'primary'],
];

function MartialArts({ compact }) {
  const t = useT();
  return (
    <section className={'sec ' + (compact ? 'band-surface' : '')}>
      <div className="wrap split split-wide">
        <div>
          <Eyebrow>{t('What sets us apart', '我们的特色')}</Eyebrow>
          <h2 className="d2" style={{ margin: '16px 0 18px' }}>{t('Martial arts, taught by a 5th-degree master', '五段教练亲授的儿童武术')}</h2>
          <p className="lead" style={{ marginBottom: 18 }}>
            {t('Children here learn from an instructor with more than 30 years in authentic Chen-style Tai Chi and Sanda — Chinese kickboxing — in classes pitched squarely at little bodies.',
              '孩子们跟随一位有三十余年经验的中国武术五段教练学习传统陈氏太极与散打，课程完全按幼儿的身体设计。')}
          </p>
          <p className="muted" style={{ marginBottom: 24, maxWidth: '58ch' }}>
            {t('Balance, discipline and self-confidence come first; focus, respect and perseverance follow. Traditional technique meets modern teaching, so a class feels like play while it quietly builds self-control, teamwork and emotional resilience — plus a rich piece of cultural experience.',
              '先练平衡、纪律与自信，再自然带出专注、尊重与坚持。传统技法配合现代教学，一节课玩起来像游戏，却在悄悄培养自控力、团队合作与情绪韧性，也是一份难得的文化体验。')}
          </p>
          <div className="chiprow">
            <span className="chip chip-primary"><SIcon name="star" size={17}/>{t('Chen-style Tai Chi', '陈氏太极')}</span>
            <span className="chip chip-sun"><SIcon name="run" size={17}/>{t('Sanda basics', '散打基础')}</span>
            <span className="chip chip-sage"><SIcon name="heart" size={17}/>{t('30+ years’ experience', '30 年以上经验')}</span>
          </div>
        </div>
        <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <Plate id="ma-1" ar="ar-45" tone="primary" label={t('Martial arts class', '武术课照片')}/>
          <div className="grid" style={{ gap: 16 }}>
            <Plate id="ma-2" ar="ar-11" tone="sun" label={t('Tai Chi pose', '太极动作')}/>
            <Plate id="ma-3" ar="ar-11" tone="sage" label={t('Group bow', '行礼合影')}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProgramsPage() {
  const t = useT();
  return (
    <>
      <PageHead eyebrow={t('Programs', '班级课程')} title={t('Three groups, one growing family', '三个班级，一个大家庭')}
        lead={t('Care from three months to five years, in small groups with a typical 1:4 ratio — so every child is known, not managed.',
          '照顾 3 个月至 5 岁的孩子，小班制、师生比通常为 1:4——每个孩子都被真正了解，而不是被管理。')}>
        <div className="chiprow" style={{ marginTop: 26 }}>
          {PROGRAMS.map(p => <a key={p.id} className={'chip chip-' + p.tone} href={purl('/programs') + '#' + p.id}><SIcon name={p.icon} size={17}/>{t(...p.name)} · {t(...p.age)}</a>)}
        </div>
      </PageHead>
      {PROGRAMS.map((p, i) => (
        <section key={p.id} id={p.id} className={'sec' + (i % 2 ? ' band-surface' : '')}>
          <div className="wrap">
            <div className="split split-wide" style={{ alignItems: 'start' }}>
              <div style={{ order: i % 2 ? 2 : 1, minWidth: 0 }}>
                <span className={'chip chip-' + p.tone}><SIcon name={p.icon} size={17}/>{t(...p.age)}</span>
                <h2 className="d2" style={{ margin: '18px 0 16px' }}>{t(...p.name)}</h2>
                <p className="lead" style={{ marginBottom: 18 }}>{t(...p.blurb)}</p>
                {p.body.map((b, j) => <p key={j} className="muted" style={{ maxWidth: '58ch' }}>{t(...b)}</p>)}
                <div className="chiprow" style={{ marginTop: 24 }}>
                  {p.chips.map((c, j) => <span key={j} className="chip">{t(...c)}</span>)}
                </div>
              </div>
              <div className="grid" style={{ order: i % 2 ? 1 : 2, gap: 16 }}>
                <Plate id={p.id + '-a'} ar="ar-32" tone={p.tone} label={t(...p.name)}/>
                <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <Plate id={p.id + '-b'} ar="ar-11" tone={p.tone} label={t('Photo', '照片')}/>
                  <Plate id={p.id + '-c'} ar="ar-11" tone={p.tone} label={t('Photo', '照片')}/>
                </div>
              </div>
            </div>
          </div>
        </section>
      ))}
      <section className="sec band-sun">
        <div className="wrap">
          <div style={{ textAlign: 'center', maxWidth: '44ch', margin: '0 auto 40px' }}>
            <h2 className="d2">{t('What a week includes', '一周里都有什么')}</h2>
            <p className="lead" style={{ marginTop: 14 }}>{t('Every group meets the same eight strands, pitched to their age.', '八个板块每个班都有，只是按年龄调整深浅。')}</p>
          </div>
          <div className="grid g4">
            {CURRICULUM.map(([ic, label, tone]) => (
              <div key={label[0]} className="card card-lift" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 20px' }}>
                <span style={{ color: `var(--${tone}-ink)`, flex: 'none' }}><SIcon name={ic} size={24}/></span>
                <b style={{ fontFamily: 'var(--font-disp)', fontSize: 17 }}>{t(...label)}</b>
              </div>
            ))}
          </div>
        </div>
      </section>
      <MartialArts/>
      <VisitBand/>
    </>
  );
}

const SIGNATURE = [
  ['run', 'primary', ['Sports & PE class', '运动课程'],
    ['A daily movement class with a professional fitness focus: running tracks, ball games, balance work and a martial arts session led by a 5th-degree master.', '每天都有专门的运动课，专业的体能训练思路：跑道、球类、平衡练习，还有五段武术教练带的武术课。'],
    [['Daily', '每天一节'], ['Martial arts', '武术'], ['Ball & balance', '球类与平衡']]],
  ['music', 'sun', ['Music class', '音乐课程'],
    ['Singing, rhythm games and simple percussion. Our teaching equipment includes a grand piano and a smart piano, giving children hands-on ways to explore sound.', '唱歌、节奏游戏和简单的打击乐。教学设备包括一台三角钢琴和一台智能钢琴，让孩子用真实、丰富的方式探索声音。'],
    [['Daily', '每天一节'], ['Rhythm & song', '节奏与歌唱'], ['Piano', '钢琴']]],
  ['pencil', 'sage', ['Story class', '故事课程'],
    ['Pre-writing for the little ones and real pencil work for the older group: letter shapes, name writing, and telling a story before writing it down.', '小班从握笔和涂画开始，大班开始真正动笔：字母的字形、写自己的名字，先把故事讲出来再写下来。'],
    [['Daily', '每天一节'], ['Letters & characters', '字母'], ['Kindergarten ready', '为小学做准备']]],
];

function AdvantagePage() {
  const t = useT();
  const items = [
    ['shield', 'sage', ['State-licensed home', '持照家庭托育'], ['A licensed family childcare home (%s) with current CPR and First Aid certifications.', '加州持照家庭托育园（执照 #376300341），老师持有有效的 CPR 与急救证书。', LICENSE]],
    ['users', 'sky', ['Three experienced teachers', '三位资深老师'], ['A dedicated team, a typical 1:4 ratio, and a promise that every child is genuinely known.', '固定的三人团队，师生比通常 1:4，保证每个孩子都被真正认识。']],
    ['calendar', 'sun', ['Flexible care options', '灵活的托育方式'], ['Full-time, part-time and drop-in care — half days and full days, priced by the month.', '全天、半天、临时托育都可以，按月收费。']],
    ['heart', 'berry', ['3 months to 5 years', '3 个月到 5 岁'], ['One home from the first wobbly steps to the year before kindergarten.', '从摇摇晃晃学走路，到上小学前的最后一年，都在同一个家里。']],
    ['bowl', 'primary', ['Homemade meals', '家里做的饭'], ['Breakfast, lunch and three snacks cooked here, with about 50% organic ingredients.', '早餐、午餐、三次点心都在家现做，约 50% 使用有机食材。']],
    ['sun', 'sun', ['Bright house, big yard', '明亮的房子，大院子'], ['A clean, spacious house and a large colourful yard for outdoor play every day.', '干净宽敞的房子，加上一个色彩缤纷的大院子，每天都能户外活动。']],
    ['chat', 'sky', ['Daily parent updates', '每天和家长同步'], ['Texts and photos through the day, so you never wonder how it’s going.', '一天里随时用短信和照片更新，让您不用猜孩子好不好。']],
    ['pin', 'sage', ['Easy to reach', '位置方便'], ['In Escondido 92026, close to North Broadway School.', '位于埃斯孔迪多 92026，靠近 North Broadway 学校。']],
  ];
  return (
    <>
      <PageHead eyebrow={t('Why families choose us', '家长为什么选择我们')} title={t('Small home. Serious care.', '小小的家，认真的照顾')}
        lead={t('The advantages parents mention most often on their first tour — and the reasons they stay.', '家长第一次参观时最常提到的优点，也是他们留下来的原因。')}/>
      <section className="sec band-sky">
        <div className="wrap">
          <div style={{ maxWidth: '48ch', marginBottom: 'clamp(26px,3vw,40px)' }}>
            <Eyebrow>{t('Signature classes', '特色课程')}</Eyebrow>
            <h2 className="d2 signature-title" style={{ marginTop: 14, whiteSpace: 'nowrap', maxWidth: 'none' }}>{t('Sport, music and writing — properly taught', '运动、音乐、写作，都是认真在教')}</h2>
            <p className="lead" style={{ marginTop: 14 }}>{t('Three classes run every day alongside ordinary play — the part of our day parents tell us they cannot find elsewhere.', '除了日常玩耍，每天还有三门固定的课。家长常说，这是别处找不到的部分。')}</p>
          </div>
          <div className="grid g3">
            {SIGNATURE.map(([ic, tone, title, body, chips]) => (
              <div key={title[0]} className="card card-lift" style={{ display: 'grid', gap: 14, alignContent: 'start' }}>
                <span className="tile" style={{ background: `var(--${tone}-soft)`, color: `var(--${tone}-ink)` }}><SIcon name={ic} size={26}/></span>
                <h3 className="d4">{t(...title)}</h3>
                <p className="small muted">{t(...body)}</p>
                <div className="chiprow">{chips.map((c, j) => <span key={j} className={`chip chip-${tone}`}>{t(...c)}</span>)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="sec">
        <div className="wrap grid g4">
          {items.map(([ic, tone, title, body]) => <FactCard key={title[0]} icon={ic} tone={tone} title={t(...title)} body={t(...body)}/>)}
        </div>
      </section>
      <MartialArts compact/>
      <section className="sec">
        <div className="wrap card" style={{ padding: 'clamp(28px,4vw,56px)', display: 'grid', gap: 26 }}>
          <Eyebrow>{t('Parents are partners', '家长是我们的伙伴')}</Eyebrow>
          <p className="quote" style={{ maxWidth: '30ch' }}>{t('Parents are invited to visit with their children — weekdays after 6 PM, and all day at weekends.', '欢迎家长带着孩子来看看——工作日晚 6 点后，周末全天。')}</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a className="btn btn-primary" href={purl('/tour')}>{t('Book a tour', '预约参观')}</a>
            <a className="btn btn-ghost nums" href={PHONE_TEL}><SIcon name="phone" size={19}/>{PHONE}</a>
          </div>
        </div>
      </section>
      <VisitBand/>
    </>
  );
}

Object.assign(window, { PROGRAMS, CURRICULUM, MartialArts, ProgramsPage, AdvantagePage });