// Footer — columns + bottom row
const footerStyles = {
  wrap: { padding: '80px 0 40px', position: 'relative', overflow: 'hidden' },
  cols: {
    display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40,
    paddingBottom: 60, borderBottom: '1px solid var(--line)',
  },
  colH: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--ink-3)',
    marginBottom: 16,
  },
  link: {
    display: 'block', padding: '6px 0', fontSize: 14, color: 'var(--ink-2)',
  },
  blurb: { fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 340 },
  brandMark: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 },
  mark: {
    height: 40, width: 'auto', display: 'block',
  },

  base: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    paddingTop: 32,
    fontSize: 12, color: 'var(--ink-3)', fontFamily: "'JetBrains Mono', monospace",
    letterSpacing: '.1em',
  },
  status: { display: 'flex', alignItems: 'center', gap: 8 },
  dot: { width: 7, height: 7, borderRadius: 999, background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' },
};

function Footer() {
  return (
    <footer style={footerStyles.wrap}>
      <div className="wrap">
        <div style={footerStyles.cols} className="footer-cols">
          <div>
            <div style={footerStyles.brandMark}>
              <img src="assets/logo-white.png" alt="BackMeUp" style={footerStyles.mark}/>
            </div>
            <p style={footerStyles.blurb}>
              Agence d'acquisition B2B spécialisée dans la génération de leads qualifiés au modèle PPL.
              Basés à Paris, actifs partout en France.
            </p>
          </div>
          <div>
            <div style={footerStyles.colH}>Produit</div>
            <a style={footerStyles.link} href="#comment">Fonctionnement</a>
            <a style={footerStyles.link} href="#secteurs">Secteurs</a>
            <a style={footerStyles.link} href="#tarifs">Simulateur PPL</a>
            <a style={footerStyles.link} href="#faq">FAQ</a>
          </div>
          <div>
            <div style={footerStyles.colH}>Société</div>
            <a style={footerStyles.link} href="#clients">Clients</a>
            <a style={footerStyles.link} href="#">Équipe</a>
            <a style={footerStyles.link} href="#">Carrières</a>
            <a style={footerStyles.link} href="#">Blog</a>
          </div>
          <div>
            <div style={footerStyles.colH}>Contact</div>
            <a style={footerStyles.link} href="mailto:hello@backmeup.fr">hello@backmeup.fr</a>
            <a style={footerStyles.link} href="#">WhatsApp</a>
            <a style={footerStyles.link} href="#">Instagram</a>
            <a style={footerStyles.link} href="#">LinkedIn</a>
          </div>
        </div>

        <div style={footerStyles.base} className="footer-base">
          <div>
            © 2026 Back Me Up SAS ·{' '}
            <a href="/mentions-legales">Mentions légales</a> ·{' '}
            <a href="/confidentialite">Confidentialité</a>
          </div>
          <div style={footerStyles.status}>
            <span style={footerStyles.dot}/>
            Plateforme opérationnelle · 99.98% uptime
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });