/* Documentation — landing page for the Kestrel V2.0 methodology white paper.
   Linked from the site footer and from the in-page methodology footnotes. */
const Documentation = ({ setRoute }) => {
  const PDF_HREF = 'assets/Kestrel_WhitePaper_methodologyv2.pdf';
  const PDF_NAME = 'Kestrel_WhitePaper_methodologyv2.pdf';

  const sections = [
    { n: '1',  id: 'context',     t: 'Context and motivation',
      sub: ['The construct being measured', 'The disclosure environment', 'The codebook Kestrel implements'],
      body: 'Frames Kestrel as a measurement instrument applied to an adversarial corpus. Sustainability reports are produced under reputational and investor-facing incentives, so a permissive classifier inflates prevalence. Conservatism is the route to construct validity, not stylistic preference.',
    },
    { n: '2',  id: 'architecture', t: 'Architecture',
      sub: ['Five-stage pipeline · synchronous and batch variants'],
      body: 'Five stages: text extraction (PyMuPDF, page provenance preserved), chunking (100–220 word window), classification (one passage per request, strict JSON schema), validation and rules-layer normalisation, and persistence (stable passage IDs, version stamp on every row). The synchronous and batch pipelines share identical prompt, schema, and rules.',
    },
    { n: '3',  id: 'schema',      t: 'The classification schema',
      sub: ['Five diagnostic dimensions', 'Three hazard flags', 'Type and disposition fields', 'Why derivation rather than declaration'],
      body: 'Fourteen fields per passage. The primary label is derived from the diagnostic fields by the rules layer rather than declared by the model — this makes inconsistent rows impossible by construction (no positive row with linkage = none, no positive row with internal-only beneficiaries).',
    },
    { n: '4',  id: 'decisions',   t: 'Defending the core design decisions',
      sub: [
        'Conservative default', 'Text-only evidence rule', 'Community-extension test',
        'Four-part strict positive requirement', 'Two-layer decision architecture',
        'Evidence strength ordinal scale', 'Initiative type hierarchy',
        'Finance-only flag', 'Remediation flag', 'Fallback defaults',
        'Chunking window: 100–220 words', 'One passage per request',
      ],
      body: 'Twelve design decisions, each defended on the same grounds: which failure mode of naive CSV classification it prevents, and why the alternative (trusting the model, relaxing the rule, batching passages) reproduces the dynamic the greenwashing literature has documented. The asymmetry is deliberate — false negatives are a measurement inefficiency; false positives are a measurement failure.',
    },
    { n: '5',  id: 'fidelity',    t: 'Fidelity to the gold standard codebook',
      sub: ['Codebook-to-implementation trace table', 'Treatment of "aspirational" linkage language'],
      body: 'A row-by-row trace from each codebook element to the specific Kestrel rule that operationalises it. One material divergence is documented openly: aspirational linkage language is collapsed into linkage_strength = none rather than preserved as a separate category, because it is not a realised causal link.',
    },
    { n: '6',  id: 'controls',    t: 'Quality controls',
      sub: ['Schema validation', 'Rules-layer enforcement', 'Justification trail'],
      body: 'Three controls run on every row: schema validation routes malformed outputs to a fallback rather than the analysis, the rules layer can only downgrade labels (never upgrade — a safety property), and every conservative downgrade appends a fixed-vocabulary reason to the justification field for auditability.',
    },
    { n: '7',  id: 'validation',  t: 'Empirical validation',
      sub: ['Internal reliability across repeated runs', 'Agreement with an expert human coder', 'Versioning and the V3.0 track'],
      body: 'Two exercises: (i) five independent runs per passage gave Fleiss κ = 0.822 on the headline question, with 77.2% of passages receiving the identical label across all five runs and 99.4% receiving the same label in at least three; (ii) a 34-passage blind validation against an expert human coder showed 85.3% binary agreement on the headline shared-value question.',
    },
    { n: '8',  id: 'limitations', t: 'Limitations and future work',
      sub: ['Model is not a human coder', 'Chunk boundaries may fragment arguments', 'Domain specificity', 'Model dependence'],
      body: 'Stated openly: the rules layer cannot eliminate model error, the chunking window can split a CSV argument across boundaries, the prompt is calibrated for mining-sector reports, and a model swap triggers a re-validation cycle. The V3.0 development track targets the residual disagreement at the transactional/transitional and ambiguous/negative boundaries.',
    },
    { n: '9',  id: 'conclusion',  t: 'Conclusion',
      sub: ['Kestrel as a measurement instrument'],
      body: 'The distinctive contribution is not the use of a language model, which is now routine, but the operationalisation: translating a human-written codebook into a system that applies it consistently, flags its own uncertainty, and exposes its reasoning in an auditable, versioned output.',
    },
  ];

  const references = [
    { a: 'Delmas, M. A. and Burbano, V. C. (2011).', t: '"The drivers of greenwashing."', j: 'California Management Review', v: '54(1), 64–87.' },
    { a: 'Marquis, C., Toffel, M. W. and Zhou, Y. (2016).', t: '"Scrutiny, norms, and selective disclosure: A global study of greenwashing."', j: 'Organization Science', v: '27(2), 483–504.' },
    { a: 'Porter, M. E. and Kramer, M. R. (2011).', t: '"Creating shared value."', j: 'Harvard Business Review', v: '89(1), 62–77.' },
    { a: 'Fleiss, J. L. (1971).', t: '"Measuring nominal scale agreement among many raters."', j: 'Psychological Bulletin', v: '76(5), 378–382.' },
  ];

  const scrollToId = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section className="section first">
      <div className="site-wrap" style={{maxWidth:880}}>
        <EyebrowRow label="Documentation"/>

        <h1 style={{fontSize:48,lineHeight:'56px',fontWeight:600,letterSpacing:'-0.02em',marginBottom:16,maxWidth:760}}>
          Methodology white paper
        </h1>
        <p className="lede" style={{maxWidth:680,color:'var(--ink-2)',marginBottom:32}}>
          A complete, citable account of how Kestrel V2.0 reads a sustainability report and assigns each passage a structured judgement about Creating <Term name="shared-value">Shared Value</Term> &mdash; the schema, the rules, the conservative defaults, and the empirical validation behind them.
        </p>

        {/* Document card — metadata + download CTA */}
        <Reveal>
          <div style={{
            border:'1px solid var(--line)', borderRadius:12, background:'var(--canvas)',
            padding:'28px 32px', marginBottom:48, display:'grid',
            gridTemplateColumns:'48px 1fr auto', gap:24, alignItems:'center',
          }}>
            <div style={{
              width:48, height:48, borderRadius:10, background:'var(--sage-tint)',
              display:'flex', alignItems:'center', justifyContent:'center', color:'var(--moss-deep)',
            }}>
              <Icon name="doc" size={22}/>
            </div>
            <div>
              <div style={{fontSize:15,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.01em'}}>
                Kestrel V2.0: A Conservative, Rule-Governed Classifier for Creating Shared Value in Corporate ESG Reporting
              </div>
              <div style={{fontSize:12,color:'var(--ink-3)',marginTop:6}} className="tabular">
                Design White Paper &middot; April 2026 &middot; 15 pages &middot; PDF, 219 KB
              </div>
            </div>
            <div style={{display:'flex',gap:10,alignItems:'center'}}>
              <a className="btn btn-primary" href={PDF_HREF} download={PDF_NAME}
                 style={{padding:'10px 16px',fontSize:13,textDecoration:'none',display:'inline-flex',alignItems:'center',gap:8}}>
                <Icon name="download" size={14}/> Download PDF
              </a>
              <a className="btn btn-text" href={PDF_HREF} target="_blank" rel="noopener"
                 style={{fontSize:13,textDecoration:'none',display:'inline-flex',alignItems:'center',gap:6}}>
                Open in browser <Icon name="external" size={12}/>
              </a>
            </div>
          </div>
        </Reveal>

        {/* Executive summary */}
        <div style={{marginBottom:56}}>
          <div className="eyebrow" style={{marginBottom:12}}>Executive summary</div>
          <p style={{fontSize:14,lineHeight:'24px',color:'var(--ink-2)',margin:'0 0 12px'}}>
            Kestrel is an automated classifier that reads mining-sector sustainability and annual reports and assigns each passage a structured judgement about whether it describes genuine Creating Shared Value (CSV) activity in the sense introduced by Porter and Kramer (2011). For each passage the program returns fourteen structured fields: a primary label (<em>positive / ambiguous / negative</em>), an initiative type, a CSV pillar, five diagnostic dimensions, three hazard flags, a confidence rating, and a justification.
          </p>
          <p style={{fontSize:14,lineHeight:'24px',color:'var(--ink-2)',margin:'0 0 12px'}}>
            Every substantive rule is a direct operationalisation of a human-written codebook. The program&rsquo;s distinctive contribution is the operationalisation itself: a two-layer decision system in which the language model extracts evidence and a deterministic rules layer assigns the label. The design philosophy is conservatism throughout &mdash; a passage is labelled <em>positive</em> only when all four CSV definitional elements are simultaneously and explicitly present.
          </p>
        </div>

        {/* Table of contents */}
        <div style={{marginBottom:64}}>
          <div className="eyebrow" style={{marginBottom:16}}>Contents</div>
          <div style={{borderTop:'1px solid var(--line)'}}>
            {sections.map((s,i)=>(
              <a key={s.id} href={`#${s.id}`}
                 onClick={e=>{e.preventDefault();scrollToId(s.id);}}
                 style={{
                   display:'grid', gridTemplateColumns:'48px 1fr auto', gap:16,
                   padding:'18px 0', borderBottom:'1px solid var(--line)',
                   alignItems:'center', textDecoration:'none', color:'inherit',
                 }}>
                <div className="eyebrow tabular" style={{color:'var(--moss)'}}>{`0${s.n}`.slice(-2)}</div>
                <div>
                  <div style={{fontSize:14,fontWeight:500,color:'var(--ink)'}}>{s.t}</div>
                  {s.sub && s.sub.length > 0 && (
                    <div style={{fontSize:12,color:'var(--ink-3)',marginTop:4,lineHeight:'18px'}}>
                      {s.sub.join(' · ')}
                    </div>
                  )}
                </div>
                <Icon name="chevron-right" size={14} color="var(--ink-3)"/>
              </a>
            ))}
            <a href="#references" onClick={e=>{e.preventDefault();scrollToId('references');}}
               style={{
                 display:'grid', gridTemplateColumns:'48px 1fr auto', gap:16,
                 padding:'18px 0', borderBottom:'1px solid var(--line)',
                 alignItems:'center', textDecoration:'none', color:'inherit',
               }}>
              <div className="eyebrow tabular" style={{color:'var(--moss)'}}>R</div>
              <div style={{fontSize:14,fontWeight:500,color:'var(--ink)'}}>References</div>
              <Icon name="chevron-right" size={14} color="var(--ink-3)"/>
            </a>
          </div>
        </div>

        {/* Per-section synopses */}
        {sections.map(s => (
          <div key={s.id} id={s.id} style={{marginBottom:48,scrollMarginTop:96}}>
            <div className="eyebrow tabular" style={{color:'var(--moss)',marginBottom:8}}>
              Section {s.n}
            </div>
            <h3 style={{fontSize:24,lineHeight:'32px',fontWeight:600,color:'var(--ink)',letterSpacing:'-0.015em',margin:'0 0 14px'}}>
              {s.t}
            </h3>
            <p style={{fontSize:14,lineHeight:'24px',color:'var(--ink-2)',margin:'0 0 14px',maxWidth:760}}>
              {s.body}
            </p>
            {s.sub && s.sub.length > 1 && (
              <div style={{marginTop:14,padding:'14px 18px',background:'var(--canvas-2)',borderRadius:8,border:'1px solid var(--line)'}}>
                <div className="eyebrow" style={{marginBottom:8,fontSize:10}}>Subsections</div>
                <ul style={{margin:0,paddingLeft:18}}>
                  {s.sub.map((x,i)=>(
                    <li key={i} style={{fontSize:13,lineHeight:'22px',color:'var(--ink-2)'}}>{x}</li>
                  ))}
                </ul>
              </div>
            )}
            <div style={{marginTop:18,fontSize:12,color:'var(--ink-3)'}}>
              Read the full section in the{' '}
              <a href={PDF_HREF} target="_blank" rel="noopener"
                 style={{color:'var(--ink-2)',textDecoration:'underline'}}>white paper PDF</a>.
            </div>
          </div>
        ))}

        {/* References */}
        <div id="references" style={{marginTop:72,paddingTop:48,borderTop:'1px solid var(--line)',scrollMarginTop:96}}>
          <div className="eyebrow" style={{marginBottom:16}}>References</div>
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            {references.map((r,i)=>(
              <div key={i} style={{fontSize:13,lineHeight:'22px',color:'var(--ink-2)'}}>
                {r.a} {r.t} <em>{r.j}</em>, {r.v}
              </div>
            ))}
          </div>
        </div>

        {/* Citation block */}
        <div style={{marginTop:48,padding:'20px 24px',background:'var(--canvas-2)',border:'1px solid var(--line)',borderRadius:8}}>
          <div className="eyebrow" style={{marginBottom:10,fontSize:10}}>Cite this document</div>
          <div style={{fontSize:13,lineHeight:'22px',color:'var(--ink-2)',fontFamily:'var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)'}}>
            Kestrel Analytics (2026). <em>Kestrel V2.0: A Conservative, Rule-Governed Classifier for Creating Shared Value in Corporate ESG Reporting</em>. Design White Paper, April 2026.
          </div>
        </div>

        {/* Legal disclaimer */}
        <div style={{marginTop:24,padding:'20px 24px',background:'var(--canvas-2)',border:'1px solid var(--line)',borderRadius:8}}>
          <div className="eyebrow" style={{marginBottom:10,fontSize:10}}>Legal</div>
          <div style={{fontSize:13,lineHeight:'22px',color:'var(--ink-2)'}}>
            © 2026 Kestrel Analytics. All rights reserved.
            <div style={{marginTop:10}}>
              This publication may be cited with appropriate attribution.
              No part of this document may be reproduced, distributed, or used for commercial purposes without prior written permission.
            </div>
          </div>
        </div>

        {/* Back navigation */}
        <div style={{marginTop:56,paddingTop:24,borderTop:'1px solid var(--line)',display:'flex',gap:18,flexWrap:'wrap'}}>
          <button className="btn btn-text" style={{fontSize:13}} onClick={()=>setRoute({page:'method'})}>
            <Icon name="arrow-right" size={12} style={{marginRight:6,transform:'rotate(180deg)'}}/> Back to Methodology
          </button>
          <button className="btn btn-text" style={{fontSize:13}} onClick={()=>setRoute({page:'home'})}>
            Home
          </button>
        </div>
      </div>
    </section>
  );
};
window.Documentation = Documentation;
