// Footer.jsx
function Footer({ onNavigate }) {
  const go = (r) => (e) => { e.preventDefault(); onNavigate?.(r); };
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/broadacres-logo-white.svg" alt="Broadacres Academy" style={{height: 56}}/>
            <div className="tag">Learning, <span style={{fontStyle:'italic'}}>naturally.</span></div>
          </div>
          <div className="footer-col">
            <h5>Explore</h5>
            <ul>
              <li><a href="/about" onClick={go('about')}>About</a></li>
              <li><a href="/offer" onClick={go('offer')}>Offering &amp; fees</a></li>
              <li><a href="/blog" onClick={go('blog')}>Blog</a></li>
              <li><a href="/contact" onClick={go('contact')}>Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Get in touch</h5>
            <ul className="footer-col__plain">
              <li>+27 10 271 1700</li>
              <li>apply@broadacres.com</li>
              <li>Mon&ndash;Fri &nbsp;|&nbsp; 08:00&ndash;16:30</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Broadacres Academy &middot; A ThriveEd Learning Community</div>
          <div>broadacres.com</div>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });