function Footer({ onPrimaryCTA, onWaitlist, onInquire }) {
  // FCol entries take three shapes:
  //   "Plain string"                       — no-op link (kept for items that
  //                                          aren't yet wired; should be empty
  //                                          post-launch).
  //   { label, href }                      — a real internal/external link.
  //   { label, onClick, soon? }            — opens a modal handler (LM3 /
  //                                          waitlist / inquiry). `soon: true`
  //                                          adds the "SOON" eyebrow tag.
  const researchEntries = [
    { label: "LM3 Public Snapshot", onClick: onPrimaryCTA },
    { label: "R001 Mexico Total Trade Atlas", onClick: () => onWaitlist("R001"), soon: true },
    { label: "R002 Sector Vertical Reports", onClick: () => onWaitlist("R002"), soon: true },
    { label: "R003 Pulse / Bundle / Extended", onClick: () => onInquire("R003") },
    { label: "R004 Custom Coverage Periods", onClick: () => onWaitlist("R004"), soon: true },
    { label: "R005 Multi-Sector Bundles", onClick: () => onWaitlist("R005"), soon: true },
  ];

  const methodologyEntries = [
    { label: "Coverage policy",       href: "#methodology" },
    { label: "Disambiguation",        href: "#methodology" },
    { label: "Sources",               href: "#methodology" },
    { label: "Revision policy",       href: "#methodology" },
    { label: "Caveats & limitations", href: "#methodology" },
  ];

  const firmEntries = [
    { label: "About",              href: "#about" },
    { label: "Contact",            href: "#contact" },
    { label: "Privacy & LFPDPPP",  href: "/privacy" },
    { label: "Terms",              href: "/terms" },
    { label: "Refund",             href: "/refund" },
  ];

  return (
    <footer style={{ background: PALETTE.navy, color: PALETTE.paper }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "64px 32px 28px" }} className="vst-section">
        <div className="vst-grid-2" style={{
          display: "grid", gridTemplateColumns: "320px 1fr", gap: 64, alignItems: "flex-start",
        }}>
          <div>
            <Logo inverse size={22}/>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 13, lineHeight: 1.55,
              color: "rgba(250,249,245,.62)", margin: "16px 0 0", maxWidth: 280,
            }}>
              Institutional-grade Mexican trade intelligence. Named entity-level rigor for boutique consultancies, PE/VC analysts, and corporate strategy teams.
            </p>

            <div style={{ marginTop: 22, display: "flex", gap: 14, alignItems: "center" }}>
              <a href="https://www.linkedin.com/company/vs-trade-intelligence/" target="_blank" rel="noopener" aria-label="LinkedIn" style={{ color: "rgba(250,249,245,.6)", display: "inline-flex" }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8 17.34H5.67V10H8zM6.83 8.93a1.4 1.4 0 1 1 0-2.81 1.4 1.4 0 0 1 0 2.81zM18 17.34h-2.34v-3.91c0-.93-.34-1.57-1.18-1.57a1.27 1.27 0 0 0-1.2.85 1.6 1.6 0 0 0-.07.57v4.06H10.9V10h2.31v1a2.34 2.34 0 0 1 2.1-1.16c1.53 0 2.69 1 2.69 3.16z"/></svg>
              </a>
              <a href="mailto:hello@vstrade.co" style={{
                color: "rgba(250,249,245,.62)", textDecoration: "none",
                fontFamily: "JetBrains Mono, monospace", fontSize: 12,
              }}>hello@vstrade.co</a>
            </div>
          </div>

          <div className="vst-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            <FCol heading="Research"    entries={researchEntries}/>
            <FCol heading="Methodology" entries={methodologyEntries}/>
            <FCol heading="Firm"        entries={firmEntries}/>
          </div>
        </div>

        <hr style={{ border: 0, borderTop: `1px solid ${PALETTE.ruleInverse}`, margin: "40px 0 20px" }}/>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          gap: 24, flexWrap: "wrap",
        }}>
          <div style={{
            fontFamily: "Inter, sans-serif", fontSize: 11.5, lineHeight: 1.55,
            color: "rgba(250,249,245,.55)", maxWidth: 720,
          }}>
            VS-Trade Intelligence Limited · Registered in England &amp; Wales · Company No.{" "}
            <span style={{ fontFamily: "JetBrains Mono, monospace" }}>17200549</span><br/>
            71-75 Shelton Street, Covent Garden, London WC2H 9JQ · United Kingdom<br/>
            <span style={{ color: "rgba(250,249,245,.42)" }}>
              Registered users' personal data processed under LFPDPPP 2025 (Mexico) and UK GDPR.
              Reports are advisory; not investment advice.
            </span>
          </div>
          <div style={{
            fontFamily: "JetBrains Mono, monospace", fontSize: 11,
            color: "rgba(250,249,245,.5)", whiteSpace: "nowrap", textAlign: "right",
          }}>
            © 2026 VS·Trade<br/>
            <span style={{ color: "rgba(250,249,245,.35)" }}>v0.7 · vstrade.co</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FCol({ heading, entries }) {
  return (
    <div>
      <div style={{
        fontFamily: "Inter, sans-serif", fontSize: 11, fontWeight: 600,
        letterSpacing: ".14em", color: PALETTE.amber500,
        textTransform: "uppercase", marginBottom: 14,
      }}>{heading}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {entries.map(e => {
          const label = typeof e === "string" ? e : e.label;
          const isAction = typeof e === "object" && typeof e.onClick === "function";
          const href = isAction ? "#" : (typeof e === "object" ? (e.href || "#") : "#");
          const soon = typeof e === "object" && e.soon;

          const handleClick = isAction
            ? (ev) => { ev.preventDefault(); e.onClick(); }
            : undefined;

          return (
            <li key={label}>
              <a
                href={href}
                onClick={handleClick}
                style={{
                  fontFamily: "Inter, sans-serif", fontSize: 13,
                  color: "rgba(250,249,245,.78)", textDecoration: "none",
                  transition: "color 120ms",
                  display: "inline-flex", alignItems: "baseline", gap: 6,
                  cursor: isAction || href !== "#" ? "pointer" : "default",
                }}
                onMouseEnter={ev => ev.currentTarget.style.color = PALETTE.paper}
                onMouseLeave={ev => ev.currentTarget.style.color = "rgba(250,249,245,.78)"}
              >
                <span>{label}</span>
                {soon && (
                  <span style={{
                    fontFamily: "JetBrains Mono, monospace",
                    fontSize: 9.5,
                    fontWeight: 600,
                    letterSpacing: ".10em",
                    textTransform: "uppercase",
                    color: PALETTE.amber500,
                    opacity: 0.7,
                    paddingLeft: 0,
                  }}>· soon</span>
                )}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

window.Footer = Footer;