/* SiteFooter — quiet, with a colophon link. */

function SiteFooter({ onNavigate }) {
  const [vw, setVw] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const update = () => setVw(window.innerWidth);
    window.addEventListener('resize', update, { passive: true });
    return () => window.removeEventListener('resize', update);
  }, []);
  const isMobile = vw < 640;

  return (
    <footer style={sfStyles.foot}>
      <div style={isMobile ? sfStyles.innerMobile : sfStyles.inner}>
        <div style={sfStyles.col}>
          <div style={sfStyles.brand}>
            <span style={sfStyles.mark} aria-hidden="true">
              <svg viewBox="0 0 64 64" width="28" height="28" fill="none">
                <text x="32" y="40" textAnchor="middle"
                      fontFamily="JetBrains Mono, ui-monospace, Menlo, Consolas, monospace"
                      fontSize="20" fontWeight="500"
                      fill="currentColor" letterSpacing="-.6">&lt;sv&gt;</text>
              </svg>
            </span>
            <span>Spencer Voorhees</span>
          </div>
          <p style={sfStyles.tag}>
            {isMobile
              ? "Solutions architect and software engineer."
              : "Solutions architect and software engineer. Writing about systems, engineering practice, and the broader tech landscape."}
          </p>
        </div>

        <div style={sfStyles.col}>
          <div style={sfStyles.colHead}>Elsewhere</div>
          <ul style={sfStyles.linkList}>
            <li><a href="https://spencervoorhees.com" style={sfStyles.link}>Home</a></li>
            <li><a href="https://resume.spencervoorhees.com" style={sfStyles.link}>Résumé</a></li>
            <li><a href="https://linkedin.com/in/spencervoorhees" target="_blank" rel="noreferrer" style={sfStyles.link}>LinkedIn</a></li>
            <li><a href="mailto:hello@spencervoorhees.com" style={sfStyles.link}>hello@spencervoorhees.com</a></li>
          </ul>
        </div>

        <div style={sfStyles.col}>
          <div style={sfStyles.colHead}>This site</div>
          <ul style={sfStyles.linkList}>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNavigate("now"); }} style={sfStyles.link}>What I'm doing now</a></li>
            {/* RSS feed coming soon */}
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNavigate("colophon"); }} style={sfStyles.link}>Colophon</a></li>
          </ul>
        </div>
      </div>

      <div style={sfStyles.bottom}>
        <div>
          <span style={sfStyles.copy}>© 2026 Spencer Voorhees</span>
        </div>
      </div>
    </footer>
  );
}

function ColophonPage({ onBack }) {
  return (
    <main style={cpStyles.main}>
      <a href="#" onClick={(e) => { e.preventDefault(); onBack(); }} style={cpStyles.back}>
        <i data-lucide="arrow-left" style={{ width: 14, height: 14 }}></i>
        Back to writing
      </a>
      <header style={cpStyles.head}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>How this site is made</div>
        <h1 style={cpStyles.h1}>Colophon.</h1>
        <p style={cpStyles.lede}>
          Notes on the materials. Updated when the materials change.
        </p>
      </header>

      <div className="prose" style={cpStyles.prose}>
        <h2>Typography</h2>
        <p>
          Set in <strong>Inter</strong> (display & text) and{" "}
          <strong>JetBrains Mono</strong> (code, dates, year labels).
          Reading body is 18px / 1.7; column capped at 720px on long-form.
        </p>

        <h2>Color</h2>
        <p>
          A 13-step cool neutral ramp from <code>#ffffff</code> to{" "}
          <code>#0e1015</code>, plus one accent — <em>Architect Blue</em>{" "}
          <code>#2F6BEA</code> — used for links, focus rings, and callouts.
          Dark mode is a peer of light, not an afterthought.
        </p>

        <h2>Stack</h2>
        <p>
          React + Babel in-browser, no build step. Posts are authored in{" "}
          <a href="https://sanity.io" target="_blank" rel="noreferrer">Sanity CMS</a>{" "}
          and served via the Sanity CDN. Hosted on Vercel.
        </p>

        <h2>Icons</h2>
        <p>
          <a href="https://lucide.dev" target="_blank" rel="noreferrer">Lucide</a>{" "}
          at default stroke weight. Brand marks are inline SVG in{" "}
          <code>currentColor</code>. No emoji.
        </p>

        <h2>Corrections</h2>
        <p>
          If something here is wrong — typos, technical errors, broken links —
          please <a href="mailto:hello@spencervoorhees.com">email me</a>.
          I update posts in place and credit substantive corrections at the bottom of the affected post.
        </p>
      </div>
    </main>
  );
}

const cpStyles = {
  main: { maxWidth: 720, margin: "0 auto", padding: "56px max(20px, 5vw) 96px" },
  back: {
    display: "inline-flex", gap: 6, alignItems: "center",
    fontSize: 13, color: "var(--fg-tertiary)", textDecoration: "none",
    marginBottom: 40, fontWeight: 500,
  },
  head: { marginBottom: 40 },
  h1: { fontFamily: "var(--font-display)", fontSize: 64, fontWeight: 600, letterSpacing: "-0.024em", lineHeight: 1.05, margin: 0 },
  lede: { marginTop: 18, fontSize: 19, lineHeight: 1.55, color: "var(--fg-secondary)", maxWidth: 580, textWrap: "pretty" },
  prose: { fontSize: 18, lineHeight: 1.7, color: "var(--fg)" },
};

const sfStyles = {
  foot: {
    marginTop: 80,
    borderTop: "1px solid var(--border-subtle)",
    background: "var(--bg)",
  },
  inner: {
    maxWidth: 1080, margin: "0 auto",
    padding: "56px max(20px, 5vw) 32px",
    display: "grid",
    gridTemplateColumns: "1.4fr 1fr 1fr",
    gap: 48,
  },
  innerMobile: {
    maxWidth: 1080, margin: "0 auto",
    padding: "40px max(20px, 5vw) 28px",
    display: "grid",
    gridTemplateColumns: "1fr",
    gap: 32,
  },
  col: {},
  brand: { display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600, letterSpacing: "-0.011em", marginBottom: 10 },
  mark: { display: "inline-flex", alignItems: "center", color: "var(--fg-tertiary)" },
  tag: { fontSize: 13, color: "var(--fg-tertiary)", lineHeight: 1.55, maxWidth: 360 },
  colHead: {
    fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em",
    textTransform: "uppercase", color: "var(--fg-quaternary)",
    marginBottom: 14,
  },
  linkList: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 },
  link: { color: "var(--fg-secondary)", textDecoration: "none", fontSize: 13 },
  bottom: {
    maxWidth: 1080, margin: "0 auto",
    padding: "20px max(20px, 5vw) 40px",
    display: "flex", justifyContent: "space-between", alignItems: "center",
    fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-quaternary)",
    borderTop: "1px solid var(--border-subtle)",
    flexWrap: "wrap", gap: 12,
  },
  copy: {},
  dot: { margin: "0 8px", opacity: 0.5 },
  status: { display: "inline-flex", alignItems: "center", gap: 8, color: "var(--green-500)" },
  statusDot: { width: 6, height: 6, borderRadius: "50%", background: "var(--green-500)" },
};

window.SiteFooter = SiteFooter;
window.ColophonPage = ColophonPage;