const Footer = ({ setRoute }) => {
  const { t, lang } = useLang();
  const followLabel = lang === "es" ? "Síguenos" : "Follow us";
  return (
    <footer className="ai-footer">
      <div className="ai-footer__inner">
        <div className="ai-footer__col ai-footer__col--brand">
          <Logo dark size={28} />
          <div className="ai-footer__meta">{t.footer.meta}</div>
          <div className="ai-footer__social">
            <span className="ai-footer__follow">{followLabel}</span>
            {/* Brand social — URLs come from window.AI_SOCIAL so the
                Footer and the Contact card stay in lockstep. Open in
                a new tab + noopener since these are external. */}
            <div className="ai-footer__icons">
              <a className="ai-footer__ic"
                 href={AI_SOCIAL.linkedin}
                 target="_blank" rel="noopener noreferrer"
                 aria-label="LinkedIn">
                <Icon.LinkedIn />
              </a>
              <a className="ai-footer__ic"
                 href={AI_SOCIAL.youtube}
                 target="_blank" rel="noopener noreferrer"
                 aria-label="YouTube">
                <Icon.YouTube />
              </a>
            </div>
          </div>
        </div>
        <div className="ai-footer__col">
          <div className="ai-footer__head">{t.footer.headNav}</div>
          {t.nav.map(n => (
            <a key={n.id} onClick={() => { setRoute(n.id); window.scrollTo({top:0, behavior:"smooth"}); }}>{n.label}</a>
          ))}
        </div>
        <div className="ai-footer__col">
          <div className="ai-footer__head">{t.footer.headSectors}</div>
          {(t.sectors || []).map((s, i) => (
            <a key={s.id}
               style={{cursor:"pointer"}}
               onClick={() => { setRoute({route:"sector", sectorId: s.id}); window.scrollTo({top:0, behavior:"smooth"}); }}>
              {s.label}
            </a>
          ))}
        </div>
        <div className="ai-footer__col">
          <div className="ai-footer__head">{t.footer.headContact}</div>
          <div className="ai-footer__addr">
            Calle Maestro Ángel Llorca, 2<br/>
            Entrada por Edificio Skandia, Planta principal<br/>
            28003 Madrid
          </div>
          <div className="ai-footer__tel">Tel. +34 915 33 67 04</div>
          <a href="mailto:sec@aguilera-ingenieros.com">sec@aguilera-ingenieros.com</a>
        </div>
      </div>
      <div className="ai-footer__bottom">
        <span>{t.footer.legalLeft}</span>
        {/* Legal links — each renders as a small clickable anchor that
            navigates via setRoute. Labels come from t.footer.legalLinks
            so they translate per locale; the route keys are stable. */}
        <span className="ai-footer__legal-links">
          {(t.footer.legalLinks || []).map((lk, i) => (
            <React.Fragment key={lk.route}>
              {i > 0 && <span className="ai-footer__legal-sep"> · </span>}
              <a className="ai-footer__legal-link"
                 onClick={() => { setRoute(lk.route); window.scrollTo({top: 0, behavior: "smooth"}); }}>
                {lk.label}
              </a>
            </React.Fragment>
          ))}
        </span>
      </div>
    </footer>
  );
};

const SocialStrip = () => null;

/* CookieBar — accepts a setRoute prop so the "Política de Cookies" link
   actually navigates to the cookies legal page. Pass-through from the
   App-level <CookieBar setRoute={setRoute} />. */
const CookieBar = ({ setRoute }) => {
  const { t } = useLang();
  const [open, setOpen] = React.useState(true);
  if (!open) return null;
  const goCookies = () => {
    if (typeof setRoute === "function") {
      setRoute("cookies");
      window.scrollTo({top: 0, behavior: "smooth"});
    }
  };
  return (
    <div className="cookie">
      <span>
        {t.cookie.msg}
        <a className="cookie__link" onClick={goCookies}>{t.cookie.link}</a>.
      </span>
      <button onClick={() => setOpen(false)}>{t.cookie.accept}</button>
    </div>
  );
};

Object.assign(window, { Footer, SocialStrip, CookieBar });