const Footer = () => {
  const cols = [
    { h: 'Services', items: ['Channel pricing', 'Demand-side surveys', 'Competitive teardown', 'Category forecasting', 'Brand testing', 'Investor diligence'] },
    { h: 'Company', items: ['About', 'Analysts', 'Careers', 'Press', 'Contact'] },
    { h: 'Resources', items: ['Capabilities deck', 'Sample readouts', 'Methodology notes', 'Glossary'] },
  ];
  return (
    <footer className="site-foot">
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="brand">
              <span className="brand-mark">
                <svg viewBox="0 0 24 24" width="22" height="22">
                  <rect x="2" y="2" width="9" height="20" rx="1.5" fill="currentColor" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" fill="currentColor" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" fill="currentColor" opacity="0.28" />
                </svg>
              </span>
              <span className="brand-name">Main Street<span className="brand-sub"> / Research</span></span>
            </div>
            <p className="foot-tag">Marketing research for the people who ship the parts.</p>
            <div className="foot-newsletter">
              <input placeholder="you@company.com" aria-label="Email" />
              <button className="btn btn-primary">Subscribe</button>
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h} className="foot-col">
              <h4>{c.h}</h4>
              <ul>{c.items.map(i => <li key={i}><a href="#">{i}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="foot-bottom">
          <div>© 2025 Main Street Research Ltd. Liability Company. All rights reserved. 1726 Cottage Avenue, Indianapolis, IN US</div>
          <div className="foot-legal">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Security</a>
          </div>
        </div>
        <div className="foot-mega" aria-hidden="true">MAIN · STREET · RESEARCH</div>
      </div>
    </footer>
  );
};

window.Footer = Footer;