// Footer.jsx — huge wordmark + link columns
function Footer() {
  return (
    <footer className="footer">
      <div className="container-xl">
        <h2 className="footer__wordmark">
          Oz<em>works</em>.
        </h2>
        <div className="footer__bar">
          <div className="footer__col">
            <h5>Studio</h5>
            <p>London &amp; Kent, UK</p>
            <p>hello@ozworks.uk</p>
            <p>+44 20 1234 5678</p>
          </div>
          <div className="footer__col">
            <h5>What we do</h5>
            <a href="#services">AI solutions</a>
            <a href="#services">Websites</a>
            <a href="#services">Training</a>
            <a href="#services">Whatever else</a>
          </div>
          <div className="footer__col">
            <h5>Elsewhere</h5>
            <a href="#" data-hover>LinkedIn</a>
            <a href="#" data-hover>Are.na</a>
            <a href="#" data-hover>Read.cv</a>
            <a href="#" data-hover>Substack</a>
          </div>
          <div className="footer__col">
            <h5>Currently</h5>
            <p>Taking on for Q3 2026.</p>
            <p>Two slots open.</p>
            <a href="#contact" data-hover style={{color:'var(--oz-purple-300)', marginTop:'12px'}}>Book a chat →</a>
          </div>
        </div>
        <div className="footer__meta">
          <span>© 2026 Ozworks Studio Ltd.</span>
          <span>Built with care. No trackers, no cookies.</span>
          <span>v.1.0 · LDN/KNT</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;