// Footer.jsx
const Footer = () => {
  const t = useT();
  return (
    <footer className="bp-footer">
      <div className="bp-footer__top">
        <div className="bp-footer__brand">
          <span className="bp-wm">beep<span className="bp-wm__dot"></span></span>
          <p className="bp-footer__tag">{t.footer.tag[0]}<br />{t.footer.tag[1]}</p>
        </div>
        <div className="bp-footer__cols">
          <div>
            <h6 className="bp-mono bp-mono--muted">{t.footer.services}</h6>
            <ul>{t.footer.mServices.map((s, i) => <li key={i}><a href="#services">{s}</a></li>)}</ul>
          </div>
          <div>
            <h6 className="bp-mono bp-mono--muted">{t.footer.more}</h6>
            <ul>
              <li><a href="#about">{t.footer.mMore[0]}</a></li>
              <li><a href="#how">{t.footer.mMore[1]}</a></li>
              <li><a href="#contact">{t.footer.mMore[2]}</a></li>
            </ul>
          </div>
          <div>
            <h6 className="bp-mono bp-mono--muted">{t.footer.legal}</h6>
            <ul>{t.footer.mLegal.map((s, i) => <li key={i}><a href={i === 0 ? 'mentions-legales.html' : 'confidentialite.html'}>{s}</a></li>)}</ul>
          </div>
        </div>
      </div>
      <div className="bp-footer__bot">
        <span>&copy; 2026 beep consult</span>
        <span className="bp-mono bp-mono--muted">{t.footer.tech}</span>
      </div>
    </footer>
  );
};
window.Footer = Footer;