/* ============================================================================
   Writing — index list + single article reader
   ========================================================================== */
function PostRow({ post, onOpen }) {
  return (
    <a className="post-row" onClick={() => onOpen(post)}>
      <span className="num">№ {post.num}</span>
      <div className="body">
        <Eyebrow>{post.cat} · {post.tags.map((t) => "#" + t).join(" ")}</Eyebrow>
        <h3 className="ptitle" style={{ marginTop: 10 }}>{post.title}</h3>
        <p className="pdesc">{post.desc}</p>
        <span className="meta-line">{post.date}<span>·</span>{post.read}</span>
      </div>
      <span className="parrow">↗</span>
    </a>
  );
}

function WritingIndex({ go, openPost, filter: filterProp, setFilter: setFilterProp }) {
  const allTags = ["all", "philosophy", "technology", "history", "politics", "science"];
  const [filterLocal, setFilterLocal] = React.useState("all");
  const filter = filterProp != null ? filterProp : filterLocal;
  const setFilter = setFilterProp || setFilterLocal;
  const shown = filter === "all" ? POSTS : POSTS.filter((p) => p.tags.includes(filter));
  return (
    <main className="wrap" style={{ paddingTop: 56 }}>
      <div className="section-head" style={{ marginBottom: 28 }}>
        <div>
          <Eyebrow idx="02">Writing</Eyebrow>
          <h1 className="section-title" style={{ fontSize: "var(--text-4xl)" }}>Essays & notes</h1>
        </div>
        <span className="meta-line">{`${POSTS.length} pieces · since 2024`}</span>
      </div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
        {allTags.map((t) => (
          <Tag key={t} on={filter === t} onClick={() => setFilter(t)}>
            {t === "all" ? "All" : "#" + t}
          </Tag>
        ))}
      </div>
      <div>
        {shown.map((p) => <PostRow key={p.id} post={p} onOpen={openPost} />)}
      </div>
    </main>
  );
}

function ArticleReader({ post, go, openPost }) {
  const p = post || POSTS[0];
  const more = POSTS.filter((x) => x.id !== p.id).slice(0, 2);
  return (
    <main>
      <div className="wrap-read">
        <a className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => go("writing")}>
          ← <span className="u">All writing</span>
        </a>
      </div>
      <div className="wrap-read">
        <header className="article-head">
          <Eyebrow idx={p.num}>{p.cat} · {p.tags.map((t) => "#" + t).join(" ")}</Eyebrow>
          <h1 className="article-title">{p.title}</h1>
          <p className="article-lead">{p.desc}</p>
          <div className="article-meta">
            <span className="meta-line">{p.date}<span>·</span>{p.read}<span>·</span>~1,900 words</span>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="icon-btn"><Icon name="bookmark" size={16} /></button>
              <button className="icon-btn"><Icon name="share" size={16} /></button>
            </div>
          </div>
        </header>
      </div>

      <div className="wrap-read">
        <article className="prose with-notes">
          <p>
            There's a version of this argument that's been made a thousand times, and
            you've already filed it under <em>obvious</em>: attention is finite, the
            feed is infinite, be careful. I want to make a slightly sharper claim<sup className="fn-mark">1</sup>.
          </p>
          <div className="mnote accent">↳ Sharper, and therefore easier to be wrong about. That's the trade.</div>
          <p>
            Attention isn't just scarce — it's the <em>only</em> input I have left
            that I can't borrow, batch, or buy back at a markup. Money compounds.
            Tools multiply. But the hour I spend half-here, half-scrolling doesn't
            return at a discount later. It's simply gone, and quietly.
          </p>
          <h2>The economics of being here</h2>
          <p>
            Treat focus as capital and the usual productivity advice inverts. The
            question isn't "how do I do more in this hour" but "what is this hour's
            principal, and am I spending it or lighting it on fire."
          </p>
          <div className="pullquote">
            "Every interface encodes a theory of the person using it — and most of
            them are betting you won't notice."
          </div>
          <p>
            Below is the smallest change that moved the needle for me: a single
            config flag that turns the day's first surface from a feed into a blank
            page.
          </p>
          <pre className="codeblock"><span className="c"># the only setting that mattered</span>{"\n"}startup.surface = "blank"   <span className="c">// not "feed"</span>{"\n"}notifications.batch = "09:00, 17:00"</pre>
          <figure className="fig">
            <Placeholder label="Figure 1 — attention vs. output, 90 days" style={{ aspectRatio: "16/9" }} />
            <figcaption><span className="crosshair" style={{ width: 9, height: 9 }} /> Fig 1. Self-reported focus plotted against shipped work.</figcaption>
          </figure>
          <p>
            None of this is a system you should copy wholesale. It's an argument,
            and arguments are meant to be tested against your own life<sup className="fn-mark">2</sup>. So
            here's the next action, which is the whole point of writing this down.
          </p>
          <div className="mnote">A claim I keep re-testing against history — see the printing-press note.</div>

          <div className="footnotes">
            <p className="fn"><sup>1</sup> <span>The sharper a claim, the more useful it is to be wrong about precisely.</span></p>
            <p className="fn"><sup>2</sup> <span>If it survives contact with a real week, keep it. If not, discard without ceremony.</span></p>
          </div>
        </article>
      </div>

      <div className="wrap-read" style={{ paddingBottom: 56 }}>
        <div className="next-action">
          <div>
            <p className="na-t">Your next action</p>
            <p className="na-d">Set one surface to blank tomorrow morning — then tell me what changed.</p>
          </div>
          <Button variant="primary" onClick={() => go("subscribe")}>Get the next essay →</Button>
        </div>
      </div>

      <div className="wrap" style={{ paddingBottom: 72 }}>
        <Eyebrow idx="—">Keep reading</Eyebrow>
        <div style={{ marginTop: 12 }}>
          {more.map((m) => <PostRow key={m.id} post={m} onOpen={openPost} />)}
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { PostRow, WritingIndex, ArticleReader });