// Shared UI: Nav, Footer

const Nav = ({ page, setPage, lang, setLang }) => {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="brand" onClick={() => setPage('home')} style={{ cursor: 'pointer' }}>
          <Logo size={28} />
          <span>Manogauge</span>
          <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--ink-3)', marginLeft: 4, letterSpacing: '0.08em' }}>{t('brand.tagline', lang)}</span>
        </div>
        <div className="nav-links">
          {[
            { id: 'home', label: t('nav.home', lang) },
            { id: 'products', label: t('nav.products', lang) },
            { id: 'industries', label: t('nav.industries', lang) },
            { id: 'insights', label: t('nav.insights', lang) },
            { id: 'about', label: t('nav.about', lang) },
          ].map(item => (
            <a key={item.id}
              className={`nav-link ${page === item.id ? 'active' : ''}`}
              onClick={() => setPage(item.id)}>
              {item.label}
            </a>
          ))}
        </div>
        <div className="nav-meta">
          <span className="dot">● </span>
          <span>{t('nav.shipping', lang)}</span>
        </div>
        <div className="nav-actions">
          <div className="lang-switch" style={{ display: 'flex', gap: 1, padding: 2, border: '1px solid var(--line)', borderRadius: 'var(--radius)', background: 'var(--bg-sunken)', marginRight: 4 }}>
            <button onClick={() => setLang('en')}
              style={{ padding: '4px 8px', fontSize: 11, fontFamily: 'JetBrains Mono', borderRadius: 'var(--radius-sm)', background: lang === 'en' ? 'var(--ink)' : 'transparent', color: lang === 'en' ? 'var(--bg)' : 'var(--ink-2)', cursor: 'pointer' }}>EN</button>
            <button onClick={() => setLang('zh')}
              style={{ padding: '4px 8px', fontSize: 11, fontFamily: 'JetBrains Mono', borderRadius: 'var(--radius-sm)', background: lang === 'zh' ? 'var(--ink)' : 'transparent', color: lang === 'zh' ? 'var(--bg)' : 'var(--ink-2)', cursor: 'pointer' }}>中</button>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => setPage('products')}>{t('nav.catalog', lang)}</button>
          <button className="btn btn-accent btn-sm" onClick={() => setPage('rfq')}>
            {t('nav.getQuote', lang)} <Arrow size={12} />
          </button>
        </div>
      </div>
    </nav>
  );
};

const Footer = ({ setPage, lang }) => {
  const navTo = (e, target) => { e.preventDefault(); setPage(target); };
  const navToSection = (e, target, anchor) => {
    e.preventDefault();
    setPage(target);
    setTimeout(() => {
      const el = document.getElementById(anchor);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 120);
  };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <Logo size={28} />
              <span style={{ fontWeight: 600, fontSize: 16 }}>Manogauge</span>
            </div>
            <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: '32ch' }}>
              {t('foot.about', lang)}
            </p>
            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 6, fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--ink-3)', lineHeight: 1.5 }}>
              <div style={{ maxWidth: '38ch' }}>{t('foot.address', lang)}</div>
              <a href="mailto:sales@manogauge.com" style={{ color: 'var(--ink-3)', textDecoration: 'none' }}>SALES@MANOGAUGE.COM</a>
            </div>
          </div>
          <div className="footer-col">
            <h5>{t('foot.products', lang)}</h5>
            <ul>
              {['p02', 'p04', 'p05', 'p06', 'p15'].map(id => (
                <li key={id}><a href="#" onClick={(e) => navTo(e, `product:${id}`)}>{pname(id, lang)}</a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h5>{t('foot.industries', lang)}</h5>
            <ul>
              {INDUSTRIES.slice(0, 5).map(ind => (
                <li key={ind.id}><a href="#" onClick={(e) => navTo(e, 'industries')}>{t(`ind.${ind.id}.l`, lang)}</a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h5>{t('foot.company', lang)}</h5>
            <ul>
              <li><a href="#" onClick={(e) => navTo(e, 'about')}>{t('nav.about', lang)}</a></li>
              <li><a href="#" onClick={(e) => navToSection(e, 'home', 'process')}>{lang === 'zh' ? '生产制造' : 'Manufacturing'}</a></li>
              <li><a href="#" onClick={(e) => navToSection(e, 'home', 'certs')}>{lang === 'zh' ? '资质认证' : 'Certifications'}</a></li>
              <li><a href="#" onClick={(e) => navTo(e, 'insights')}>{lang === 'zh' ? '新闻动态' : 'News'}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>{t('foot.support', lang)}</h5>
            <ul>
              <li><a href="#" onClick={(e) => navTo(e, 'rfq')}>{t('nav.rfq', lang)}</a></li>
              <li><a href="#" onClick={(e) => navTo(e, 'products')}>{lang === 'zh' ? '产品手册' : 'Datasheets'}</a></li>
              <li><a href="#" onClick={(e) => navTo(e, 'rfq')}>{lang === 'zh' ? '联系我们' : 'Contact'}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t('foot.copy', lang)}</span>
          <span>{t('foot.certs', lang)}</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Nav, Footer });