function Footer() {
  const siteMode = typeof window !== "undefined" && window.__siteMode;
  const link = (p) => siteMode ? p : "#";
  return (
    <footer className="bx-foot">
      <div className="bx-foot-grid">
        <div className="bx-foot-intro">
          <Logo size={40} />
          <p style={{ marginTop: 14, color: "var(--bx-foot-fg, rgba(244,236,220,0.75))", fontFamily: "var(--font-mono)", fontSize: 12, maxWidth: 280, lineHeight: 1.55 }}>
            UX strategy, design systems, and research engines for enterprise software. People first. AI supported.
          </p>
        </div>
        <hr className="bx-foot-hr" />
        <div>
          <h4>Studio</h4>
          <ul>
            <li><a href={link("/services")}>Services</a></li>
            <li><a href={link("/work")}>Work</a></li>
            <li><a href={link("/blog")}>Stories</a></li>
            <li><a href={link("/about")}>About</a></li>
            <li><a href={link("/jobs")}>Careers</a></li>
            <li><a href={link("/contact")}>Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Open source</h4>
          <ul>
            {((typeof window !== "undefined" && window.SITE_CONTENT && window.SITE_CONTENT.oss) || []).slice(0, 5).map(o => (
              <li key={o.name}>
                <a href={o.ctaUrl || o.linkUrl} target="_blank" rel="noopener noreferrer">
                  {o.name}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h4>Find us</h4>
          <ul>
            <li><a href="https://maps.app.goo.gl/9YBdDcfdxykQt8Sw8" target="_blank" rel="noopener noreferrer">401 W A St, Suite 200<br />San Diego, CA 92101</a></li>
            <li><a href="https://what3words.com/move.lines.jeeps" target="_blank" rel="noopener noreferrer">///move.lines.jeeps</a></li>
            <li><a href="tel:+16193433779">+1 (619) 343-3779</a></li>
            <li><a href="mailto:hi@borderux.com">hi@borderux.com</a></li>
          </ul>
        </div>
        <div>
          <h4>Follow</h4>
          <ul>
            <li><a href="https://www.linkedin.com/company/borderux" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
            <li><a href="https://github.com/borderux" target="_blank" rel="noopener noreferrer">Github</a></li>
          </ul>
        </div>
      </div>
      <div className="bx-foot-bottom">
        <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
          <a href={link("/legal/privacy")}>Privacy</a>
          <a href={link("/legal/terms-of-use")}>Terms</a>
          <a href={link("/legal/licensing")}>Licensing</a>
          <a href={link("/legal/cookies")}>Cookies</a>
        </div>
        <span>© 2026 Border LLC. All rights reserved. Crafted with love in sunny San Diego.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });