// WORK PAGE — Relay Consulting
function WorkHero() {
  return (
    <section className="page-hero wrap max">
      <div className="page-hero-inner reveal">
        <span className="eyebrow">— Work</span>
        <h1>A few considered <em>partnerships.</em></h1>
        <p className="lede">
          Work that brings the practical details together — across websites, workplace tools, email, domains, and the quiet foundations a business relies on.
        </p>
      </div>
    </section>
  );
}

function ProjectCard({ p, i }) {
  return (
    <article className="card project-card reveal" data-delay={String((i % 3) + 1)}>
      <div className="card-meta">
        <StatusPill status={p.status} active={p.active} />
      </div>
      <h3>{p.name}</h3>
      <p>{p.tagline}</p>
      {p.stack && (
        <div className="stack-list">
          <div className="stack-label">Stack</div>
          <ul>
            {p.stack.map((s) => (
              <li key={s.name}>
                <img src={s.src} alt="" loading="lazy" />
                <strong>{s.name}</strong>
              </li>
            ))}
          </ul>
        </div>
      )}
    </article>
  );
}

function WorkPage() {
  return (
    <Page active="work">
      <WorkHero />
      <section className="section short wrap max">
        <div className="card-grid" style={{ '--cols': 3 }}>
          {PROJECTS.map((p, i) => <ProjectCard key={p.name} p={p} i={i} />)}
        </div>
      </section>
      <CTA />
    </Page>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<WorkPage />);