/* UPOLT site — shared footer (lean: LinkedIn + X only, working links). */

function Footer() {
  const SOCIALS = {
    linkedin: "M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z",
    x: "M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.46l8.6-9.83L0 1.15h7.6l5.24 6.93 6.06-6.93zm-1.29 19.5h2.04L6.49 3.24H4.3l13.31 17.41z",
  };
  const cols = [
    { h: "Solutions", links: [["Connect", "platform.html#connect"], ["Automate", "platform.html#automate"], ["Operate", "platform.html#operate"], ["Analyze", "platform.html#analyze"], ["Assist", "platform.html#assist"]] },
    { h: "Company", links: [["About", "about.html"], ["Contact", "contact.html"]] },
  ];
  return (
    <footer style={{ background: "var(--surface-page)", borderTop: "1px solid var(--border-default)", paddingTop: 72, paddingBottom: 44 }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1.8fr 1fr 1fr", gap: 48 }}>
          <div>
            <img src="assets/logos/upolt-lockup-horizontal.png" alt="UPOLT" style={{ height: 24 }} />
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--text-tertiary)", margin: "16px 0 0", maxWidth: 280 }}>Modern software, automation, and AI to help businesses move forward.</p>
            <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
              {Object.keys(SOCIALS).map(key => (
                <a key={key} href="#" onClick={e => e.preventDefault()} aria-label={key} className="upolt-social" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 36, height: 36, borderRadius: 9, border: "1px solid var(--border-default)", color: "var(--text-tertiary)", background: "var(--surface-card)" }}>
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={SOCIALS[key]}></path></svg>
                </a>
              ))}
            </div>
          </div>
          {cols.map(col => (
            <div key={col.h}>
              <div style={{ fontSize: 13, fontWeight: 700, color: "var(--text-primary)", marginBottom: 14 }}>{col.h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {col.links.map(([label, href]) => (
                  <a key={label} href={href} className="upolt-footer-link" style={{ fontSize: 14, color: "var(--text-tertiary)", textDecoration: "none" }}>{label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 16, alignItems: "center", marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--border-default)" }}>
          <span style={{ fontSize: 13.5, color: "var(--text-muted)" }}>© 2026 UPOLT, Inc. All rights reserved.</span>
          <a href="contact.html" className="upolt-footer-link" style={{ marginLeft: "auto", fontSize: 13.5, color: "var(--text-muted)", textDecoration: "none" }}>Contact us</a>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Footer });