// Projects page — grouped: founded ventures + technical projects
function PageProjects({ go }) {
  const S = window.SITE;
  const totalCount = S.projectGroups.reduce((n, g) => n + g.items.length, 0);

  return (
    <div className="page" data-screen-label="Projects">
      <section className="hero" style={{paddingBottom: 48}}>
        <div className="container">
          <div className="hero-meta">
            <span className="eyebrow">Projects · Selected work</span>
            <span className="eyebrow">{totalCount} entries</span>
          </div>
          <h1 className="serif" style={{fontSize: 'clamp(48px, 7vw, 88px)', lineHeight: 1.0}}>
            Things I have <em style={{color: 'var(--accent-2)', fontStyle: 'italic'}}>shipped.</em>
          </h1>
          <p className="lede" style={{marginTop: 24, maxWidth: '54ch'}}>
            Companies I founded, products that reached real users, and the hands-on
            technical projects I write up to share what I've learned.
          </p>
        </div>
      </section>

      {S.projectGroups.map((group, gi) => (
        <section key={gi}>
          <div className="container">
            <div className="section-head">
              <div className="num">{String(gi + 1).padStart(2, '0')} · {group.label}</div>
              <div>
                <h2>{gi === 0 ? <>The <em>real things.</em></> : <>Hands-on <em>technical writeups.</em></>}</h2>
                <p className="blurb">
                  {gi === 0
                    ? "Companies I founded or co-built. Every entry actually ran in production with real customers."
                    : "Bite-sized technical projects, each published as a writeup on softbuild.dev. Open any of them to read the full piece."}
                </p>
              </div>
            </div>
            <div>
              {group.items.map((p, i) => {
                const internal = !!p.slug;
                const linkProps = internal
                  ? { onClick: (e) => { e.preventDefault(); go("project:" + p.slug); }, href: "#project:" + p.slug }
                  : { href: p.url, target: "_blank", rel: "noreferrer" };
                return (
                  <a
                    key={i}
                    {...linkProps}
                    className="project"
                    style={{textDecoration: 'none', color: 'inherit'}}
                  >
                    <div className="project-num">{String(i + 1).padStart(2, '0')} · {p.date}</div>
                    <div>
                      <h3 className="project-title">{p.name}</h3>
                      <p className="project-desc">{p.tagline}</p>
                    </div>
                    <div className="project-meta">{p.meta} {internal ? '→' : '↗'}</div>
                  </a>
                );
              })}
            </div>
          </div>
        </section>
      ))}

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

window.PageProjects = PageProjects;