/* global React */
function Footer() {
  return (
    <footer className="rn-footer" id="contact">
      <div className="rn-footer__halftone" aria-hidden="true" />
      <div className="rn-footer__inner">
        <div className="rn-footer__brand">
          <img src="assets/logo-transparent.png" alt="" />
          <span>Rogue North</span>
        </div>
        <div className="rn-footer__col">
          <span className="rn-footer__col-label">Studio</span>
          <a href="#work">Work</a>
          <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('rn:open-booking')); }}>Book a call</a>
        </div>
        <div className="rn-footer__col">
          <span className="rn-footer__col-label">Contact</span>
          <a href="mailto:garyqphan@gmail.com">garyqphan@gmail.com</a>
          <a href="tel:+17148126768">(714) 812-6768</a>
          <span>New York, NY</span>
        </div>
      </div>
      <div className="rn-footer__base">
        <span>© 2026 Rogue North. All rights reserved.</span>
        <span>
          think different, go n
          <svg
            style={{ display: 'inline-block', width: '0.5em', height: '0.4em', color: 'var(--rn-beige)', transform: 'translateY(-1px)' }}
            viewBox="0 0 22 18" fill="none" stroke="currentColor"
            strokeWidth="2.4" strokeLinejoin="round" aria-hidden="true">
            <polygon points="11,2 20,16 2,16" />
          </svg>
          rth.
        </span>
      </div>
    </footer>
  );
}
window.Footer = Footer;