// Footer.jsx — hairline footer with brand block + columns.
const Footer = () => (
  <footer className="footer">
    <div className="shell">
      <div className="footer__top">
        <div className="footer__brand">
          <img src="./assets/logos/emsley-logo.svg" alt="Emsley" />
          <p>Eyewear development for design-led brands. Operators of brand and factory, equally.</p>
        </div>
        <div className="footer__col">
          <div className="footer__heading">Site</div>
          <a href="#process">Process</a>
          <a href="case-study.html">Case study</a>
          <a href="perspective.html">Perspective</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="footer__col">
          <div className="footer__heading">Capabilities</div>
          <a href="process.html#sampling">Sampling</a>
          <a href="process.html#production">Production &amp; QC</a>
          <a href="process.html#packaging">Packaging</a>
          <a href="process.html#logistics">Logistics</a>
        </div>
        <div className="footer__col">
          <div className="footer__heading">Contact</div>
          <a href="mailto:hello@emsley.com">hello@emsley.com</a>
          <a href="#">Singapore</a>
          <a href="#">Studio visits by appt.</a>
        </div>
      </div>
      <div className="footer__bottom">
        <div>© 2026 Emsley</div>
        <div>Eyewear development</div>
      </div>
    </div>
  </footer>
);

window.Footer = Footer;