// =============================================================
// Document viewer — renders one of the control docs
// =============================================================

const DOC_CONTENT = {
  intent: {
    title: 'INTENT.md',
    eyebrow: 'whynot-control · control document',
    sections: [
      { h: 'Purpose', p: 'whynot-control exists to serve as the control repository for the whynot organisation: a prototype, feedback, and market-signal space for discovering the weird and the useful.' },
      { h: 'Primary utility', list: [
        'capture unusual but potentially useful ideas;',
        'distinguish curiosity from commitment;',
        'shape rough ideas into testable prototypes;',
        'collect early feedback and market signals;',
        'run closed beta concepts in a controlled way;',
        'identify which ideas should move toward Helix, Coulomb, Sloppers, Plenitude, Binky, or Tegwick;',
        'prevent premature productisation.',
      ]},
      { h: 'Operating principle', quote: 'A prototype is a question made tangible. The purpose of a prototype is not to prove that an idea is brilliant. The purpose is to learn what is actually useful, desirable, feasible, or irrelevant.' },
    ],
  },
  scope: {
    title: 'SCOPE.md',
    eyebrow: 'whynot-control · control document',
    sections: [
      { h: 'Current reality', p: 'whynot-control is the control repository for organising prototype exploration and early market-signal capture.' },
      { h: 'In scope', list: ['Prototype idea capture.', 'Prototype classification.', 'Early user feedback notes.', 'Market-signal tracking.', 'Closed beta planning.', 'Experiment records.', 'Promotion recommendations.', 'Agent-assisted drafting and analysis.'] },
      { h: 'Out of scope', list: ['Production implementation.', 'Long-term product maintenance.', 'Payment processing.', 'Legal investment documentation.', 'Public launch operations.', 'Binding financial, legal, or tax conclusions.'] },
      { h: 'Scope guardrail', quote: 'whynot-control explores and validates. It does not absorb all product development.' },
    ],
  },
  operating: {
    title: 'OPERATING_MODEL.md',
    eyebrow: 'whynot-control · control document',
    sections: [
      { h: 'Core rules', list: [
        'Prototypes are questions. Each prototype should express a question about usefulness, desirability, feasibility, or willingness to pay.',
        'Signal beats enthusiasm. An idea should not be promoted only because it is exciting.',
        'Low-cost learning first. Prefer sketches, mockups, demos, landing pages, conversations.',
        'Closed beta before broad launch.',
        'Promotion requires criteria.',
      ]},
      { h: 'Burnout guardrail', quote: 'A prototype can be interesting and still be parked. whynot exists to reduce uncertainty, not to create more obligations.' },
    ],
  },
  pipeline: {
    title: 'PROTOTYPE_PIPELINE.md',
    eyebrow: 'whynot-control · control document',
    sections: [
      { h: 'Stage 0 — Raw capture', p: 'Capture ideas without judging them immediately. Located in inbox/. Done when the idea is saved and no longer needs to be held in memory.' },
      { h: 'Stage 1 — Triage', p: 'Decide whether an idea deserves a prototype card. Outcomes: create card, park, merge, reject.' },
      { h: 'Stage 2 — Prototype card', p: 'Turn the idea into a structured prototype candidate. Located in prototypes/.' },
      { h: 'Stage 3 — Experiment', p: 'Test the idea with minimal cost: concept note, landing page, clickable mockup, CLI/demo script, Wizard-of-Oz, manual concierge test, closed conversation, private beta.' },
      { h: 'Stage 4 — Signal review', p: 'Evaluate what was learned. Interest, usefulness, retention, referral, payment, contribution, strategic fit.' },
      { h: 'Stage 5 — Decision', p: 'Park, iterate, promote, reject, or merge. Promotion requires an explicit record in DECISIONS.md.' },
    ],
  },
  agent: {
    title: 'AGENT_RULES.md',
    eyebrow: 'whynot-control · control document',
    sections: [
      { h: 'General principle', p: 'Agents may help clarify, structure, draft, compare, and analyse prototype ideas. They must not silently turn experiments into product commitments.' },
      { h: 'Allowed', list: ['draft prototype cards', 'classify ideas by lifecycle stage', 'propose smallest useful tests', 'summarise feedback', 'compare prototype candidates', 'improve wording and structure'] },
      { h: 'Forbidden', list: ['create artificial urgency', 'treat all prototype ideas as products', 'infer willingness to pay without evidence', 'present weak signals as strong validation', 'create legal, financial, or investment commitments'] },
      { h: 'Preferred output style', quote: 'Agent outputs should be concise, evidence-oriented, explicit about uncertainty, and careful to separate idea, hypothesis, signal, and decision.' },
    ],
  },
};

function DocView({ docKey }) {
  const doc = DOC_CONTENT[docKey];
  if (!doc) return <div>Doc not found.</div>;
  return (
    <article style={{ maxWidth: 680 }}>
      <Eyebrow>{doc.eyebrow}</Eyebrow>
      <h1 style={{ font: '600 36px/1.1 var(--ff-mono)', letterSpacing: '-0.01em', margin: '12px 0 28px' }}>{doc.title}</h1>
      {doc.sections.map((s, i) => (
        <section key={i} style={{ marginBottom: 36 }}>
          <h2 style={{ font: '500 22px/1.25 var(--ff-sans)', letterSpacing: '-0.005em', margin: '0 0 14px' }}>{s.h}</h2>
          {s.p && <p style={{ margin: 0, font: '400 15px/1.65 var(--ff-sans)', color: 'var(--fg-1)' }}>{s.p}</p>}
          {s.list && (
            <ul style={{ margin: 0, paddingLeft: 18, color: 'var(--fg-1)', font: '400 15px/1.7 var(--ff-sans)' }}>
              {s.list.map((li, j) => <li key={j} style={{ marginBottom: 6 }}>{li}</li>)}
            </ul>
          )}
          {s.quote && (
            <blockquote style={{ margin: 0, paddingLeft: 16, borderLeft: '1px solid var(--border-strong)' }}>
              <p style={{ margin: 0, font: '400 italic 17px/1.55 var(--ff-serif)', color: 'var(--fg-2)' }}>{s.quote}</p>
            </blockquote>
          )}
        </section>
      ))}
      <div style={{ marginTop: 48, padding: '14px 0', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>
        <span>whynot-control / {doc.title}</span>
        <span>A1 · Incubating · 2026</span>
      </div>
    </article>
  );
}

Object.assign(window, { DocView, DOC_CONTENT });