/* Trepa't — Footer (fiel al design system) */
function Footer({ lang, go }) {
  const t = window.TPT_I18N[lang].footer;
  window.useLucide("footer" + lang);
  const link = (id) => (e) => { e.preventDefault(); go(id); };
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <img src={window.TPT_ASSET + "imagotipo-cream.png"} alt="Trepa't Espai d'Escalada" />
          <p className="tagline">Fent el cabra</p>
          <p>{t.desc}</p>
          <p className="footer__pending">{t.pending}</p>
        </div>
        <div className="footer__cols">
          <div>
            <h4>{t.c1}</h4>
            {t.c1l.map(([label, id]) => <a key={id} href={"#" + id} onClick={link(id)}>{label}</a>)}
          </div>
          <div>
            <h4>{t.c2}</h4>
            {t.c2l.map(([label, id]) => <a key={id} href={"#" + id} onClick={link(id)}>{label}</a>)}
          </div>
          <div>
            <h4>{t.c3}</h4>
            <a href="#"><i data-lucide="map-pin"></i> {t.loc}</a>
            <a href="#"><i data-lucide="instagram"></i> @trepat.escalada</a>
            <a href="#"><i data-lucide="clock"></i> {t.hours}</a>
          </div>
        </div>
      </div>
      <div className="footer__bar">
        <div className="container" style={{ display: "flex", justifyContent: "space-between", gap: "16px", flexWrap: "wrap", width: "100%" }}>
          <span>© 2025 Trepa't Espai d'Escalada</span>
          <span>{t.legal}</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;