/* global React */
function WorkSection() {
  return (
    <section className="container section" data-screen-label="06 Work">
      <p className="eyebrow">work</p>
      <h2 className="section-title">What we take responsibility for.</h2>
      <p className="section-lead">
        Conspand is a small group of senior builders and architects. For more than two decades we have built and operated systems that organizations depend on — at the level of architect and CTO, and still writing the code ourselves.
      </p>

      <div className="work-rows">
        <div className="work-row">
          <div className="work-row-label">track record</div>
          <div>
            <p className="work-row-body work-row-intro">
              The systems behind that sentence are real. We led the teams, owned the outcomes, and kept writing the code.
            </p>
            <ul className="work-row-list">
              <li>Services that carried hundreds of thousands of requests a second.</li>
              <li>Fortune 500 operational platforms run around the clock.</li>
              <li>Public systems still in service on architecture we wrote two decades ago.</li>
              <li>Products taken from concept to production.</li>
              <li>Teams led through major transitions.</li>
            </ul>
            <p className="work-row-note">Selected references and specific engagements can be discussed privately, under NDA.</p>
          </div>
        </div>

        <div className="work-row">
          <div className="work-row-label">when people call us</div>
          <div>
            <p className="work-row-body work-row-intro">People usually call after the cost of uncertainty, delay, or a wrong decision has grown larger than the cost of experienced ownership.</p>
            <ul className="work-row-list">
              <li>A product has to reach production — and no one trusts the current plan. The cost of getting it wrong only grows from here.</li>
              <li>A system has become mission-critical, and the complexity inside it is held by no one. When it breaks, no one will know why.</li>
              <li>A founding engineer or CTO is leaving. The system stays; the understanding of it walks out with them.</li>
              <li>An initiative is behind, and no one can confidently say why. Until that is understood, every new estimate is a guess.</li>
              <li>An architecture decision is on the table whose consequences will last years.</li>
              <li>Leadership needs technical judgment it can trust — not more headcount.</li>
              <li>An AI initiative is creating more uncertainty than clarity, and the spending continues anyway.</li>
            </ul>
          </div>
        </div>

        <div className="work-row">
          <div className="work-row-label">how engagements begin</div>
          <dl className="engage-list">
            <div className="engage-item">
              <dt>fractional CTO / technical leadership</dt>
              <dd>Judgment at the top when you need someone to own the hard calls, not another hire to manage.</dd>
            </div>
            <div className="engage-item">
              <dt>architecture ownership</dt>
              <dd>Someone to own the shape of the system and stand behind decisions that will outlive this quarter.</dd>
            </div>
            <div className="engage-item">
              <dt>delivery ownership</dt>
              <dd>We carry an initiative to production and answer for whether it gets there.</dd>
            </div>
            <div className="engage-item">
              <dt>critical initiative recovery</dt>
              <dd>A stalled or failing initiative, taken over and brought back to a place people can trust.</dd>
            </div>
            <div className="engage-item">
              <dt>modernization of mission-critical systems</dt>
              <dd>Systems too important to replace and too old to ignore, evolved without breaking what depends on them.</dd>
            </div>
            <div className="engage-item">
              <dt>AI-enabled product development</dt>
              <dd>Products built with AI where it earns its place, with real engineering judgment behind it.</dd>
            </div>
          </dl>
        </div>

        <div className="work-row">
          <div className="work-row-label">how we work</div>
          <div>
            <p className="work-distinction">
              A contractor contributes effort. A consultant contributes advice. An agency contributes capacity. Conspand contributes responsibility.
            </p>
            <p className="work-row-body">
              We take responsibility for the outcome — the judgment, the architecture, the execution, the hard calls — and carry it until the thing is real and the people around it can stand on it. We are hired because someone must own the result. When we are done, what we built is yours, and it is understood.
            </p>
            <p className="work-row-note">
              We use AI where it creates leverage — building AI-enabled products, modernizing systems around it, putting real engineering judgment behind it. We do not sell AI theater.
            </p>
          </div>
        </div>

        <div className="work-row">
          <div className="work-row-label">who does the work</div>
          <p className="work-row-body">
            Conspand began with one person — Andrey — and grows only by people he has worked beside and would trust with his own systems. This is not one person renting out his hours. Every engagement is carried by senior practitioners — architects and principal engineers who have owned systems of their own. No anonymous staffing. No offshore body shop. No junior leverage dressed up as a team. Anyone working under this name has already earned trust through real work. You are not hiring a pair of hands. You are trusting a standard — one meant to outlast any single person who carries it.
          </p>
        </div>

        <div className="work-row">
          <div className="work-row-label">how we choose</div>
          <p className="work-row-body">
            We do not accept every engagement, and not every problem needs us. We take responsibility carefully, only where we believe we can carry it. We are available when the fit is right — not before.
          </p>
        </div>

        <div className="work-row">
          <div className="work-row-label">what success looks like</div>
          <ul className="work-row-list">
            <li>Systems become understandable again.</li>
            <li>Teams move with less fear.</li>
            <li>Critical decisions get clearer.</li>
            <li>Delivery becomes predictable.</li>
            <li>Complexity goes down, not up.</li>
            <li>Responsibility is visible — someone owns it.</li>
          </ul>
        </div>
      </div>

      <div className="work-invest">
        <h2 className="section-title">What we invest in.</h2>
        <p className="section-lead">
          Between engagements we build our own systems — long-horizon research into the problems we think matter most. They are evidence of how we think: from first principles, over long time horizons, about things that last.
        </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 · 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 · 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 · 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 is-mystery" 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">public good · 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>
        </div>
      </div>
    </section>
  );
}

window.WorkSection = WorkSection;
