const { useState: useOssState } = React;

const OSS_PROJECTS = [
  {
    name: "Reaper",
    kind: "Multi-agent orchestration",
    blurb: "A plugin for Claude Code that spawns, coordinates, and collects output from parallel agents. Dispatch specialized sub-agents, fan in their work, keep the main conversation clean.",
    install: "claude plugin install reaper",
    repo: "SpiceLabsHQ/reaper",
    meta: "MIT · Plugin"
  }
];

function OssCard({ project }) {
  const [copied, setCopied] = useOssState(false);
  function copy() {
    navigator.clipboard?.writeText(project.install);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }
  return (
    <div className="sl-oss-card">
      <div className="sl-oss-head">
        <div>
          <h3 className="sl-oss-title">{project.name}</h3>
          <div className="sl-oss-kind">{project.kind}</div>
        </div>
      </div>
      <p className="sl-oss-blurb">{project.blurb}</p>
      <div className="sl-oss-install" onClick={copy} title="Click to copy">
        <code>$ {project.install}</code>
        <span className="sl-oss-copy">{copied ? 'Copied' : 'Copy'}</span>
      </div>
      <div className="sl-oss-bottom">
        <a href={`https://github.com/${project.repo}`} target="_blank" rel="noopener">
          github.com/{project.repo} →
        </a>
        <span className="sl-oss-bottom-meta">{project.meta}</span>
      </div>
    </div>
  );
}

function OpenSource({ treatment }) {
  return (
    <section id="open-source" className="sl-section sl-section-dark">
      <div className="sl-container">
        <div className="sl-oss-intro">
          <div>
            <div className="sl-eyebrow sl-eyebrow-on-dark">Open source</div>
            <h2 className="sl-h2 sl-h2-on-dark">Infrastructure we <em>use ourselves</em>, released for the ecosystem.</h2>
          </div>
          <p className="sl-lead sl-lead-on-dark">
            We publish the agentic tooling we need to do our own client work. If it speeds up our team, it can speed up yours — so we open it up. No community edition, no enterprise tier.
          </p>
        </div>

        <div className="sl-oss-grid-split">
          {OSS_PROJECTS.map(p => <OssCard key={p.name} project={p} />)}
        </div>

        <a href="https://github.com/SpiceLabsHQ" target="_blank" rel="noopener" className="sl-oss-github-bar" style={{textDecoration: 'none'}}>
          <div>
            <div className="gh-label">More on GitHub</div>
            <div className="gh-url">github.com/SpiceLabsHQ</div>
          </div>
          <span style={{fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--spice-red-300)', letterSpacing: '0.04em'}}>Visit org →</span>
        </a>
      </div>
    </section>
  );
}

window.OpenSource = OpenSource;