// Footer
const Footer = ({ t, setPage }) => {
  const cols = [
    { h: t.footer.product, links: t.footer.product_links, ids: ["map","services","report"] },
    { h: t.footer.company, links: t.footer.company_links, ids: ["about","contact"] },
    { h: t.footer.legal,   links: t.footer.legal_links,   ids: [] },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nav-logo">
              <Logo size={44}/>
              <span className="nav-logo-text">{t.brand_full}</span>
            </div>
            <p className="footer-tag">{t.footer.tag}</p>
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <h5>{c.h}</h5>
              <ul>
                {c.links.map((l, j) => (
                  <li key={j}>
                    <a onClick={() => c.ids[j] && setPage(c.ids[j])}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copy}</span>
          <span style={{ fontFamily: "var(--font-mono)", letterSpacing: "0.05em" }}>RIYADH · KSA</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });