const Footer = ({ setRoute, lang }) => {
  const t = lang === 'zh' ? {
    tag: '法文「會說話的人」。為 macOS 設計。',
    product: '產品', pricing: '價格', download: '下載', changelog: '更新紀錄',
    legal: '法律', privacy: '隱私政策', terms: '服務條款', refund: '退款政策',
    contact: '聯絡', email: 'support@parleur.app',
    rights: '© 2026 Parleur · Made in Taiwan',
  } : lang === 'ja' ? {
    tag: 'フランス語で「話す人」。macOS のために。',
    product: 'プロダクト', pricing: '料金', download: 'ダウンロード', changelog: '更新履歴',
    legal: '法的情報', privacy: 'プライバシーポリシー', terms: '利用規約', refund: '返金ポリシー',
    contact: 'お問い合わせ', email: 'support@parleur.app',
    rights: '© 2026 Parleur · Made in Taiwan',
  } : {
    tag: 'French for "the one who speaks." Built for macOS.',
    product: 'Product', pricing: 'Pricing', download: 'Download', changelog: 'Changelog',
    legal: 'Legal', privacy: 'Privacy', terms: 'Terms', refund: 'Refund policy',
    contact: 'Contact', email: 'support@parleur.app',
    rights: '© 2026 Parleur · Made in Taiwan',
  };

  const go = r => e => { e.preventDefault(); setRoute(r); window.scrollTo({ top: 0 }); };

  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#/" onClick={go('/')} className="logo">
              <span className="logo-mark">P</span>
              <span>Parleur</span>
            </a>
            <p>{t.tag}</p>
          </div>
          <div className="footer-col">
            <h4>{t.product}</h4>
            <ul>
              <li><a href="#/pricing" onClick={go('/pricing')}>{t.pricing}</a></li>
              <li><a href={DOWNLOAD_URL}>{t.download}</a></li>
              <li><a href="#">{t.changelog}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>{t.legal}</h4>
            <ul>
              <li><a href="#/privacy" onClick={go('/privacy')}>{t.privacy}</a></li>
              <li><a href="#/terms" onClick={go('/terms')}>{t.terms}</a></li>
              <li><a href="#/refund" onClick={go('/refund')}>{t.refund}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>{t.contact}</h4>
            <ul>
              <li><a href="mailto:support@parleur.app">{t.email}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <span>{t.rights}</span>
          <span>parleur.app</span>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;