// SiteFooter.jsx — site-wide footer with copyright and nav links.

function SiteFooter() {
  return (
    <footer style={sfStyles.foot}>
      <div style={sfStyles.inner}>
        <div style={sfStyles.brand}>
          <span style={sfStyles.brandMark} aria-hidden="true">
            <svg width="20" height="20" viewBox="3 0.5 14 14" xmlns="http://www.w3.org/2000/svg" shapeRendering="crispEdges" aria-hidden="true">
              <g fill="currentColor">
                <rect width="1" height="1" x="7" y="2"/><rect width="1" height="1" x="12" y="2"/>
                <rect width="1" height="1" x="4" y="3"/><rect width="1" height="1" x="8" y="3"/><rect width="1" height="1" x="11" y="3"/><rect width="1" height="1" x="15" y="3"/>
                <rect width="1" height="1" x="5" y="4"/><rect width="1" height="1" x="8" y="4"/><rect width="1" height="1" x="11" y="4"/><rect width="1" height="1" x="14" y="4"/>
                <rect width="1" height="1" x="5" y="5"/><rect width="1" height="1" x="6" y="5"/><rect width="1" height="1" x="7" y="5"/><rect width="1" height="1" x="8" y="5"/><rect width="1" height="1" x="9" y="5"/><rect width="1" height="1" x="10" y="5"/><rect width="1" height="1" x="11" y="5"/><rect width="1" height="1" x="12" y="5"/><rect width="1" height="1" x="13" y="5"/><rect width="1" height="1" x="14" y="5"/>
                <rect width="1" height="1" x="3" y="6"/><rect width="1" height="1" x="6" y="6"/><rect width="1" height="1" x="7" y="6"/><rect width="1" height="1" x="8" y="6"/><rect width="1" height="1" x="9" y="6"/><rect width="1" height="1" x="10" y="6"/><rect width="1" height="1" x="11" y="6"/><rect width="1" height="1" x="12" y="6"/><rect width="1" height="1" x="13" y="6"/><rect width="1" height="1" x="16" y="6"/>
                <rect width="1" height="1" x="4" y="7"/><rect width="1" height="1" x="5" y="7"/><rect width="1" height="1" x="6" y="7"/><rect width="1" height="1" x="8" y="7"/><rect width="1" height="1" x="9" y="7"/><rect width="1" height="1" x="10" y="7"/><rect width="1" height="1" x="11" y="7"/><rect width="1" height="1" x="13" y="7"/><rect width="1" height="1" x="14" y="7"/><rect width="1" height="1" x="15" y="7"/>
                <rect width="1" height="1" x="6" y="8"/><rect width="1" height="1" x="7" y="8"/><rect width="1" height="1" x="8" y="8"/><rect width="1" height="1" x="9" y="8"/><rect width="1" height="1" x="10" y="8"/><rect width="1" height="1" x="11" y="8"/><rect width="1" height="1" x="12" y="8"/><rect width="1" height="1" x="13" y="8"/>
                <rect width="1" height="1" x="6" y="9"/><rect width="1" height="1" x="7" y="9"/><rect width="1" height="1" x="8" y="9"/><rect width="1" height="1" x="9" y="9"/><rect width="1" height="1" x="10" y="9"/><rect width="1" height="1" x="11" y="9"/><rect width="1" height="1" x="12" y="9"/><rect width="1" height="1" x="13" y="9"/>
                <rect width="1" height="1" x="5" y="10"/><rect width="1" height="1" x="6" y="10"/><rect width="1" height="1" x="7" y="10"/><rect width="1" height="1" x="8" y="10"/><rect width="1" height="1" x="9" y="10"/><rect width="1" height="1" x="10" y="10"/><rect width="1" height="1" x="11" y="10"/><rect width="1" height="1" x="12" y="10"/><rect width="1" height="1" x="13" y="10"/><rect width="1" height="1" x="14" y="10"/>
                <rect width="1" height="1" x="5" y="11"/><rect width="1" height="1" x="7" y="11"/><rect width="1" height="1" x="12" y="11"/><rect width="1" height="1" x="14" y="11"/>
                <rect width="1" height="1" x="5" y="12"/><rect width="1" height="1" x="7" y="12"/><rect width="1" height="1" x="12" y="12"/><rect width="1" height="1" x="14" y="12"/>
              </g>
            </svg>
          </span>
          <span>&#169; 2026 Spencer Voorhees</span>
        </div>
        <div style={sfStyles.links}>
          <a href="https://blog.spencervoorhees.com">Writing</a>
          <a href="https://resume.spencervoorhees.com">R&#233;sum&#233;</a>
          <a href="https://linkedin.com/in/spencervoorhees">LinkedIn</a>
          <a href="/privacy" style={sfStyles.privacyLink}>Privacy Policy</a>
        </div>
      </div>
    </footer>
  );
}

const sfStyles = {
  foot: {
    borderTop: "1px solid var(--border-subtle)",
    padding: "36px 0",
  },
  inner: {
    maxWidth: 1200, margin: "0 auto", padding: "0 max(20px, 5vw)",
    display: "flex", justifyContent: "space-between", alignItems: "center",
    gap: 24, flexWrap: "wrap",
    fontSize: 13, color: "var(--fg-tertiary)",
  },
  brand: {
    display: "flex", gap: 10, alignItems: "center",
    color: "var(--fg-secondary)", fontWeight: 500,
  },
  brandMark: { display: "inline-flex", color: "var(--fg-secondary)" },
  links: { display: "flex", gap: 20 },
  privacyLink: {
    fontFamily: "var(--font-mono)", fontSize: 11,
    color: "var(--fg-quaternary)",
  },
};

window.SiteFooter = SiteFooter;