const Footer = () => (
  <footer style={{ background: "var(--ink)", color: "#cdd9eb", padding: "72px 0 32px" }}>
    <div className="wrap">
      <div style={{
        display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48,
      }} className="ft-grid">
        <div>
          <Wordmark size="lg" invert/>
          <p style={{ marginTop: 18, lineHeight: 1.6, fontSize: "calc(15px * var(--scale))", maxWidth: 360, color: "rgba(255,255,255,.7)" }}>
            {t("footer.tagline")}
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
            <a href="tel:+4961511234567" className="btn btn-secondary" style={{ background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,.16)" }}>
              <Icon.phone size={18}/> {t("common.phone")}
            </a>
            <a href="https://wa.me/4961511234567" className="btn btn-whatsapp">
              <Icon.whatsapp size={18}/> WhatsApp
            </a>
          </div>
        </div>

        {t("footer.columns").map((col, i) => (
          <div key={i}>
            <div style={{ color: "#fff", fontWeight: 600, fontSize: "calc(15px * var(--scale))", marginBottom: 18 }}>{col.title}</div>
            <div style={{ display: "grid", gap: 12 }}>
              {col.links.map(([l, h]) => (
                <a key={l} href={h} style={{ color: "#cdd9eb", fontSize: "calc(15px * var(--scale))" }}>{l}</a>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 56, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,.08)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
        color: "#8ea3bd", fontSize: "calc(13px * var(--scale))",
      }}>
        <div>{t("footer.copyright")}</div>
        <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
          {t("footer.legal").map(([l, h]) => (
            <a key={l} href={h}>{l}</a>
          ))}
          <button
            onClick={() => window.openCookieSettings && window.openCookieSettings()}
            style={{ color: "#8ea3bd", fontSize: "calc(13px * var(--scale))", padding: 0 }}>
            {t("footer.cookieSettings")}
          </button>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .ft-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 540px) {
          .ft-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  </footer>
);

Object.assign(window, { Footer });