// site-ui.jsx — shared chrome + primitives for the Seven Little Bears site
const ASSETS = '../site/';
const PHONE = '858-397-4659';
const PHONE_TEL = 'tel:+18583974659';
const ADDRESS_EN = '1952 N Ash St, Escondido, CA 92026';
const ADDRESS_ZH = '加利福尼亚州埃斯孔迪多市北阿什街 1952 号，邮编 92026';
const MAP_URL = 'https://maps.app.goo.gl/2vstGRhWcyBkvQqZ6';
const LICENSE = 'Lic #376300341';

const URLS = {
  '/': 'index.html', '/about': 'about-us.html', '/programs': 'programs.html',
  '/tuition': 'tuition.html', '/advantage': 'advantage.html', '/safety': 'safety-facilities.html',
  '/gallery': 'gallery.html', '/faqs': 'faqs.html', '/tour': 'book-a-tour.html',
};
const purl = (p) => URLS[p] || 'index.html';

const NAVITEMS = [
  ['/', 'Home', '首页'], ['/about', 'About Us', '关于我们'], ['/advantage', 'Why Us', '我们的优势'], ['/programs', 'Programs', '班级课程'],
  ['/tuition', 'Tuition', '学费'], ['/safety', 'Safety', '安全设施'],
  ['/gallery', 'Gallery', '照片'], ['/faqs', 'FAQs', '常见问题'],
];

