const Footer = () => (
  <footer>
    <div className="footer-grid">
      <div className="footer-brand">
        <h4>Chroma</h4>
        <p>
          Senior HubSpot engineering for B2B SaaS.
          Implementation, migration, custom dev, and the cleanup nobody else wants to do.
        </p>
      </div>
      <div className="footer-col">
        <h5>Services</h5>
        <ul>
          <li><a href="#services">Implementation</a></li>
          <li><a href="#services">Migration</a></li>
          <li><a href="#services">Custom Development</a></li>
          <li><a href="#services">Audit & Cleanup</a></li>
          <li><a href="#services">Ongoing Admin</a></li>
        </ul>
      </div>
      <div className="footer-col">
        <h5>Company</h5>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#case-studies">Case Studies</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Industries</a></li>
        </ul>
      </div>
      <div className="footer-col">
        <h5>Contact</h5>
        <ul>
          <li><a href="#book">Book a discovery call</a></li>
          <li><a href="mailto:hello@chroma.studio">hello@chroma.studio</a></li>
          <li><a href="#">Partner directory listing</a></li>
        </ul>
      </div>
    </div>
    <div className="footer-wordmark">CHROMA</div>
    <div className="footer-bottom">
      <div className="footer-copy">© 2026 CHROMA STUDIO · MADE FOR REVOPS</div>
      <div className="footer-badges">
        <div className="footer-badge tier-diamond">
          <span className="footer-badge-dot"></span>
          HubSpot Diamond Partner
        </div>
        <div className="footer-badge tier-platinum">
          <span className="footer-badge-dot"></span>
          14× Certified
        </div>
        <div className="footer-badge tier-elite">
          <span className="footer-badge-dot"></span>
          SOC 2 Type II
        </div>
      </div>
    </div>
  </footer>
);

window.Footer = Footer;