/* global React */
function WorkSection() {
  return (
    <section className="container section" data-screen-label="06 Work">
      <p className="eyebrow">work</p>
      <h2 className="section-title">Five threads, currently.</h2>
      <p className="section-lead">
        One public, because care needs better tools. Three internal, because some work is worth doing slowly. Open to outside engagements, when our experience belongs in someone else's work.
      </p>

      <div className="work-list">
        <a className="work-feature is-mystery" href="mailto:team@conspand.com?subject=telesis">
          <div className="work-feature-mark">
            <img src="assets/mark-transparent.svg" alt="" />
          </div>
          <div className="work-feature-body">
            <div className="work-feature-meta">internal research · 2026 · ongoing</div>
            <h3 className="work-feature-title">telesis</h3>
            <p className="work-feature-desc">
              A long study of how cooperation outperforms control. Inside telesis, autonomous actors evolve through the conspansive cycle with no rules imposed from above — only consequences. We are looking for the conditions under which love is the strategy that wins.
            </p>
            <div className="work-feature-link">team@conspand.com →</div>
          </div>
        </a>

        <a className="work-feature is-mystery" href="mailto:team@conspand.com?subject=axiom">
          <div className="work-feature-mark">
            <img src="assets/mark-axiom.svg" alt="" />
          </div>
          <div className="work-feature-body">
            <div className="work-feature-meta">internal research · 2026 · ongoing</div>
            <h3 className="work-feature-title">axiom</h3>
            <p className="work-feature-desc">
              A general approach to digitizing law. Not as text but as structure — every rule with its provenance, every change with its date of effect and its date of knowledge. We are building it because freedom and clarity are the same thing seen from two sides.
            </p>
            <div className="work-feature-link">team@conspand.com →</div>
          </div>
        </a>

        <a className="work-feature is-mystery" href="mailto:team@conspand.com?subject=physis">
          <div className="work-feature-mark">
            <img src="assets/mark-physis.svg" alt="" />
          </div>
          <div className="work-feature-body">
            <div className="work-feature-meta">internal research · 2026 · ongoing</div>
            <h3 className="work-feature-title">physis</h3>
            <p className="work-feature-desc">
              A study of health from first principles. The body in conversation with the world it actually lives in — food, movement, breath, light, rest. We are building tools to help people stay well, and to help those who aren't find the support that fits them, not the support that fits the system.
            </p>
            <div className="work-feature-link">team@conspand.com →</div>
          </div>
        </a>

        <a className="work-feature" href="https://charityfile.com" target="_blank" rel="noopener">
          <div className="work-feature-mark">
            <img src="assets/charityfile-sign.svg" alt="charityfile" />
          </div>
          <div className="work-feature-body">
            <div className="work-feature-meta">side project · 2026 · ongoing</div>
            <h3 className="work-feature-title">charityfile</h3>
            <p className="work-feature-desc">
              A small public-good tool we maintain on the side. We do not say much about it here — visit the site directly to see what it is.
            </p>
            <div className="work-feature-link">charityfile.com →</div>
          </div>
        </a>

        <a className="work-feature is-service" href="mailto:team@conspand.com?subject=consulting">
          <div className="work-feature-mark">
            <img src="assets/mark-transparent.svg" alt="" />
          </div>
          <div className="work-feature-body">
            <div className="work-feature-meta">consulting · 23+ years · selectively</div>
            <h3 className="work-feature-title">consulting</h3>
            <p className="work-feature-desc">
              Twenty-three years of building, shipping, and steering technology. We take outside engagements selectively — to help the people who need it build with the same care we apply to our own work. We do not take work we cannot make excellent.
            </p>
            <div className="work-feature-link">team@conspand.com →</div>
          </div>
        </a>
      </div>
    </section>
  );
}

window.WorkSection = WorkSection;