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' }}>
        The AI <span className="serif brand-text" style={{ fontStyle: 'italic' }}>you</span> picked.<br />
        The voice <span className="serif brand-text" style={{ fontStyle: 'italic' }}>you</span> already have.<br />
        One twin per account.
      </h2>
      <p className="lede" style={{ color: 'rgba(255,255,255,0.65)', marginTop: 24 }}>
        14-day full trial — every feature, every provider. Keep it for $39 once.
        Switch AI any time. Your keys, your Mac, your voice.
      </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} /> Download for macOS
        </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)' }}>
          See the privacy architecture <Icons.ArrowUpRight size={16} />
        </a>
      </div>
    </div>
  </section>;


const Footer = () =>
<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 }}>
            A native macOS assistant for Apple Mail. Made by Smilodon AS in Norway.
          </p>
          <div style={{ fontSize: 12, marginTop: 18, color: 'rgba(255,255,255,0.4)' }}>
            © 2026 Smilodon AS. All rights reserved.
          </div>
        </div>
        {[
      ['Product', [
        ['Features', '#features'],
        ['Models', '#models'],
        ['Pricing', '#pricing'],
        ['Changelog', 'changelog.html'],
      ]],
      ['Trust', [
        ['Privacy', 'privacy.html'],
        ['Terms', 'terms.html'],
        ['Refunds', 'refund.html'],
        ['Status', 'status/'],
      ]],
      ['Help', [
        ['Setup guide', 'setup.html'],
        ['Provider guide', 'providers-guide.html'],
        ['Support', 'mailto:hello@mailtwin.ai'],
      ]],
      ['Company', [
        ['About', 'about.html'],
        ['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' }}>Language:</span>
        <a href="/" data-lang="en" aria-current="true" style={{ color: 'white', fontWeight: 500 }}>English</a>
        <a href="/nb/" data-lang="nb" style={{ color: 'rgba(255,255,255,0.6)' }}>Norsk</a>
        <a href="/de/" data-lang="de" style={{ color: 'rgba(255,255,255,0.6)' }}>Deutsch</a>
        <a href="/fr/" data-lang="fr" style={{ color: 'rgba(255,255,255,0.6)' }}>Français</a>
        <a href="/es/" data-lang="es" style={{ color: 'rgba(255,255,255,0.6)' }}>Español</a>
        <a href="/ja/" data-lang="ja" style={{ color: 'rgba(255,255,255,0.6)' }}>日本語</a>
        <a href="/zh-Hans/" data-lang="zh-Hans" style={{ color: 'rgba(255,255,255,0.6)' }}>简体中文</a>
      </div>
    </div>
  </footer>;


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