// Blog / Writing page — grouped by category
function PageBlog({ go }) {
  const S = window.SITE;
  const totalCount = S.postGroups.reduce((n, g) => n + g.posts.length, 0);
  const [activeFilter, setActiveFilter] = React.useState("all");

  const groups = activeFilter === "all"
    ? S.postGroups
    : S.postGroups.filter(g => g.hash === activeFilter);

  return (
    <div className="page" data-screen-label="Writing">
      <section className="hero" style={{paddingBottom: 32}}>
        <div className="container">
          <div className="hero-meta">
            <span className="eyebrow">Writing · Essays & notes</span>
            <span className="eyebrow">{totalCount} pieces</span>
          </div>
          <h1 className="serif" style={{fontSize: 'clamp(48px, 7vw, 88px)', lineHeight: 1.0}}>
            Notes, in <em style={{color: 'var(--accent-2)', fontStyle: 'italic'}}>longhand.</em>
          </h1>
          <p className="lede" style={{marginTop: 24, maxWidth: '54ch'}}>
            Writing on engineering, leadership, personal finance, and the
            occasional life lesson. Posts live on softbuild.dev — open any title
            to read.
          </p>

          {/* Filter chips */}
          <div className="flex gap-s" style={{marginTop: 36, flexWrap: 'wrap', gap: 8}}>
            <button
              className={"nav-link" + (activeFilter === "all" ? " active" : "")}
              style={{border: '1px solid var(--rule)'}}
              onClick={() => setActiveFilter("all")}
            >All · {totalCount}</button>
            {S.postGroups.map(g => (
              <button
                key={g.hash}
                className={"nav-link" + (activeFilter === g.hash ? " active" : "")}
                style={{border: '1px solid var(--rule)'}}
                onClick={() => setActiveFilter(g.hash)}
              >#{g.label} · {g.posts.length}</button>
            ))}
          </div>
        </div>
      </section>

      {groups.map((group, gi) => (
        <section key={group.hash}>
          <div className="container">
            <div className="section-head">
              <div className="num">#{group.label}</div>
              <div>
                <h2>{group.label} · <em>{group.posts.length}</em></h2>
              </div>
            </div>
            <div className="post-list">
              {group.posts.map((p, i) => {
                const internal = !!p.slug;
                const linkProps = internal
                  ? { onClick: (e) => { e.preventDefault(); go("post:" + p.slug); }, href: "#post:" + p.slug }
                  : { href: p.url, target: "_blank", rel: "noreferrer" };
                return (
                  <a
                    key={i}
                    {...linkProps}
                    className="post-row"
                    style={{textDecoration: 'none', color: 'inherit'}}
                  >
                    <div className="post-date">{p.date}</div>
                    <div>
                      <div className="post-title">{p.title}</div>
                      <div className="post-excerpt">{p.excerpt}</div>
                    </div>
                    <div className="post-read">Read {internal ? '→' : '↗'}</div>
                  </a>
                );
              })}
            </div>
          </div>
        </section>
      ))}

      <section>
        <div className="container">
          <ConnectStrip />
        </div>
      </section>
    </div>
  );
}

window.PageBlog = PageBlog;