function SIcon({ name, size = 22, stroke = 1.9, style = {} }) {
  const c = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', style };
  switch (name) {
    case 'phone': return <svg {...c}><path d="M5 4.5h3.5l1.5 4-2 1.5a10 10 0 0 0 5 5l1.5-2 4 1.5V19a1.5 1.5 0 0 1-1.6 1.5C10 20 4 14 3.5 6.1A1.5 1.5 0 0 1 5 4.5Z"/></svg>;
    case 'pin': return <svg {...c}><path d="M12 21s6-5.7 6-10.5A6 6 0 0 0 6 10.5C6 15.3 12 21 12 21Z"/><circle cx="12" cy="10.5" r="2.2"/></svg>;
    case 'clock': return <svg {...c}><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>;
    case 'shield': return <svg {...c}><path d="M12 3.5 19 6v5c0 4.5-3 7.7-7 9.5-4-1.8-7-5-7-9.5V6Z"/><path d="M9 11.7 11.2 14 15 9.7"/></svg>;
    case 'heart': return <svg {...c}><path d="M12 20S4 15 4 9.5A4 4 0 0 1 12 7a4 4 0 0 1 8 2.5C20 15 12 20 12 20Z"/></svg>;
    case 'sparkles': return <svg {...c}><path d="M12 3.5 13.7 9 19 10.7 13.7 12.5 12 18l-1.7-5.5L5 10.7 10.3 9z"/><path d="M18.5 4v3M20 5.5h-3"/></svg>;
    case 'check': return <svg {...c}><path d="M5 12.5 10 17 19 7"/></svg>;
    case 'check-circle': return <svg {...c}><circle cx="12" cy="12" r="8.5"/><path d="M8.5 12.2 11 14.7 15.7 9.5"/></svg>;
    case 'plus': return <svg {...c}><path d="M12 5v14M5 12h14"/></svg>;
    case 'arrow': return <svg {...c}><path d="M4 12h15M13 6l6 6-6 6"/></svg>;
    case 'menu': return <svg {...c}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case 'x': return <svg {...c}><path d="M6 6l12 12M18 6 6 18"/></svg>;
    case 'sun': return <svg {...c}><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2.5M12 19v2.5M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2.5 12H5M19 12h2.5M4.2 19.8 6 18M18 6l1.8-1.8"/></svg>;
    case 'moon': return <svg {...c}><path d="M20 13.5A7.5 7.5 0 1 1 10.5 4 6 6 0 0 0 20 13.5Z"/></svg>;
    case 'bowl': return <svg {...c}><path d="M3.5 11h17a8.5 8.5 0 0 1-17 0Z"/><path d="M12 11c0-2 1.6-2.4 1.6-4S12 4 12 4"/></svg>;
    case 'book': return <svg {...c}><path d="M12 6.5C10.5 5 8 4.5 5 5v13c3-.5 5.5 0 7 1.5 1.5-1.5 4-2 7-1.5V5c-3-.5-5.5 0-7 1.5Z"/><path d="M12 6.5v13"/></svg>;
    case 'palette': return <svg {...c}><path d="M12 3.5a8.5 8.5 0 0 0 0 17c1.4 0 2-1 2-2 0-1.4-1-1.6-1-3 0-1 .8-1.5 2-1.5h1.5A4 4 0 0 0 20.5 10C20.5 6 16.7 3.5 12 3.5Z"/><circle cx="8" cy="11" r="1.1" fill="currentColor" stroke="none"/><circle cx="12" cy="8" r="1.1" fill="currentColor" stroke="none"/><circle cx="16" cy="10" r="1.1" fill="currentColor" stroke="none"/></svg>;
    case 'ball': return <svg {...c}><circle cx="12" cy="12" r="8.5"/><path d="M12 3.5c3 2.5 3 14.5 0 17M12 3.5c-3 2.5-3 14.5 0 17M3.5 12h17"/></svg>;
    case 'music': return <svg {...c}><circle cx="7" cy="17.5" r="2.8"/><circle cx="17.5" cy="15" r="2.8"/><path d="M9.8 17.5V7l10.5-2.5V15"/></svg>;
    case 'leaf': return <svg {...c}><path d="M5 19C4 11 9 5 19 5c0 10-6 15-14 14Z"/><path d="M9 15c2-3 5-5 8-6"/></svg>;
    case 'users': return <svg {...c}><circle cx="9" cy="8.5" r="3"/><path d="M3.5 19c.6-2.8 2.7-4.4 5.5-4.4s4.9 1.6 5.5 4.4"/><path d="M16 6.2a3 3 0 0 1 0 5.6M17.5 19c-.3-1.8-1.1-3.1-2.3-4"/></svg>;
    case 'run': return <svg {...c}><circle cx="14.5" cy="4.8" r="2.1"/><path d="M13 8.5 9.5 11l1.5 3.5-2.5 5.5M11 14.5l4 1.5 1.5 4M13 8.5l4 2 2.5-1M9.5 11l-4.5.5"/></svg>;
    case 'pencil': return <svg {...c}><path d="M4.5 19.5l1-4L15.8 5.2a2 2 0 0 1 2.8 0l.2.2a2 2 0 0 1 0 2.8L8.5 18.5l-4 1Z"/><path d="M14.5 6.5l3 3"/></svg>;
    case 'star': return <svg {...c}><path d="m12 3.8 2.5 5.2 5.7.8-4.1 4 1 5.7-5.1-2.7-5.1 2.7 1-5.7-4.1-4 5.7-.8z"/></svg>;
    case 'spray': return <svg {...c}><path d="M9 8.5h5a2 2 0 0 1 2 2v9.5H7V10.5a2 2 0 0 1 2-2Z"/><path d="M9.5 8.5V5.5h4v3M18 5.5h.01M20.5 8h.01M18.5 10.5h.01"/></svg>;
    case 'lock': return <svg {...c}><rect x="5" y="10.5" width="14" height="9.5" rx="2.5"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/></svg>;
    case 'chat': return <svg {...c}><path d="M4.5 6.5A2.5 2.5 0 0 1 7 4h10a2.5 2.5 0 0 1 2.5 2.5v7A2.5 2.5 0 0 1 17 16H9l-4 3.5V16H7"/></svg>;
    case 'calendar': return <svg {...c}><rect x="4" y="5.5" width="16" height="15" rx="3"/><path d="M4 9.5h16M8.5 3.5v3.5M15.5 3.5v3.5"/></svg>;
    default: return <svg {...c}><circle cx="12" cy="12" r="8"/></svg>;
  }
}

function BearMark({ size = 44 }) {
  return <img src={ASSETS + 'logo.png'} width={size} height={size} alt="" style={{ flex: 'none', display: 'block', borderRadius: '50%' }}/>;
}

function Dots7() { return <div className="dot7">{[0,1,2,3,4,5,6].map(i => <i key={i}/>)}</div>; }

function Plate({ id, ar = 'ar-43', label, radius, className = '', style = {}, tone, src, fit }) {
  const bg = tone ? `var(--${tone}-soft)` : undefined;
  return (
    <div className={`plate ${ar} ${className}`} style={{ ...(bg ? { background: bg } : null), ...(radius ? { borderRadius: radius } : null), ...style }}>
      <image-slot id={id} shape="rect" placeholder={label || 'Drop a photo'} {...(src ? { src } : {})} {...(fit ? { fit } : {})}></image-slot>
    </div>
  );
}

function Eyebrow({ children }) { return <div className="eyebrow">{children}</div>; }

