// Shared chrome: Nav, Footer, common bits

const navigateTo = (path) => {
  if (typeof path !== 'string') return;
  const next = path.startsWith('#') ? path : '#' + path;
  if (window.location.hash !== next) window.location.hash = next;
  window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
};
window.navigateTo = navigateTo;

const PBLogo = ({ size = 32 }) => {
  const t = useT();
  return (
    <div className="pb-logo" onClick={() => navigateTo('/')} style={{ cursor: 'pointer' }}>
      <div className="pb-logo-mark" style={{ width: size, height: size, fontSize: size * 0.5 }}>
        <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 24 24" fill="none">
          {/* bridge mark */}
          <path d="M3 18 L21 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
          <path d="M5 18 L5 12 Q12 6 19 12 L19 18" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>
          <circle cx="12" cy="9.5" r="1.2" fill="currentColor"/>
        </svg>
      </div>
      <div className="pb-col" style={{ gap: 0, lineHeight: 1.1 }}>
        <span style={{ fontFamily: 'var(--pb-serif)', fontWeight: 600, fontSize: 18, letterSpacing: '0.01em' }}>{t.brand.name}</span>
        <span style={{ fontFamily: 'var(--pb-sans)', fontSize: 9.5, color: 'var(--pb-fg-muted)', letterSpacing: '0.18em', fontWeight: 600 }}>{t.brand.en}</span>
      </div>
    </div>
  );
};

const PBNav = ({ active = 'home' }) => {
  const t = useT();
  const items = [
    { id: 'home', label: t.nav.home, path: '/' },
    { id: 'gaokao', label: t.nav.gaokao, path: '/gaokao' },
    { id: 'studyAbroad', label: t.nav.studyAbroad, path: '/eval' },
    { id: 'services', label: t.nav.services, path: '/services' },
    { id: 'cases', label: t.nav.cases, path: '/cases' },
    { id: 'advisors', label: t.nav.advisors, path: '/advisors' },
  ];
  return (
    <>
      <div style={{ background: 'var(--pb-navy-900)', color: 'var(--pb-gold-500)', padding: '8px 56px', fontFamily: 'var(--pb-mono)', fontSize: 11, letterSpacing: '0.18em', display: 'flex', justifyContent: 'space-between', textTransform: 'uppercase' }}>
          <span>EST. MMXVIII · BEIJING</span>
          <span style={{ opacity: 0.7 }}>· · ·</span>
          <span>+86 400-823-7788</span>
      </div>
      <nav className="pb-nav">
        <PBLogo />
        <div className="pb-nav-links">
          {items.map(it => (
            <span
              key={it.id}
              className={`pb-nav-link ${active === it.id ? 'active' : ''}`}
              onClick={() => navigateTo(it.path)}
              style={{ cursor: 'pointer' }}
            >{it.label}</span>
          ))}
        </div>
        <div className="pb-nav-actions">
          <span
            className="pb-btn pb-btn-link pb-btn-sm"
            onClick={() => navigateTo('/dashboard')}
            style={{ cursor: 'pointer' }}
          >{t.cta.login}</span>
          <button
            className="pb-btn pb-btn-primary pb-btn-sm"
            onClick={() => navigateTo('/booking')}
          >{t.cta.book}</button>
        </div>
      </nav>
    </>
  );
};

const PBFooter = () => {
  const t = useT();
  const lang = useLang();
  return (
    <footer className="pb-footer">
      <div style={{ maxWidth: 1280, margin: '0 auto 56px', textAlign: 'center', borderBottom: '1px solid rgba(201,169,104,0.2)', paddingBottom: 48 }}>
        <div style={{ fontFamily: 'var(--pb-serif)', fontStyle: 'italic', fontSize: 32, color: 'var(--pb-gold-500)', marginBottom: 12 }}>
          {lang === 'zh' ? '启桥 · PathBridge' : 'PathBridge · 启桥'}
        </div>
        <div style={{ fontFamily: 'var(--pb-mono)', fontSize: 10, letterSpacing: '0.32em', color: 'rgba(244,236,218,0.5)', textTransform: 'uppercase' }}>
          {lang === 'zh' ? '一座桥 · 一程路 · 一种确定' : 'A Bridge · A Path · A Certainty'}
        </div>
      </div>
      <div className="pb-footer-grid">
        <div>
          <div style={{ fontFamily: 'var(--pb-serif)', fontSize: 20, fontWeight: 500, fontStyle: 'italic', color: 'var(--pb-gold-500)', marginBottom: 14 }}>
            {lang === 'zh' ? '关于启桥' : 'About'}
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.75, opacity: 0.72, maxWidth: 320, fontFamily: 'var(--pb-serif)', fontStyle: 'italic' }}>
            {lang === 'zh'
              ? '一座连接中国高考与全球高等教育的桥。以数据为基，以陪伴为本。'
              : 'A bridge from China\'s Gaokao to global higher education. Data-led. Counselor-grown.'}
          </p>
        </div>
        <div>
          <h4>{lang === 'zh' ? '产品' : 'Product'}</h4>
          <ul>
            <li onClick={() => navigateTo('/gaokao')}>{t.nav.gaokao}</li>
            <li onClick={() => navigateTo('/eval')}>{t.nav.studyAbroad}</li>
            <li onClick={() => navigateTo('/report')}>{lang === 'zh' ? 'AI 选校报告' : 'AI school match'}</li>
            <li>{lang === 'zh' ? 'VIP 数据库' : 'VIP database'}</li>
          </ul>
        </div>
        <div>
          <h4>{lang === 'zh' ? '服务' : 'Services'}</h4>
          <ul>
            <li onClick={() => navigateTo('/services')}>{lang === 'zh' ? '高考志愿规划' : 'Gaokao planning'}</li>
            <li onClick={() => navigateTo('/services')}>{lang === 'zh' ? '本科留学申请' : 'Undergrad abroad'}</li>
            <li onClick={() => navigateTo('/services')}>{lang === 'zh' ? '研究生留学申请' : 'Grad abroad'}</li>
            <li onClick={() => navigateTo('/services')}>{lang === 'zh' ? '保录协议' : 'Guaranteed admission'}</li>
          </ul>
        </div>
        <div>
          <h4>{lang === 'zh' ? '公司' : 'Company'}</h4>
          <ul>
            <li>{lang === 'zh' ? '关于我们' : 'About'}</li>
            <li onClick={() => navigateTo('/advisors')}>{t.nav.advisors}</li>
            <li onClick={() => navigateTo('/cases')}>{t.nav.cases}</li>
            <li>{lang === 'zh' ? '加入我们' : 'Careers'}</li>
          </ul>
        </div>
        <div>
          <h4>{lang === 'zh' ? '联系' : 'Contact'}</h4>
          <ul>
            <li>hello@pathbridge.cn</li>
            <li>+86 400-823-7788</li>
            <li>{lang === 'zh' ? '北京 · 上海 · 深圳' : 'Beijing · Shanghai · Shenzhen'}</li>
            <li>{lang === 'zh' ? '微信：QiqiaoEdu' : 'WeChat: QiqiaoEdu'}</li>
          </ul>
        </div>
      </div>
      <div className="pb-footer-bottom">
        <span>© 2018–2026 PathBridge Education · {lang === 'zh' ? '京ICP备 18029384 号' : 'All rights reserved'}</span>
        <span>{lang === 'zh' ? '隐私政策 · 用户协议' : 'Privacy · Terms'}</span>
      </div>
    </footer>
  );
};

Object.assign(window, { PBLogo, PBNav, PBFooter, navigateTo });