// pages-home.jsx
function Reviews() {
  const t = useT();
  const items = [
    ['Nikki J.', '10/30/24', 'sun', ['My kids LOVE Seven Little Bears. The staff feels like family — my kids come home happy, well fed, and learning so much.', '我的孩子太喜欢七只小熊了。老师就像家人一样——孩子回家时是开心的、吃得饱饱的，还学到很多东西。']],
    ['Paula S.', '4/12/24', 'sage', ['My twins attended and Miss Xia Gu consistently went above and beyond to help them develop emotionally and socially. The backyard is vast.', '我的双胞胎在这里上学，谷老师一直不厌其烦地帮他们在情绪和社交上成长。院子非常大。']],
    ['Janice B.', '11/28/23', 'sky', ['This daycare is heaven sent for us as working parents. Xia was kind enough to take our daughter and is very flexible with the schedule.', '对我们这样的双职工父母来说，这家托育园简直是天赐的。谷老师愿意接收我们的女儿，时间上也很灵活。']],
    ['Stephanie S.', '9/4/23', 'berry', ['I always got so many pictures of her day and an update on how it was going. They put a lot of care into a fun, nurturing place.', '我每天都会收到很多她的照片和当天情况的更新。他们真的很用心，把这里做成一个有趣又温暖的地方。']],
  ];
  return (
    <section className="sec band-hearts">
      <div className="wrap">
        <div style={{ maxWidth: '46ch', marginBottom: 'clamp(26px,3vw,40px)' }}>
          <Eyebrow>{t('Parents trust us', '家长的信任')}</Eyebrow>
          <h2 className="d2" style={{ margin: '14px 0 16px' }}>{t('Here’s what families say', '听听家长们怎么说')}</h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <span style={{ display: 'flex', gap: 3, color: 'var(--sun-ink)' }}>{[0, 1, 2, 3, 4].map(i => <SIcon key={i} name="star" size={20}/>)}</span>
            <b className="small nums" style={{ fontFamily: 'var(--font-disp)', fontSize: 16 }}>{t('5.0 on Yelp', 'Yelp 上 5.0 分')}</b>
          </div>
        </div>
        <div className="grid g2" style={{ alignItems: 'start' }}>
          {items.map(([name, date, tone, quote]) => (
            <figure key={name} className="card" style={{ margin: 0, display: 'grid', gap: 16 }}>
              <span className="tile" style={{ width: 40, height: 40, borderRadius: 14, background: `var(--${tone}-soft)`, color: `var(--${tone}-ink)` }}><SIcon name="chat" size={20}/></span>
              <blockquote style={{ margin: 0, fontFamily: 'var(--font-disp)', fontSize: 'clamp(17px,1.5vw,20px)', lineHeight: 1.55, textWrap: 'pretty' }}>{t(...quote)}</blockquote>
              <figcaption className="small muted" style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <b style={{ color: 'var(--ink)' }}>{name}</b>
                <span className="nums" style={{ color: 'var(--ink-3)' }}>{date}</span>
                <span className={`chip chip-${tone}`} style={{ padding: '3px 10px', fontSize: 12.5 }}>{t('Yelp review', 'Yelp 评价')}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  const t = useT();
  const P = window.PROGRAMS;
  return (
    <>
      <section style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(46px,5.5vw,88px) 0 clamp(54px,6vw,96px)' }}>
        <div className="blob" style={{ width: 420, height: 420, background: 'var(--sun-soft)', top: -140, right: -90, opacity: .8 }}></div>
        <div className="blob" style={{ width: 260, height: 260, background: 'var(--sage-soft)', bottom: -120, left: -80, opacity: .7 }}></div>
        <div className="wrap split" style={{ position: 'relative' }}>
          <div>
            <div className="chiprow" style={{ marginBottom: 24 }}>
              <span className="chip chip-sage"><SIcon name="shield" size={17}/>{t('State-licensed · %s', '加州持照 · #376300341', LICENSE)}</span>
              <span className="chip chip-sun"><SIcon name="users" size={17}/>{t('Typical 1:4 ratio', '师生比约 1:4')}</span>
            </div>
            <h1 className="d1">{t('Every child is a little seed.', '每个孩子都是一颗小种子')}</h1>
            <p className="lead" style={{ margin: '22px 0 14px', maxWidth: '46ch' }}>
              {t('A family childcare home in sunny Escondido, San Diego, where play, learning and movement come together — and little ones grow into strong, beautiful trees.',
                '我们是圣地亚哥埃斯孔迪多阳光下的一间家庭托育园。在这里，游戏、学习与运动融在一起，小种子长成挺拔好看的树。')}
            </p>
            <p className="small muted" style={{ marginBottom: 30 }}>{t('— Xia Gu, teacher & founder', '—— 谷老师，创办人')}</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href={purl('/tour')}><SIcon name="calendar" size={19}/>{t('Book a tour', '预约参观')}</a>
              <a className="btn btn-ghost nums" href={PHONE_TEL}><SIcon name="phone" size={19}/>{PHONE}</a>
            </div>
            <div className="statrow">
              <div className="stat"><b>{t('3 mo–5 yr', '3个月–5岁')}</b><span>{t('Ages welcomed', '招收年龄')}</span></div>
              <div className="stat"><b>7:00–5:30</b><span>{t('Mon – Fri', '周一至周五')}</span></div>
              <div className="stat"><b>{t('Since 2021', '2021 年至今')}</b><span>{t('Family owned', '家庭经营')}</span></div>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Plate id="hero-main" ar="ar-45" src="../uploads/hero-main.jpg" label={t('Hero photo — children playing', '主图 — 孩子们在玩')}/>
            <div style={{ position: 'absolute', left: '-8%', bottom: '-7%', width: '46%' }}>
              <Plate id="hero-inset" ar="ar-11" radius={20} tone="sun" src="../uploads/IMG_7215.jpg" label={t('Small photo', '小照片')}/>
            </div>
            <div style={{ position: 'absolute', right: -14, top: -14, background: 'var(--surface)', borderRadius: 999, padding: '10px 16px', boxShadow: 'var(--sh)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <Dots7/><b className="small" style={{ fontFamily: 'var(--font-disp)', whiteSpace: 'nowrap' }}>{t('Seven bears', '七只小熊')}</b>
            </div>
          </div>
        </div>
      </section>

      <section className="sec-tight band-surface">
        <div className="wrap grid g4">
          <FactCard icon="heart" tone="primary" title={t('Nurtured, not minded', '是养育，不是看管')} body={t('Three experienced teachers, small groups, and daily texts and photos so you always know how the day went.', '三位资深老师、小班制，每天用短信和照片告诉您孩子这一天过得怎么样。')}/>
          <FactCard icon="run" tone="sage" title={t('Movement first', '把运动放在前面')} body={t('A professional physical-fitness focus: strong bodies build the confidence everything else rests on.', '专业的体能课程：结实的身体，是其他一切自信的基础。')}/>
          <FactCard icon="bowl" tone="sun" title={t('Home cooking', '家里做的饭')} body={t('Breakfast, lunch and three snacks made here, with roughly 50% organic ingredients.', '早餐、午餐、三次点心都在家现做，约一半是有机食材。')}/>
          <FactCard icon="shield" tone="sky" title={t('Safe by design', '安全是设计出来的')} body={t('Foam-cushioned floors, secured entry, CPR and First Aid certified staff, daily health checks.', '泡沫软垫地面、门禁管理、持证急救老师，每天做健康检查。')}/>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 38 }}>
            <div>
              <Eyebrow>{t('Programs', '班级课程')}</Eyebrow>
              <h2 className="d2" style={{ marginTop: 16, maxWidth: 'none' }}>{t('Three age groups, each with its own rhythm', '三个年龄段，各有自己的节奏')}</h2>
            </div>
            <a className="btn btn-ghost btn-sm" href={purl('/programs')}>{t('All programs', '全部班级')}<SIcon name="arrow" size={18}/></a>
          </div>
          <div className="grid g3">
            {P.map(p => (
              <a key={p.id} className="card card-lift" href={purl('/programs')} style={{ color: 'var(--ink)', display: 'grid', gap: 0, padding: 0, overflow: 'hidden' }}>
                <Plate id={'home-' + p.id} ar="ar-32" radius="28px 28px 0 0" tone={p.tone} label={t(...p.name)}/>
                <div style={{ padding: 'clamp(20px,2.2vw,28px)' }}>
                  <span className={'chip chip-' + p.tone}><SIcon name={p.icon} size={17}/>{t(...p.age)}</span>
                  <h3 className="d3" style={{ margin: '14px 0 10px' }}>{t(...p.name)}</h3>
                  <p className="small muted">{t(...p.blurb)}</p>
                  <span className="small" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 16, color: 'var(--primary-ink)', fontWeight: 600, whiteSpace: 'nowrap' }}>{t('Read more', '了解更多')}<SIcon name="arrow" size={16}/></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="sec band-sage">
        <div className="wrap split">
          <div>
            <Eyebrow>{t('Our philosophy', '我们的理念')}</Eyebrow>
            <p className="quote" style={{ margin: '18px 0 22px' }}>{t('Play and physical activity are the ways children learn. So we build the day around them.', '游戏和运动就是孩子学习的方式，所以我们围着它们安排一天。')}</p>
            <p className="muted" style={{ maxWidth: '54ch', marginBottom: 26 }}>
              {t('Every child is naturally curious and creative. We give that curiosity a safe, nurturing place to run — with activities pitched to each child’s own level, interests and cultural background, and educators who play alongside rather than direct from the sidelines.',
                '每个孩子天生好奇、天生会创造。我们给这份好奇一个安全、被支持的地方去撒开跑——活动按孩子自己的水平、兴趣和文化背景来设计，老师陪着一起玩，而不是站在旁边指挥。')}
            </p>
            <a className="btn btn-white" href={purl('/about')}>{t('Meet the team', '认识老师')}<SIcon name="arrow" size={18}/></a>
          </div>
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Plate id="phil-1" ar="ar-11" tone="sage" label={t('Outdoor play', '户外活动')}/>
            <Plate id="phil-2" ar="ar-11" tone="sun" label={t('Art table', '美术桌')}/>
            <Plate id="phil-3" ar="ar-11" tone="sky" label={t('Story time', '故事时间')}/>
            <Plate id="phil-4" ar="ar-11" tone="berry" label={t('Circle time', '圆圈时间')}/>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap split">
          <div>
            <Eyebrow>{t('A day here', '这里的一天')}</Eyebrow>
            <h2 className="d2" style={{ margin: '16px 0 18px' }}>{t('The shape of an ordinary, happy day', '普通又快乐的一天，长这样')}</h2>
            <p className="muted" style={{ maxWidth: '48ch', marginBottom: 26 }}>{t('Predictable rhythm, plenty of movement, and a proper rest in the middle — with a text and a photo or two from us along the way.', '规律的节奏、足够的运动，中间有一场好好的午睡——过程中我们会发来一两条短信和照片。')}</p>
            <div className="chiprow">
              {window.CURRICULUM.map(([ic, label, tone]) => (
                <span key={label[0]} className={'chip chip-' + tone}><SIcon name={ic} size={18}/>{t(...label)}</span>
              ))}
            </div>
          </div>
          <div className="card">
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10, flexWrap: 'wrap' }}>
              <b className="d4">{t('Today at Seven Little Bears', '七只小熊的今天')}</b>
              <span className="chip chip-sage" style={{ padding: '5px 12px', fontSize: 13.5 }}><SIcon name="check" size={15}/>{t('Shared daily', '每天同步')}</span>
            </div>
            <div className="rowlist">
              {[
                ['sun', 'sun', ['Arrival', '入园'], ['7:00 AM onwards', '上午 7:00 起']],
                ['users', 'sage', ['Circle time', '圆圈时间'], ['Good mornings & high fives', '问早安、击个掌']],
                ['book', 'sky', ['Learning', '学习时间'], ['Stories, numbers, drawing', '故事、数字、绘画']],
                ['bowl', 'primary', ['Meals', '餐点'], ['Breakfast, lunch, 3 snacks', '早餐、午餐、三次点心']],
                ['run', 'berry', ['Yard & PE', '院子与体能'], ['Tracks, ride-ons, martial arts', '跑道、脚踏车、武术']],
                ['moon', 'sky', ['Nap', '午睡'], ['Own mat, quiet room', '各自的睡垫，安静的房间']],
                ['heart', 'primary', ['Home time', '回家'], ['Until 5:30 PM', '最晚下午 5:30']],
              ].map(([ic, tone, label, val]) => (
                <div key={label[0]}>
                  <span className="tile" style={{ width: 44, height: 44, borderRadius: 15, background: `var(--${tone}-soft)`, color: `var(--${tone}-ink)` }}><SIcon name={ic} size={21}/></span>
                  <b style={{ fontFamily: 'var(--font-disp)', fontSize: 17.5 }}>{t(...label)}</b>
                  <span className="small muted" style={{ textAlign: 'right' }}>{t(...val)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <MartialArts compact/>

      <section className="sec">
        <div className="wrap grid g3" style={{ alignItems: 'stretch' }}>
          <div className="card" style={{ background: 'var(--sky-soft)', boxShadow: 'none' }}>
            <SIcon name="chat" size={26} style={{ color: 'var(--sky-ink)' }}/>
            <h3 className="d3" style={{ margin: '14px 0 10px' }}>{t('Daily updates', '每日更新')}</h3>
            <p className="small muted">{t('Texts and photos through the day — the progress, the mess, the small victories.', '一天里的短信和照片——进步、混乱，还有小小的胜利。')}</p>
          </div>
          <div className="card" style={{ background: 'var(--sun-soft)', boxShadow: 'none' }}>
            <SIcon name="star" size={26} style={{ color: 'var(--sun-ink)' }}/>
            <h3 className="d3" style={{ margin: '14px 0 10px' }}>{t('Free childcare via MAAC', 'MAAC 免费托育')}</h3>
            <p className="small muted">{t('We partner with the MAAC Project — eligible families may qualify for free care. Ask us.', '我们与 MAAC Project 合作，符合条件的家庭可申请免费托育，欢迎咨询。')}</p>
          </div>
          <div className="card" style={{ background: 'var(--primary-soft)', boxShadow: 'none' }}>
            <SIcon name="clock" size={26} style={{ color: 'var(--primary-ink)' }}/>
            <h3 className="d3" style={{ margin: '14px 0 10px' }}>{t('Late pick-up? It’s fine.', '接晚了？没关系')}</h3>
            <p className="small muted">{t('Extended care is free — just let your child’s teacher know in advance.', '延时看护免费，只要提前告诉老师就好。')}</p>
          </div>
        </div>
      </section>

      <Reviews/>

      <VisitBand/>
    </>
  );
}
Object.assign(window, { HomePage });