function Footer(){
  const { go } = useRoute();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-big">
          <img src="assets/logo-red.png" alt="byace" style={{height:'clamp(80px, 14vw, 220px)', width:'auto'}} />
          <span style={{fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.2em', opacity:0.75, paddingBottom:30, marginLeft:'auto', color:'var(--paper)'}}>EST. MMXXVI</span>
        </div>
        <div className="footer-meta">
          <div>
            <h4>♥ Custom events</h4>
            <p>Near &amp; far.<br/>Based in Dallas, Texas.</p>
          </div>
          <div>
            <h4>Contact</h4>
            <a href="mailto:hello@byace.events">hello@byace.events</a>
            <a href="https://instagram.com/___byace">@___byace</a>
          </div>
          <div>
            <h4>Navigate</h4>
            <a href="#" onClick={(e)=>{e.preventDefault(); go('home');}}>Home</a>
            <a href="#" onClick={(e)=>{e.preventDefault(); go('inquiry');}}>Inquire</a>
          </div>
          <div>
            <h4>Now booking</h4>
            <p>2026 · Near &amp; Far</p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 byace. All rights reserved.</span>
          <span>byace · vol 01 · dallas, tx</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;