function Footer() {
  const isTR = window.__locale === 'tr';
  const legalSuffix = isTR ? '-tr.html' : '.html';
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <div className="brand" style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
              <img src="/assets/icons/atlas-mark-black-60.png" alt="Atlas" style={{ width: 28, height: 28 }} />
              ATLAS <span className="dim" style={{ fontSize: 11 }}>/ IST</span>
            </div>
            <p style={{ fontSize: 13, maxWidth: 320 }}>
              {t(
                "İstanbul'un 12 merkez ilçesindeki ~9.700 tarihî, kültürel ve doğal mekânı GPS ile keşfettiren bir gezgin uygulaması.",
                "A traveler's app that guides you through ~9,700 historical, cultural, and natural sites across Istanbul's 12 central districts via GPS."
              )}
            </p>
            <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.14em' }}>
              41.0082°N · 28.9784°E<br/>v1.0 · BUILD 21 · iOS 17+
            </div>
          </div>
          <div className="footer-col">
            <h4>{t('Uygulama', 'App')}</h4>
            <a href="#kesif">{t('Keşif', 'Discover')}</a>
            <a href="#pasaport">{t('Atlas', 'Atlas')}</a>
            <a href="#sezon">{t('Sezon', 'Season')}</a>
            <a href="#sosyal">{t('Sosyal', 'Social')}</a>
            <a href="#ilceler">{t('İlçeler', 'Districts')}</a>
          </div>
          <div className="footer-col">
            <h4>{t('Kurumsal', 'Company')}</h4>
            <a href="#basin">{t('Basın Kiti', 'Press Kit')}</a>
            <a href="mailto:hello@atlasdiscovers.com">hello@atlasdiscovers.com</a>
            <a href="mailto:press@atlasdiscovers.com">press@atlasdiscovers.com</a>
            <a href="mailto:support@atlasdiscovers.com">support@atlasdiscovers.com</a>
            <a href="mailto:social@atlasdiscovers.com">social@atlasdiscovers.com</a>
          </div>
          <div className="footer-col">
            <h4>{t('Yasal', 'Legal')}</h4>
            <a href={`/privacy-policy${legalSuffix}`}>{t('Gizlilik Politikası', 'Privacy Policy')}</a>
            <a href={`/terms${legalSuffix}`}>{t('Kullanım Şartları', 'Terms of Service')}</a>
            <a href={`/support${legalSuffix}`}>{t('Destek', 'Support')}</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ATLAS · IST&lt;&lt;TUR&lt;&lt;&lt;&lt;&lt;&lt;</span>
          <span>{t("ATLAS'INI TAMAMLA.", 'COMPLETE YOUR ATLAS.')}</span>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });