function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="big-title">
              UMB<br/>Music<br/><em>Production.</em>
            </div>
            <p style={{ color: 'rgba(255,255,255,0.7)', marginTop: 20, maxWidth: 340, fontSize: 14 }}>
              A student-run club at the University of Massachusetts Boston. Thursdays 7pm, Campus Center 2540. All skill levels welcome.
            </p>
          </div>
          <div>
            <h4>Club</h4>
            <a href="#about">About</a>
            <a href="#events">Events</a>
            <a href="#spotlights">Spotlights</a>
            <a href="#studio">Studio</a>
            <a href="#watch">Watch</a>
            <a href="#blog">What's new</a>
            <a href="#">Board minutes</a>
          </div>
          <div>
            <h4>Follow</h4>
            <a href="https://instagram.com/umb.mpc" target="_blank" rel="noopener">Instagram → @umb.mpc</a>
            <a href="https://www.tiktok.com/@umbmpc" target="_blank" rel="noopener">TikTok → @umbmpc</a>
            <a href="https://youtube.com/@umbmpc" target="_blank" rel="noopener">YouTube → @umbmpc</a>
            <a href="https://discord.gg/umbmpc" target="_blank" rel="noopener">Discord → umbmpc</a>
            <a href="https://soundcloud.com/umbmpc" target="_blank" rel="noopener">SoundCloud</a>
            <a href="https://open.spotify.com" target="_blank" rel="noopener">Spotify playlist</a>
            <a href="mailto:mpc@umb.edu">mpc@umb.edu</a>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 UMB Music Production Club · All tracks © their authors</span>
          <span>Made with caffeine + bounced stems</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;