const WORK_ITEMS = [
  {
    kind: "Open source",
    chip: "OSS",
    title: "Reaper",
    client: "For the Claude Code ecosystem",
    blurb: "A multi-agent orchestration plugin for Claude Code. Spawn, coordinate, and collect output from parallel agents inside a single workflow.",
    meta: "Plugin · TypeScript"
  },
  {
    kind: "Client software",
    chip: "AEC",
    title: "Atelier",
    client: "Klawiter Group",
    blurb: "Time & project management with real-time performance reporting. Built for studios that need to see profitability as the week unfolds, not after.",
    meta: "Internal tool · Web"
  },
  {
    kind: "Client software",
    chip: "AEC",
    title: "Virtual Business Cards",
    client: "Klawiter Group",
    blurb: "A mobile PWA for in-the-field networking. One tap shares a card; every exchange flows back into the CRM without the paper.",
    meta: "PWA · Mobile-first"
  }
];

function Work({ density }) {
  return (
    <section id="work" className="sl-section">
      <div className="sl-container">
        <div className="sl-section-head">
          <div className="sl-eyebrow">Selected work</div>
          <h2 className="sl-h2">Tools that <em>earn their keep</em>.</h2>
          <p className="sl-lead">
            Every product ships against a real operating business first. If it can't hold up to a working Tuesday, it doesn't hold up anywhere.
          </p>
        </div>

        <div
          className="sl-work-grid"
          style={density === 'two-up' ? { gridTemplateColumns: 'repeat(2, 1fr)' } : undefined}
        >
          {WORK_ITEMS.map(item => (
            <article className="sl-work-card" key={item.title}>
              <div className="sl-work-top">
                <span className="sl-work-tag">{item.kind}</span>
                <span className="sl-work-chip">{item.chip}</span>
              </div>
              <h3 className="sl-work-title">{item.title}</h3>
              <div className="sl-work-client">{item.client}</div>
              <p className="sl-work-blurb">{item.blurb}</p>
              <div className="sl-work-foot">
                <span className="sl-work-foot-meta">{item.meta}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Work = Work;