/* ============================================================
   About — a "Proxa Doc": a Data Product whose Data face is a
   Markdown source and whose Artifact face is stylized HTML.
   Rendered in the shared DPShell (same toolbar/faces as the Org
   Chart and Tool DPs). A user can edit the Artifact inline, or
   Claude can update the .md — the two are two faces of one doc.
   ============================================================ */

// The Data face — the document source (Markdown). Kept in sync with the
// Artifact below; either can be edited.
const ABOUT_MD = `# Cascade Ridge Foods

This workspace is Cascade Ridge Foods as a Proxa Model — one connected,
machine-operable picture of how the company works, that Claude builds,
operates and keeps current.

## What is it?

Cascade Ridge Foods is a mid-market **contract food manufacturer** — 9 lines
across Portland, OR and Lebanon, TN, co-packing natural snacks for ~55 CPG
brands (FY2025 revenue $142.0M, +10.9%). It is encoded here as connected
**hubs**, one per domain, that Claude can compute on, explain and keep in sync.

## How does it work?

- **Hubs — one per domain.** Finance, Customer, Diligence, the Tenney asset.
  The workspace is their composition.
- **Data products, four faces.** Data (the grid), Artifact (the view),
  Control (sync & ownership), Context (memory).
- **Grounded: raw → ODP → ADP.** Every number traces back to a raw system
  export. Nothing floats.
- **Memory you validate.** Claude authors the "why" as Context; you validate
  it to pin it as memory.

## What do I do?

1. **Start in the Finance hub** — open its Dashboard to see the live artifacts.
2. **Open a data product and flip its faces** — Data → Artifact → Control → Context.
3. **Check Org & Team** — the department structure and who owns what.
4. **Validate context** — confirm the Claude-authored items that are right.
5. **Grow the model** — open a Planned hub and ask Claude to build it.
`;

// The lab workspace's own onboarding doc. Same four sections, its own domain —
// see domains.jsx for which workspace is which.
const ABOUT_MD_LAB = `# HLA Typing Lab

This workspace is the lab as a Proxa Model — the assay, the studies it serves
and the judgment behind both, in one representation Claude can compute on.

## What is it?

A high-resolution HLA typing lab. Sequence-based typing feeds three different
questions: **donor–recipient matching**, **vaccine epitope work**, and
**humanized-mouse characterization**. The same assignments read three ways,
which is exactly why they are modelled once instead of three times.

## How does it work?

- **Hubs — one per area.** Typing (the assay) and Studies & Cohorts (who asked,
  for what). Matching, Method & Validation, Ligands and Animal Models are
  identified but not built yet.
- **An assignment is a derivation, not a string.** Every call carries the
  method version and the IMGT/HLA release that produced it, so it can be
  re-derived rather than re-read.
- **Grounded: traces → runs → assignments.** Nothing floats. The reference
  release is a source in its own right.
- **Memory you validate.** Claude proposes the judgment — what ambiguity is
  expected, which cohorts can be reused — and you confirm it.

## What do I do?

1. **Start in the Typing hub** — the re-resolution panel shows what moving to
   3.60.0 actually changed.
2. **Read the Assignment Ledger** — every call with its method and release.
3. **Open Studies & Cohorts** — and the cross-study query it makes possible.
4. **Check the Ambiguity Queue** — split by bench, convention, or your judgment.
5. **Grow the model** — open Matching or Method & Validation and ask Claude to
   build it.
`;

// The Data face: the Markdown source, editable inline.
function AboutDocSource({ md }) {
  return (
    <div className="pdoc-src-wrap">
      <textarea className="pdoc-src" defaultValue={md || ABOUT_MD} spellCheck={false} aria-label="Document source (Markdown)" />
    </div>
  );
}

