function Footer({ logoVariant = 'a' }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <Logo variant={logoVariant} size="md" inverse />
            <p style={{ color: '#c7c6ea', fontSize: 14, marginTop: 20, maxWidth: 360, lineHeight: 1.6 }}>
              Fractional CX and product leadership for financial services and women's health teams.
            </p>
          </div>
          <div className="footer-col">
            <h5>Explore</h5>
            <a href="#why">Why work with me</a>
            <a href="#services">Services</a>
            <a href="#results">Proof & results</a>
            <a href="#podcast">Podcast</a>
            <a href="#about">About</a>
          </div>
          <div className="footer-col">
            <h5>Elsewhere</h5>
            <a href="https://nadi.health" target="_blank" rel="noopener noreferrer">Nadi (Founder)</a>
            <a href="https://www.linkedin.com/in/meganahunter/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            <a href="https://mentorcruise.com/mentor/meganhunter/" target="_blank" rel="noopener noreferrer">MentorCruise</a>
            <a href="https://substack.com/@megannnhunter" target="_blank" rel="noopener noreferrer">Megan's Substack</a>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <a href="mailto:megan@brawconsultancy.com">megan@brawconsultancy.com</a>
            <a href="https://cal.com/megan-hunter" target="_blank" rel="noopener noreferrer">Book a call</a>
          </div>
        </div>

        <div className="footer-baseline">
          <div>© {new Date().getFullYear()} Megan Hunter. All rights reserved.</div>
          <div>Making It Matter</div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;