function Bullets({ items, tone = 'sage', icon = 'check-circle' }) {
  return (
    <ul className="ilist">
      {items.map((t, i) => (
        <li key={i}>
          <span className="ico" style={{ color: `var(--${tone}-ink)` }}><SIcon name={icon} size={21}/></span>
          <span>{typeof t === 'string' ? t : <><strong>{t[0]}</strong> {t[1]}</>}</span>
        </li>
      ))}
    </ul>
  );
}

function FactCard({ icon, tone, title, body }) {
  return (
    <div className="card card-lift">
      <div className="tile" style={{ background: `var(--${tone}-soft)`, color: `var(--${tone}-ink)`, marginBottom: 16 }}>
        <SIcon name={icon} size={24}/>
      </div>
      <h3 className="d4" style={{ marginBottom: 8 }}>{title}</h3>
      <p className="small muted">{body}</p>
    </div>
  );
}

function PageHead({ eyebrow, title, lead, children, titleMax = '18ch', leadMax = '58ch' }) {
  return (
    <header className="pagehead band-surface" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 className="d1" style={{ margin: '16px 0 0', maxWidth: titleMax }}>{title}</h1>
        {lead && <p className="lead" style={{ marginTop: 20, maxWidth: leadMax }}>{lead}</p>}
        {children}
      </div>
    </header>
  );
}

