/* eslint-disable no-undef */
/**
 * NsFooter — footer for all No Stone pages.
 * Editorial 4-column layout + meta row.
 */
function NsFooter({ variant = "light" }) {
  const isDark = variant === "dark";
  const cols = [
  {
    head: "Content",
    links: [
    { l: "Content Starter Pack", h: "content.html#starter" },
    { l: "Content Growth Pack", h: "content.html#growth" },
    { l: "Content Partner Pack", h: "content.html#partner" },
    { l: "Request a sample", h: "contact.html?request=sample" }]

  },
  {
    head: "Guidance",
    links: [
    { l: "MSP Growth Essentials", h: "guidance.html#growth-essentials" },
    { l: "Improvement Kick Starter", h: "guidance.html#kick-starter" },
    { l: "Service Feasibility Assessment", h: "guidance.html#feasibility" },
    { l: "Service (Re)Design", h: "guidance.html#redesign" },
    { l: "ITSM & Operations", h: "guidance.html#itsm" },
    { l: "Outsourcing & Insourcing", h: "guidance.html#outsourcing" }]

  },
  {
    head: "Connect",
    links: [
    { l: "(02) 9188 7845", h: "tel:+61291887845" },
    { l: "hello@nostone.com.au", h: "mailto:hello@nostone.com.au" },
    { l: "Contact us", h: "contact.html" }]

  }];


  const bg = isDark ? "var(--color-surface-dark)" : "var(--color-canvas)";
  const fg = isDark ? "var(--color-on-dark)" : "var(--color-ink)";
  const muted = isDark ? "var(--color-on-dark-soft)" : "var(--color-muted)";
  const hairline = isDark ? "rgba(255,255,255,0.1)" : "var(--color-hairline)";

  return (
    <footer style={{ background: bg, color: fg, padding: "80px 64px 32px", borderTop: isDark ? "0" : "1px solid var(--color-hairline)" }}>
      <div style={{ maxWidth: 1152, margin: "0 auto" }}>
        {/* Top: brand statement + columns */}
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48, paddingBottom: 64, borderBottom: `1px solid ${hairline}` }}>
          <div>
            <a href="index.html" style={{ textDecoration: "none", color: "inherit", display: "inline-block" }}>
              <NsLockup variant={isDark ? "dark" : "light"} markSize={44} />
            </a>
            <p style={{ marginTop: 20, fontSize: 14, color: muted, lineHeight: 1.6, maxWidth: 280 }}>
              Practical support for Australian MSPs who want expert content, clearer offers, better delivery, and consistent customer engagement.
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 24 }}>
              <span className="ns-chip" style={{ background: isDark ? "rgba(255,255,255,0.08)" : "var(--color-surface-strong)", color: fg }}>
                <span className="ns-au-dot" />Australian-built
              </span>
              <span className="ns-chip" style={{ background: isDark ? "rgba(255,255,255,0.08)" : "var(--color-surface-strong)", color: fg }}>
                Est. 2021
              </span>
            </div>
          </div>
          {cols.map((c) =>
          <div key={c.head}>
              <div style={{ fontSize: 13, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: muted, marginBottom: 20 }}>{c.head}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {c.links.map((it) =>
              <li key={it.l}><a href={it.h} style={{ fontSize: 14, color: fg, textDecoration: "none", cursor: "pointer", opacity: 0.9 }}>{it.l}</a></li>
              )}
              </ul>
            </div>
          )}
        </div>

        {/* Meta row */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 28, gap: 24, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 20, fontSize: 13, color: muted }}>
            <span>© 2026 No Stone Pty Ltd · ABN 97 650 010 530</span>
            <span style={{ fontFamily: "var(--font-mono)" }}>Perth · WST</span>
          </div>
          <div style={{ display: "flex", gap: 24, fontSize: 13, color: muted }}>
            <a href="privacy.html" style={{ color: "inherit", textDecoration: "none", cursor: "pointer" }}>Privacy</a>
            <a href="privacy.html#terms" style={{ color: "inherit", textDecoration: "none", cursor: "pointer" }}>Terms</a>
            <a href="privacy.html#cookies" style={{ color: "inherit", textDecoration: "none", cursor: "pointer" }}>Cookies</a>
          </div>
        </div>
      </div>
    </footer>);

}

window.NsFooter = NsFooter;