/* NowPage — /now page in the Derek Sivers tradition. */

function NowPage({ onBack }) {
  return (
    <main style={nowStyles.main}>
      <a href="#" onClick={(e) => { e.preventDefault(); onBack(); }} style={nowStyles.back}>
        <i data-lucide="arrow-left" style={{ width: 14, height: 14 }}></i>
        Back to writing
      </a>

      <header style={nowStyles.head}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>What I'm doing now</div>
        <h1 style={nowStyles.h1}>Now.</h1>
        <p style={nowStyles.lede}>
          A snapshot of what's occupying me at the moment. Inspired by{" "}
          <a href="https://nownownow.com/about" target="_blank" rel="noreferrer">Derek Sivers' /now</a>.
          Updated when something material changes.
        </p>
        <div style={nowStyles.stamp}>
          <span style={nowStyles.stampDot}></span>
          Updated <strong style={nowStyles.stampStrong}>May 17, 2026</strong> · Vancouver, WA
        </div>
      </header>

      <div className="prose" style={nowStyles.prose}>
        <h2>Work</h2>
        <p>
          Working as a solutions architect and software engineer. Most of what I'm
          building is under NDA — the side projects on{" "}
          <a href="https://spencervoorhees.com">spencervoorhees.com</a> are what's
          left of the public record.
        </p>

        <h2>Reading</h2>
        <ul style={nowStyles.ul}>
          <li><em>Build</em>, Tony Fadell</li>
          <li><em>Apple: The First 50 Years</em></li>
          <li><em>Androids: The Team That Built the Android Operating System</em>, Chet Haase</li>
        </ul>

        <h2>Building</h2>
        <p>
          A personal AI OS — a second brain wired to Claude, built around an
          Obsidian vault with custom tooling for search, synthesis, and context
          retrieval. The goal is making the right knowledge surface automatically
          rather than having to go find it. Claude is already in the loop; OpenAI
          Codex is next.
        </p>

        <h2>Listening</h2>
        <ul style={nowStyles.ul}>
          <li>wvfrm podcast</li>
          <li>nbsplv</li>
          <li>The Midnight</li>
          <li>Uncoverage (YouTube)</li>
        </ul>
      </div>

      <footer style={nowStyles.foot}>
        <span>This is a <a href="https://nownownow.com/about" target="_blank" rel="noreferrer">/now page</a>.</span>
      </footer>
    </main>
  );
}

const nowStyles = {
  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" },
  stamp: {
    marginTop: 22, display: "inline-flex", alignItems: "center", gap: 10,
    fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-tertiary)",
  },
  stampDot: { width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", display: "inline-block" },
  stampStrong: { color: "var(--fg-secondary)", fontWeight: 500 },
  prose: { fontSize: 18, lineHeight: 1.7, color: "var(--fg)" },
  ul: { paddingLeft: 22, margin: "0 0 1.2em" },
  foot: {
    marginTop: 56, paddingTop: 24,
    borderTop: "1px solid var(--border-subtle)",
    fontSize: 13, color: "var(--fg-tertiary)",
  },
};

window.NowPage = NowPage;