/* Navy footer matching the email band; product line + utility links. */
function SiteFooter() {
  const cols = [
    { h: "Travel", links: ["Vacation condos", "Cruises", "Tours", "Cars & flights"] },
    { h: "Membership", links: ["My Account", "Travel History", "Renew", "Upgrade to GDX"] },
    { h: "Support", links: ["Chat with Gigi", "Contact a specialist", "Help center"] },
  ];
  return (
    <footer style={{ background: "var(--grad-navy)", color: "#aebfd3", padding: "34px 30px 24px" }}>
      <div style={{ maxWidth: "980px", margin: "0 auto", display: "flex", gap: "40px", flexWrap: "wrap" }}>
        <div style={{ flex: "1 1 220px" }}>
          <img src="../../assets/logo/gdv-express-logo-reversed.png" alt="GDV Express" style={{ height: "30px", width: "auto", display: "block" }} />
          <p style={{ fontSize: "12.5px", lineHeight: 1.5, marginTop: "12px", maxWidth: "240px" }}>
            Vacation condos, cruises, tours, cars &amp; flights — at member rates. A real person is always a tap away.
          </p>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "#fff", fontWeight: 700, marginBottom: "10px" }}>{c.h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
              {c.links.map((l) => (
                <a key={l} href="#" style={{ color: "#cfe0f0", fontSize: "12.5px", textDecoration: "none" }}>{l}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: "980px", margin: "22px auto 0", paddingTop: "14px", borderTop: "1px solid rgba(255,255,255,.16)", fontSize: "11.5px" }}>
        © 2026 GDV Express · A GCI company · Member rates require an active membership
      </div>
    </footer>
  );
}
window.SiteFooter = SiteFooter;