/* global React */
function Footer() {
  const t = window.theme;
  const col = (title, links) => (
    <div>
      <div style={{
        fontFamily: t.fontDisplay, fontSize: 11, fontWeight: 700,
        color: t.mediumGray, letterSpacing: '0.12em', textTransform: 'uppercase',
        marginBottom: 14,
      }}>{title}</div>
      {links.map((l, i) => {
        const label = typeof l === 'string' ? l : l.label;
        const href = typeof l === 'string' ? '#' : l.href;
        const ext = typeof l === 'object' && l.external;
        return (
          <a key={i} href={href}
            {...(ext ? { target: '_blank', rel: 'noopener' } : {})}
            style={{
              display: 'block', fontFamily: t.fontBody, fontSize: 13,
              color: '#B8B8C8', textDecoration: 'none', padding: '5px 0',
            }}>{label}</a>
        );
      })}
    </div>
  );
  return (
    <footer style={{
      background: '#08080F', color: '#F5F5FA', padding: '56px 40px 28px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, marginBottom: 40 }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <img src="assets/keycap.png" alt="" style={{
                height: 36,
                filter: 'drop-shadow(0 0 12px rgba(155,127,255,0.4))',
              }} />
              <span style={{
                fontFamily: t.fontDisplay, fontWeight: 700, fontSize: 22,
                letterSpacing: '-0.02em', color: '#fff', lineHeight: 1,
              }}>
                Zing<span style={{ color: t.deepBlue }}>IME</span>
              </span>
            </div>
            <p style={{
              fontFamily: t.fontBody, fontSize: 13, lineHeight: 1.65,
              color: '#8080A0', maxWidth: 280, margin: '20px 0 0',
            }}>為 macOS 注音用戶打造的新世代輸入法。<br />在 Taipei 設計，用心做給你。</p>
          </div>
          {col('產品', [
            { label: '功能', href: '#features' },
            { label: '下載', href: '#download' },
            '更新日誌',
            '系統需求',
          ])}
          {col('支援', [
            { label: '使用手冊', href: '/docs' },
            { label: 'Q&A', href: '#qa' },
            { label: '聯絡我們', href: 'mailto:hello@zingime.com', external: true },
            { label: '回報問題', href: 'mailto:hello@zingime.com', external: true },
          ])}
          {col('公司', [
            { label: '關於我們', href: '/about.html' },
          ])}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.06)',
          fontFamily: t.fontBody, fontSize: 12, color: t.mediumGray,
          flexWrap: 'wrap', gap: 16,
        }}>
          <div>© 2026 ZingIME Studio</div>
          <div style={{ display: 'flex', gap: 22 }}>
            <a href="/docs/privacy" style={{ color: t.mediumGray, textDecoration: 'none' }}>隱私政策</a>
            <a href="/coming-soon.html" style={{ color: t.mediumGray, textDecoration: 'none' }}>服務條款</a>
            <a href="/coming-soon.html" style={{ color: t.mediumGray, textDecoration: 'none' }}>退款政策</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;