function Nav({ lang, setLang }) {
  const t = useT();
  const [open, setOpen] = React.useState(false);
  const here = window.PAGE || '/';
  const cur = (p) => (p === here ? 'page' : undefined);
  const links = NAVITEMS.map(([p, en, zh]) => <a key={p} className="navlink" href={purl(p)} aria-current={cur(p)}>{t(en, zh)}</a>);
  return (
    <nav className="nav">
      <div className="wrap nav-in">
        <a className="brand" href={purl('/')}>
          <BearMark size={48}/>
          <span className="brand-txt">
            <span className="brand-name">{t('Seven Little Bears', '七只小熊')}</span>
            <span className="brand-sub">{t('Family Childcare · Escondido', '家庭幼儿园 · 埃斯孔迪多')}</span>
          </span>
        </a>
        <div className="navlinks">{links}</div>
        <div className="nav-cta">
          <LangToggle lang={lang} setLang={setLang}/>
          <a className="btn btn-ghost btn-sm nums" href={PHONE_TEL}><SIcon name="phone" size={18}/>{PHONE}</a>
          <a className="btn btn-primary btn-sm" href={purl('/tour')}>{t('Book a Tour', '预约参观')}</a>
        </div>
        <button className="menu-btn" aria-label="Menu" onClick={() => setOpen(o => !o)}><SIcon name={open ? 'x' : 'menu'} size={24}/></button>
      </div>
      <div className={'drawer' + (open ? ' open' : '')}>
        <div className="wrap">
          {links}
          <div style={{ display: 'flex', gap: 10, marginTop: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <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={18}/>{PHONE}</a>
            <LangToggle lang={lang} setLang={setLang}/>
          </div>
        </div>
      </div>
    </nav>
  );
}

function VisitBand() {
  const t = useT();
  return (
    <section className="sec">
      <div className="wrap">
        <div className="panel panel-orange split">
          <div>
            <Eyebrow>{t('Welcome to visit', '欢迎来看看')}</Eyebrow>
            <h2 className="d2" style={{ margin: '16px 0 18px' }}>{t('Come meet us — the kettle’s always on.', '随时欢迎您和孩子来家里坐坐')}</h2>
            <p className="lead" style={{ marginBottom: 22 }}>
              {t('Visit on weekdays after 6 PM, or any time on weekends. Call or text ahead so we can give you our full attention — if we don’t pick up, we’re likely with the children.',
                '工作日晚 6 点后、周末任意时间都可以参观。请先打电话或发短信预约，我们才能专心陪您聊；如果没有马上接听，通常是正在照顾孩子。')}
            </p>
            <div className="chiprow" style={{ marginBottom: 26 }}>
              <span className="chip" style={{ background: 'rgba(255,255,255,.18)', color: '#fff' }}><SIcon name="clock" size={17}/>{t('Mon – Fri · 7:00 AM – 5:30 PM', '周一至周五 · 上午 7:00 – 下午 5:30')}</span>
              <span className="chip" style={{ background: 'rgba(255,255,255,.18)', color: '#fff' }}><SIcon name="shield" size={17}/>{t(LICENSE, '执照 #376300341')}</span>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-white" href={purl('/tour')}><SIcon name="calendar" size={19}/>{t('Book a tour', '预约参观')}</a>
              <a className="btn nums" href={PHONE_TEL} style={{ background: 'rgba(255,255,255,.16)', color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,.4)' }}><SIcon name="phone" size={19}/>{PHONE}</a>
            </div>
          </div>
          <div>
            <Plate id="visit-photo" ar="ar-43" src="../uploads/bj.jpg" label={t('Daycare classroom', '托育教室')}/>
            <a className="card" href={MAP_URL} target="_blank" rel="noreferrer" style={{ display: 'grid', gridTemplateColumns: '26px 1fr', gap: 14, marginTop: 18, color: 'var(--ink)' }}>
              <span style={{ color: 'var(--primary-ink)', marginTop: 3 }}><SIcon name="pin" size={22}/></span>
              <span>
                <b style={{ fontFamily: 'var(--font-disp)', fontSize: 17.5 }}>{t(ADDRESS_EN, ADDRESS_ZH)}</b>
                <span className="small" style={{ display: 'block', color: 'var(--ink-2)' }}>{t('加利福尼亚州埃斯孔迪多市北阿什街1952号 · Open in Google Maps', '1952 N Ash St, Escondido, CA 92026 · 在 Google 地图打开')}</span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang, setLang }) {
  const t = useT();
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="grid g4" style={{ alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <BearMark size={40}/>
              <b style={{ fontFamily: 'var(--font-disp)', fontSize: 19 }}>{t('Seven Little Bears', '七只小熊')}</b>
            </div>
            <p className="small" style={{ color: '#C4B6A6', maxWidth: '30ch' }}>
              {t('A licensed family childcare home in sunny Escondido, San Diego — where play, learning and movement grow together.',
                '位于圣地亚哥埃斯孔迪多的持照家庭幼儿园——游戏、学习与运动一起长大。')}
            </p>
            <div style={{ marginTop: 18 }}><Dots7/></div>
            {setLang && <div style={{ marginTop: 18 }}><LangToggle lang={lang} setLang={setLang} dark/></div>}
          </div>
          <div>
            <b className="small" style={{ letterSpacing: '.1em', textTransform: 'uppercase', color: '#A2948A' }}>{t('Visit', '了解我们')}</b>
            <div style={{ display: 'grid', gap: 8, marginTop: 12 }} className="small">
              {NAVITEMS.slice(1, 5).map(([p, en, zh]) => <a key={p} href={purl(p)}>{t(en, zh)}</a>)}
            </div>
          </div>
          <div>
            <b className="small" style={{ letterSpacing: '.1em', textTransform: 'uppercase', color: '#A2948A' }}>{t('More', '更多')}</b>
            <div style={{ display: 'grid', gap: 8, marginTop: 12 }} className="small">
              {NAVITEMS.slice(5).map(([p, en, zh]) => <a key={p} href={purl(p)}>{t(en, zh)}</a>)}
              <a href={purl('/tour')}>{t('Book a Tour', '预约参观')}</a>
            </div>
          </div>
          <div>
            <b className="small" style={{ letterSpacing: '.1em', textTransform: 'uppercase', color: '#A2948A' }}>{t('Contact', '联系方式')}</b>
            <div style={{ display: 'grid', gap: 8, marginTop: 12 }} className="small">
              <a className="nums" href={PHONE_TEL}>{PHONE}</a>
              <a href={MAP_URL} target="_blank" rel="noreferrer">{t(ADDRESS_EN, ADDRESS_ZH)}</a>
              <span style={{ color: '#C4B6A6' }}>{t('Mon – Fri · 7:00 AM – 5:30 PM', '周一至周五 · 上午 7:00 – 下午 5:30')}</span>
              <span style={{ color: '#C4B6A6' }}>{t(LICENSE, '执照 #376300341')}</span>
              <span style={{ color: '#A2948A', marginTop: 4 }}>{t('Serving Escondido 92026 · 92027 · San Marcos · Valley Center · Hidden Meadows · North County San Diego', '服务范围：埃斯孔迪多 92026 · 92027 · 圣马科斯 · Valley Center · Hidden Meadows · 圣地亚哥北郡')}</span>
            </div>
          </div>
        </div>
        <hr className="rule" style={{ margin: '34px 0 18px' }}/>
        <div className="small" style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', color: '#A2948A' }}>
          <span>© 2026 Seven Little Bears Family Daycare</span>
          <span>{t('CPR & First Aid certified · MAAC Project partner', '持有 CPR 与急救证书 · MAAC 合作机构')}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ASSETS, URLS, purl, PHONE, PHONE_TEL, ADDRESS_EN, ADDRESS_ZH, MAP_URL, LICENSE, NAVITEMS, SIcon, BearMark, Dots7, Plate, Eyebrow, Bullets, FactCard, PageHead, Nav, VisitBand, Footer });