function Footer() {
  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="#" 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" links={["LM3 Public Snapshot", "R001 Methodology", "R002 Benchmarks", "R003 Pulse / Bundle / Extended", "R004 Cross-border", "R005 Sector deep dives"]}/>
            <FCol heading="Methodology" links={["Coverage policy", "Disambiguation", "Sources", "Revision policy", "Caveats & limitations"]}/>
            <FCol heading="Firm" links={["About", "Contact", "Press", "Privacy & LFPDPPP", "Terms"]}/>
          </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.5 · vstrade.co</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FCol({ heading, links }) {
  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 }}>
        {links.map(l => (
          <li key={l}>
            <a href="#" style={{
              fontFamily: "Inter, sans-serif", fontSize: 13,
              color: "rgba(250,249,245,.78)", textDecoration: "none",
              transition: "color 120ms",
            }}
            onMouseEnter={e => e.currentTarget.style.color = PALETTE.paper}
            onMouseLeave={e => e.currentTarget.style.color = "rgba(250,249,245,.78)"}
            >{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;