// Footer — Night room.
function SiteFooter({ tweaks }) {
  return (
    <footer style={{ background: "var(--night)", color: "#F4F1EA", padding: "72px 0 32px", borderTop: "1px solid rgba(255,255,255,0.08)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 32, marginBottom: 56 }} className="footer-grid">
          <div className="col gap-16">
            <div style={{ display: "inline-flex", alignItems: "center", gap: 0 }}>
              <img src="assets/lockup-horizontal-yellow.png" alt="vialprep" style={{ height: 36, width: "auto" }} />
            </div>
            <p style={{ color: "var(--ink-4)", fontSize: 14, maxWidth: 320, margin: 0 }}>{tweaks.tagline}</p>
          </div>
          <div className="col gap-12">
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.16em", textTransform: "uppercase" }}>Navigate</div>
            <a href="/waitlist/" onClick={() => gtag('event', 'waitlist_click', { event_category: 'conversion', link_location: 'footer' })} style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>Join the waitlist</a>
            <a href="#faq" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>FAQ</a>
          </div>
          <div className="col gap-12">
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.16em", textTransform: "uppercase" }}>Connect</div>
            <a href="https://line.me/R/ti/p/@038mfjdq" target="_blank" rel="noopener" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>LINE @vialprep</a>
            <a href="https://instagram.com/vialpreppers" target="_blank" rel="noopener" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>Instagram @vialpreppers</a>
            <a href="https://x.com/vialprep" target="_blank" rel="noopener" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>X @vialprep</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 is an injection supply service headquartered in Singapore, launching in Bangkok. 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.
          </div>
          <div style={{ display: "flex", gap: 16, fontSize: 12, color: "var(--ink-4)" }}>
            <a href="/privacy" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="/terms" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </footer>
  );
}

Object.assign(window, { SiteFooter });