// The Artifact face: the rendered doc — stylized HTML, editable inline.
function AboutArtifact() {
  const C = {
    ink: 'var(--fg-dark)', base: 'var(--fg-base)', muted: 'var(--fg-muted)',
    line: 'var(--border-subtle, rgba(38,24,17,0.10))', green: 'var(--accent-green)',
  };
  const h2 = { fontSize: 20, fontWeight: 600, color: C.ink, letterSpacing: '-0.01em', margin: '34px 0 8px' };
  return (
    <div className="pdoc" contentEditable suppressContentEditableWarning
      style={{ maxWidth: 760, outline: 'none', color: C.base, fontSize: 15, lineHeight: 1.65 }}>
      <h1 style={{ fontSize: 34, fontWeight: 600, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 12px', lineHeight: 1.1 }}>
        Cascade Ridge Foods
      </h1>
      <p style={{ fontSize: 17, lineHeight: 1.6, color: C.base, margin: 0 }}>
        This workspace is Cascade Ridge Foods as a Proxa Model — one connected, machine-operable picture of how
        the company works, that Claude builds, operates and keeps current.
      </p>

      <h2 style={h2}>What is it?</h2>
      <p style={{ margin: 0 }}>
        Cascade Ridge Foods is a mid-market <strong>contract food manufacturer</strong> — 9 lines across
        Portland, OR and Lebanon, TN, co-packing natural snacks for ~55 CPG brands (FY2025 revenue{' '}
        <span style={{ color: C.green }}>$142.0M</span>, +10.9%). It is encoded here as connected{' '}
        <strong>hubs</strong>, one per domain, that Claude can compute on, explain and keep in sync.
      </p>

      <h2 style={h2}>How does it work?</h2>
      <ul style={{ margin: 0, paddingLeft: 20 }}>
        <li style={{ margin: '6px 0' }}><strong>Hubs — one per domain.</strong> Finance, Customer, Diligence, the Tenney asset. The workspace is their composition.</li>
        <li style={{ margin: '6px 0' }}><strong>Data products, four faces.</strong> Data (the grid), Artifact (the view), Control (sync &amp; ownership), Context (memory).</li>
        <li style={{ margin: '6px 0' }}><strong>Grounded: raw → ODP → ADP.</strong> Every number traces back to a raw system export. Nothing floats.</li>
        <li style={{ margin: '6px 0' }}><strong>Memory you validate.</strong> Claude authors the &ldquo;why&rdquo; as Context; you validate it to pin it as memory.</li>
      </ul>

      <h2 style={h2}>What do I do?</h2>
      <ol style={{ margin: 0, paddingLeft: 20 }}>
        <li style={{ margin: '6px 0' }}><strong>Start in the Finance hub</strong> — open its Dashboard to see the live artifacts.</li>
        <li style={{ margin: '6px 0' }}><strong>Open a data product and flip its faces</strong> — Data → Artifact → Control → Context.</li>
        <li style={{ margin: '6px 0' }}><strong>Check Org &amp; Team</strong> — the department structure and who owns what.</li>
        <li style={{ margin: '6px 0' }}><strong>Validate context</strong> — confirm the Claude-authored items that are right.</li>
        <li style={{ margin: '6px 0' }}><strong>Grow the model</strong> — open a Planned hub and ask Claude to build it.</li>
      </ol>
    </div>
  );
}

// The Artifact face for the lab workspace — same document structure, its own
// domain. (The Cascade Ridge one is AboutArtifact above.)
function AboutArtifactLab() {
  const C = {
    ink: 'var(--fg-dark)', base: 'var(--fg-base)', muted: 'var(--fg-muted)',
    line: 'var(--border-subtle, rgba(38,24,17,0.10))', green: 'var(--accent-green)',
  };
  const h2 = { fontSize: 20, fontWeight: 500, color: C.ink, letterSpacing: '-0.01em', margin: '34px 0 8px' };
  return (
    <div className="pdoc" contentEditable suppressContentEditableWarning
      style={{ maxWidth: 760, outline: 'none', color: C.base, fontSize: 15, lineHeight: 1.65 }}>
      <h1 style={{ fontSize: 34, fontWeight: 500, letterSpacing: '-0.02em', color: C.ink, margin: '0 0 12px', lineHeight: 1.1 }}>
        HLA Typing Lab
      </h1>
      <p style={{ fontSize: 17, lineHeight: 1.6, color: C.base, margin: 0 }}>
        This workspace is the lab as a Proxa Model — the assay, the studies it serves and the judgment
        behind both, in one representation Claude can compute on.
      </p>

      <h2 style={h2}>What is it?</h2>
      <p style={{ margin: 0 }}>
        A high-resolution HLA typing lab. Sequence-based typing feeds three different questions —{' '}
        <strong>donor–recipient matching</strong>, <strong>vaccine epitope work</strong> and{' '}
        <strong>humanized-mouse characterization</strong>. The same assignments read three ways, which is
        exactly why they are modelled once instead of three times.
      </p>

      <h2 style={h2}>How does it work?</h2>
      <ul style={{ margin: 0, paddingLeft: 20 }}>
        <li style={{ margin: '6px 0' }}><strong>Hubs — one per area.</strong> Typing (the assay) and Studies &amp; Cohorts (who asked, for what). Matching, Method &amp; Validation, Ligands and Animal Models are identified but not built yet.</li>
        <li style={{ margin: '6px 0' }}><strong>An assignment is a derivation, not a string.</strong> Every call carries the method version and the IMGT/HLA release that produced it, so it can be re-derived rather than re-read.</li>
        <li style={{ margin: '6px 0' }}><strong>Grounded: traces → runs → assignments.</strong> Nothing floats. The reference release is a source in its own right.</li>
        <li style={{ margin: '6px 0' }}><strong>Memory you validate.</strong> Claude proposes the judgment — what ambiguity is expected, which cohorts can be reused — and you confirm it.</li>
      </ul>

      <h2 style={h2}>What do I do?</h2>
      <ol style={{ margin: 0, paddingLeft: 20 }}>
        <li style={{ margin: '6px 0' }}><strong>Start in the Typing hub</strong> — the re-resolution panel shows what moving to <span style={{ color: C.green }}>3.60.0</span> actually changed.</li>
        <li style={{ margin: '6px 0' }}><strong>Read the Assignment Ledger</strong> — every call with its method and release.</li>
        <li style={{ margin: '6px 0' }}><strong>Open Studies &amp; Cohorts</strong> — and the cross-study query it makes possible.</li>
        <li style={{ margin: '6px 0' }}><strong>Check the Ambiguity Queue</strong> — split by bench, convention, or your judgment.</li>
        <li style={{ margin: '6px 0' }}><strong>Grow the model</strong> — open Matching or Method &amp; Validation and ask Claude to build it.</li>
      </ol>
    </div>
  );
}

function AboutPage({ domain }) {
  const isLab = domain === 'lab';
  const md = isLab ? ABOUT_MD_LAB : ABOUT_MD;
  const Artifact = isLab ? AboutArtifactLab : AboutArtifact;
  const orgName = isLab ? 'the HLA Typing Lab' : 'Cascade Ridge';
  const faces = [
    { key: 'data', label: 'Data', render: () => <AboutDocSource md={md} /> },
    { key: 'artifact', label: 'Artifact', render: () => <div className="dps__artifact">{<Artifact />}</div> },
    { key: 'control', label: 'Control', render: () => <window.ToolControlFace source="ONBOARDING.md" /> },
    { key: 'context', label: 'Context', render: () => (
        <window.ToolContextFace
          what={`The onboarding doc for this workspace — what ${orgName} is, how the model works, and how to get started.`}
          why="New members get oriented without a walkthrough, and Claude keeps it current as the model grows." />
      ) },
  ];
  return (
    <main className="main" data-screen-label={`About — ${isLab ? 'HLA Typing Lab' : 'Cascade Ridge'}`}>
      <div className="ws-doc">
        <window.DPShell name="Getting Started" author="Claude · maintained" faces={faces} initial="artifact"
          icon={<window.IconDoc size={18} />} />
      </div>
    </main>
  );
}
window.AboutPage = AboutPage;