/* global React */
function Footer() {
  const cols = [
    { title: 'Product', links: ['How it works', 'Platform', 'Pricing', 'Integrations', 'Security'] },
    { title: 'For', links: ['Founders', 'Hiring managers', 'Recruiting leaders', 'Agencies'] },
    { title: 'Resources', links: ['Comp benchmarks', 'Hiring playbook', 'Case studies', 'Changelog'] },
    { title: 'Company', links: ['About', 'Careers', 'Press', 'Contact'] },
    { title: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Cookies'] }
  ];
  return (
    <footer className="site-footer">
      <div className="container site-footer__top">
        <div className="site-footer__brand">
          <a href="#" className="site-footer__brand-row">
            <img src="assets/logo-mark-transparent.png" alt="" />
            <span className="site-footer__name">ASTEROID&nbsp;RECRUITING</span>
          </a>
          <p className="site-footer__tag">You tell us the role. We deliver candidates.</p>
          <form className="site-footer__news" onSubmit={(e) => e.preventDefault()}>
            <label className="site-footer__news-label" htmlFor="footer-email">Get the monthly hiring brief.</label>
            <div className="site-footer__news-row">
              <input id="footer-email" className="site-footer__news-input" type="email" placeholder="you@company.com" />
              <button className="btn btn-primary btn-sm" type="submit">Subscribe</button>
            </div>
          </form>
        </div>
        <div className="site-footer__cols">
          {cols.map((c) => (
            <div className="site-footer__col" key={c.title}>
              <div className="site-footer__col-title">{c.title}</div>
              <ul>
                {c.links.map((l) => <li key={l}><a href="#">{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div className="container site-footer__legal">
        <span>&copy; 2026 Asteroid Recruiting, Inc.</span>
        <span className="site-footer__city">San Francisco · Remote-first</span>
        <span className="site-footer__legal-links">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Status</a>
        </span>
      </div>
    </footer>
  );
}
window.Footer = Footer;