/* ============================================================================
   Projects — portfolio gallery
   ========================================================================== */
function ProjectCard({ p }) {
  return (
    <a className="proj-card">
      <Placeholder label={p.title} style={{ aspectRatio: "16/10" }} />
      <div className="proj-body">
        <div className="between">
          <h3 className="proj-title">{p.title}</h3>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 16, color: "var(--fg-3)" }}>↗</span>
        </div>
        <p className="proj-desc">{p.tagline}</p>
        <div className="proj-meta">
          <span>{p.lang}</span>
          <span>★ {p.stars}</span>
          <span>{p.year}</span>
        </div>
      </div>
    </a>
  );
}

function ProjectsGallery({ go }) {
  return (
    <main className="wrap" style={{ paddingTop: 56, paddingBottom: 72 }}>
      <div className="section-head" style={{ marginBottom: 28 }}>
        <div>
          <Eyebrow idx="03">Projects</Eyebrow>
          <h1 className="section-title" style={{ fontSize: "var(--text-4xl)" }}>Things I've built</h1>
        </div>
        <span className="meta-line">{`open source · ${PROJECTS.length} shipped`}</span>
      </div>
      <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, color: "var(--fg-2)", lineHeight: 1.6, maxWidth: "56ch", margin: "0 0 36px" }}>
        Small, sharp tools — most of them arguments about how software should treat
        your attention, made concrete enough to run.
      </p>
      <div className="proj-grid">
        {PROJECTS.map((p) => <ProjectCard key={p.id} p={p} />)}
      </div>
    </main>
  );
}

Object.assign(window, { ProjectCard, ProjectsGallery });