function SiteFooter({ tweaks }) {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper)", padding: "72px 0 32px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 32, marginBottom: 56 }} className="footer-grid">
          <div className="col gap-16">
            <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <div className="logo-mark"></div>
              <span className="display" style={{ fontSize: 22, color: "var(--paper)" }}>{tweaks.brand}</span>
            </div>
            <p style={{ color: "var(--ink-4)", fontSize: 14, maxWidth: 320, margin: 0 }}>{tweaks.tagline}</p>
            <p style={{ color: "var(--ink-4)", fontSize: 13, maxWidth: 320, margin: 0, lineHeight: 1.55 }}>For the curious. The careful. The ones who want to do this right without becoming a project.</p>
            <p className="mono" style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.08em", margin: 0 }}>Bangkok, Thailand · 2026</p>
          </div>
          {[
            { title: "Product", links: ["Kit contents", "How it works", "Pricing", "Education hub"] },
            { title: "Company", links: ["About", "Founder note", "Careers", "Press"] },
            { title: "Help", links: ["FAQ", "Contact", "Shipping", "Cancel anytime"] },
          ].map((col, i) => (
            <div key={i} className="col gap-12">
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.16em", textTransform: "uppercase" }}>{col.title}</div>
              {col.links.map((l, j) => (
                <a key={j} href="#" style={{ color: "var(--paper)", textDecoration: "none", fontSize: 14 }}>{l}</a>
              ))}
            </div>
          ))}
        </div>

        <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 24, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
          <div className="legal" style={{ color: "var(--ink-4)", maxWidth: 720 }}>
            Vialprep ships sterile medical supplies and educational materials. We do not sell, manufacture, prescribe, or distribute peptides, hormones, or controlled substances. Nothing on this page is medical advice. Talk to a licensed clinician before starting a protocol. Service available in Thailand only.
          </div>
          <div style={{ display: "flex", gap: 16, fontSize: 12, color: "var(--ink-4)" }}>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Disclaimers</a>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </footer>
  );
}

Object.assign(window, { SiteFooter });