const CTA = () =>
<section style={{ padding: '140px 0', background: 'var(--ink)', color: 'white', position: 'relative', overflow: 'hidden' }}>
    <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      <div style={{ position: 'absolute', left: '-10%', top: '-30%', width: 800, height: 800, background: 'radial-gradient(circle, rgba(244,166,200,0.4), transparent 60%)', filter: 'blur(60px)' }} />
      <div style={{ position: 'absolute', right: '-10%', bottom: '-30%', width: 900, height: 900, background: 'radial-gradient(circle, rgba(123,123,232,0.45), transparent 60%)', filter: 'blur(60px)' }} />
    </div>
    <div className="container-tight" style={{ position: 'relative', textAlign: 'center' }}>
      <img src="/assets/icon.png" width="100" height="100" style={{ borderRadius: 22, boxShadow: '0 20px 60px -10px rgba(0,0,0,0.5)' }} alt="" />
      <h2 style={{ marginTop: 30, color: 'white', maxWidth: 880, marginInline: 'auto', textWrap: 'balance' }}>
        {t('cta.h2_part1')}<span className="serif brand-text" style={{ fontStyle: 'italic' }}>{t('cta.h2_you1')}</span>{t('cta.h2_part2')}<br />
        {t('cta.h2_part3')}<span className="serif brand-text" style={{ fontStyle: 'italic' }}>{t('cta.h2_you2')}</span>{t('cta.h2_part4')}<br />
        {t('cta.h2_part5')}
      </h2>
      <p className="lede" style={{ color: 'rgba(255,255,255,0.65)', marginTop: 24 }}>
        {t('cta.lede')}
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
        <a href="https://updates.mailtwin.ai/MailTwin.dmg" className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16 }}>
          <Icons.Apple size={18} /> {t('cta.cta_download')}
        </a>
        <a href="#privacy" className="btn" style={{ padding: '16px 22px', background: 'rgba(255,255,255,0.08)', color: 'white', border: '1px solid rgba(255,255,255,0.15)' }}>
          {t('cta.cta_secondary')} <Icons.ArrowUpRight size={16} />
        </a>
      </div>
    </div>
  </section>;


const Footer = () => {
  // Build switcher links from the current locale; aria-current marks the active one.
  const currentLang = window.MAILTWIN_I18N_LANG || 'en';
  const langPath = (l) => l === 'en' ? '/' : `/${l}/`;
  const SWITCHER = [
    ['en', 'English'], ['nb', 'Norsk'], ['de', 'Deutsch'], ['fr', 'Français'],
    ['es', 'Español'], ['ja', '日本語'], ['zh-Hans', '简体中文'],
    ['ru', 'Русский'], ['pt-BR', 'Português (BR)'],
    ['ar', 'العربية'], ['it', 'Italiano'], ['nl', 'Nederlands'],
    ['ko', '한국어'], ['pl', 'Polski'], ['hi', 'हिन्दी'],
  ];

  return (
<footer style={{ background: 'var(--ink-2)', color: 'rgba(255,255,255,0.7)', padding: '60px 0 40px' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'white', fontWeight: 600, fontSize: 16 }}>
            <img src="/assets/icon-small.png" width="28" height="28" style={{ borderRadius: 7 }} alt="" />
            MailTwin
          </div>
          <p style={{ fontSize: 13, marginTop: 14, maxWidth: 320, lineHeight: 1.6 }}>
            {t('footer.tagline')}
          </p>
          <div style={{ fontSize: 12, marginTop: 18, color: 'rgba(255,255,255,0.4)' }}>
            {t('footer.copyright')}
          </div>
        </div>
        {[
      [t('footer.col_product'), [
        [t('footer.link_features'),  '#features'],
        [t('footer.link_models'),    '#models'],
        [t('footer.link_pricing'),   '#pricing'],
        [t('footer.link_changelog'), 'changelog.html'],
      ]],
      [t('footer.col_trust'), [
        [t('footer.link_privacy'),   'privacy.html'],
        [t('footer.link_terms'),     'terms.html'],
        [t('footer.link_refunds'),   'refund.html'],
        [t('footer.link_status'),    'status/'],
      ]],
      [t('footer.col_help'), [
        [t('footer.link_setup'),           'setup.html'],
        [t('footer.link_provider_guide'),  'providers-guide.html'],
        [t('footer.link_support'),         'mailto:hello@mailtwin.ai'],
      ]],
      [t('footer.col_company'), [
        [t('footer.link_about'),    'about.html'],
        [t('footer.link_contact'),  'mailto:hello@mailtwin.ai'],
      ]]].
      map(([title, links]) =>
      <div key={title}>
            <div style={{ fontSize: 12, color: 'white', fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 16 }}>{title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
              {links.map(([label, href]) => <li key={label}><a href={href} style={{ fontSize: 13.5, opacity: 0.75 }}>{label}</a></li>)}
            </ul>
          </div>
      )}
      </div>
      <div style={{ marginTop: 36, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', flexWrap: 'wrap', gap: '14px 18px', alignItems: 'center', fontSize: 12.5 }} className="lang-switcher">
        <span style={{ color: 'rgba(255,255,255,0.45)', letterSpacing: '0.02em' }}>{t('footer.lang_label')}</span>
        {SWITCHER.map(([code, label]) => (
          <a key={code} href={langPath(code)} data-lang={code}
             {...(code === currentLang ? { 'aria-current': 'true' } : {})}
             style={{ color: code === currentLang ? 'white' : 'rgba(255,255,255,0.6)', fontWeight: code === currentLang ? 500 : 400 }}>
            {label}
          </a>
        ))}
      </div>
    </div>
  </footer>);
};


window.CTA = CTA;
window.Footer = Footer;