// Process & Methodology — per-engagement deep dives
// Each engagement gets its own scrollable section with phase breakdown + bespoke schematic.

const ENGAGEMENT_FLOWS = [
  {
    id: 'mediation',
    n: '01',
    title: 'Mediation',
    tagline: 'Privately-administered mediation for technically complex commercial disputes.',
    phases: [
      { p: 'Pre-session', d: 'Position statements (confidential to mediator), key-evidence designation, technical briefings where the matter requires them. Daniel issues a session agenda 7\u201310 days ahead.' },
      { p: 'Joint opening', d: 'Each party presents position briefly, with technical demonstrations as needed. Daniel frames the day, sets ground rules for confidentiality, and identifies the technical questions to be tackled.' },
      { p: 'Caucus rounds', d: 'Iterative private sessions. Daniel translates technical positions and tests assumptions in each room. Where the matter turns on a verifiable fact, a forensic component is invoked to resolve it on the spot.' },
      { p: 'Convergence', d: 'Settlement architecture drafted, including any technical remediation, audit, or escrow terms. Daniel surfaces the structure both rooms will accept.' },
      { p: 'Documentation', d: 'Term sheet executed by all parties. Where stipulated, Daniel provides a written summary of agreements reached for inclusion in court approval orders or arbitration awards.' },
    ],
    schematic: 'mediation',
  },
  {
    id: 'special-master',
    n: '02',
    title: 'Special Master / Discovery Referee',
    tagline: 'Court-appointed for ESI protocols, discovery management, and complex protective orders.',
    phases: [
      { p: 'Appointment', d: 'Order of appointment from the court, scope-of-authority defined. Daniel issues a brief acknowledgment outlining initial procedural framework and reporting cadence.' },
      { p: 'Initial protocol', d: 'Draft ESI protocol distributed to parties: custodians, sources, search terms / TAR design, privilege handling, production format, claw-back terms. 10\u201314 day comment window.' },
      { p: 'Active management', d: 'Real-time dispute resolution. Disputes raised by letter brief; Daniel rules within 5 business days. Where the issue is technical (sampling validity, search term efficacy, cross-border production), Daniel may issue a written analysis with the ruling.' },
      { p: 'Spoliation / sanctions', d: 'Where preservation failures are alleged, Daniel conducts a fact-finding inquiry under FRCP 37(e) standards and issues findings with recommended sanctions if warranted.' },
      { p: 'Reporting', d: 'Periodic reports to the appointing court. Final report on dissolution of the appointment with summary of disputes resolved and any open issues.' },
    ],
    schematic: 'special-master',
  },
  {
    id: 'forensic',
    n: '03',
    title: 'Forensic Neutral',
    tagline: 'Independent third-party technical expert appointed by tribunal or counsel.',
    phases: [
      { p: 'Scoping', d: 'Question put to the neutral defined precisely. Investigation protocol drafted: targets (devices, accounts, repositories), tools, custody chain, hashing strategy, reporting format, deadlines.' },
      { p: 'Acquisition', d: 'Forensic images acquired from in-scope sources. Hashes calculated and recorded. Original media sealed and stored under access-logged custody.' },
      { p: 'Analysis', d: 'Examination per the protocol. Technical findings recorded contemporaneously. Where the finding affects scope (e.g. discovery of a previously unknown source), parties are notified.' },
      { p: 'Authentication', d: 'For evidence destined for the record \u2014 emails, chats, messaging app artifacts, smartphone exports, deepfakes \u2014 chain of custody, hash verification, and tooling provenance documented for FRE 901 admission.' },
      { p: 'Report', d: 'Written report to the tribunal and parties: methodology, findings, limitations, supporting exhibits. Daniel is available for cross-examination if the report is contested at hearing.' },
    ],
    schematic: 'forensic',
  },
  {
    id: 'ai-disputes',
    n: '04',
    title: 'AI Disputes — Tribunal Services',
    tagline: 'Arbitrator and protocol architect under emerging AI dispute frameworks.',
    phases: [
      { p: 'Framework selection', d: 'JAMS AI Disputes Clause and Rules where the parties\u2019 contract incorporates them. Where the contract is silent, Daniel can propose a tailored framework with parties\u2019 consent.' },
      { p: 'Tiered protective order', d: 'Standing protective order template for AI matters \u2014 distinguishing model weights, training data, prompts, inference logs, and outputs into separate access tiers. Reviewer credentialing handled per tier.' },
      { p: 'Discovery scoping', d: 'System cards, evaluation reports, RAG configurations, retrieval logs, fine-tuning datasets, inference timestamps. What is probative; what is fishing into trade secrets dressed as discovery.' },
      { p: 'Technical adjudication', d: 'Daniel as arbitrator may pose questions of his own to parties\u2019 experts where the record is incomplete. Hearings may include live model interrogation under controlled conditions.' },
      { p: 'Award', d: 'Reasoned award addressing the technical and legal questions. Where the matter turns on machine behavior, the award sets out the model behavior actually observed and the legal consequences turning on it.' },
    ],
    schematic: 'ai',
  },
  {
    id: 'arbitration',
    n: '05',
    title: 'Arbitration',
    tagline: 'Sole or panel arbitrator for technically complex commercial matters.',
    phases: [
      { p: 'Constitution of tribunal', d: 'Sole arbitrator on appointment; chair or wing on three-member panels. Conflicts disclosure under L.C.I.A., H.K.I.A.C., AAA, JAMS, or party-stipulated rules.' },
      { p: 'Terms of reference', d: 'Procedural calendar, scope of pleadings, evidentiary rules, language and seat. Where the matter is technical, Daniel often expands the standard order to address source-code review, expert evidence framework, and protective order.' },
      { p: 'Evidentiary phase', d: 'Documentary production per agreed scope. Witness statements; expert reports. Hearings either in person at the seat or virtual / hybrid.' },
      { p: 'Hearing', d: 'Oral testimony, cross-examination, expert hot-tubbing where useful. Daniel poses tribunal questions where the record is silent on a determinative technical fact.' },
      { p: 'Award', d: 'Reasoned award addressing all submitted issues. Daniel routinely issues awards within 60\u201390 days of close of hearings.' },
    ],
    schematic: 'arbitration',
  },
];

const ProcessPage = ({ onNav }) => (
  <div className="page-fade">
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '120px 0 80px' }}>
      <div className="container">
        <div className="eyebrow on-dark">Process · Methodology</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 7.5vw, 104px)', marginTop: 16, color: 'var(--paper)' }}>
          How the<br/>
          <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>work runs.</em>
        </h1>
        <p style={{ marginTop: 32, fontSize: 19, color: 'var(--slate-300)', maxWidth: 720, lineHeight: 1.6 }}>
          Five engagement types, each with its own protocol, deliverable, and rhythm. The methodology section below walks through each — phase by phase, from appointment to award or report.
        </p>
      </div>
    </section>

    {/* TOC */}
    <section style={{ background: 'var(--paper-2)', borderBottom: '1px solid var(--line-soft)', position: 'sticky', top: 65, zIndex: 30 }}>
      <div className="container" style={{ padding: '20px 32px' }}>
        <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
          {ENGAGEMENT_FLOWS.map(e => (
            <a key={e.id} href={`#${e.id}`} className="mono" style={{
              fontSize: 11, letterSpacing: '0.16em', color: 'var(--slate-700)', textTransform: 'uppercase',
            }}>· {e.n} {e.title.split('—')[0].split('/')[0].trim()}</a>
          ))}
        </div>
      </div>
    </section>

    {ENGAGEMENT_FLOWS.map((e, i) => (
      <section key={e.id} id={e.id} style={{
        padding: '110px 0', background: i % 2 === 0 ? 'var(--paper)' : 'var(--paper-2)',
        borderBottom: '1px solid var(--line-soft)', scrollMarginTop: 120,
      }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
            <div>
              <div className="display" style={{ fontSize: 88, color: 'var(--gold-deep)', fontWeight: 300, lineHeight: 1 }}>
                {e.n}
              </div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--slate-700)', marginTop: 14, textTransform: 'uppercase' }}>
                Engagement
              </div>
              <h2 className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', lineHeight: 1.1, marginTop: 24 }}>
                {e.title}
              </h2>
              <p className="serif" style={{ fontSize: 17, color: 'var(--slate-700)', marginTop: 16, fontStyle: 'italic', lineHeight: 1.55 }}>
                {e.tagline}
              </p>
              <div style={{ marginTop: 32, padding: 16, border: '1px solid var(--line-soft)', background: i % 2 === 0 ? 'var(--paper-2)' : 'var(--paper)' }}>
                {e.schematic === 'mediation' && <MediationSchematic/>}
                {e.schematic === 'special-master' && <SpecialMasterSchematic/>}
                {e.schematic === 'forensic' && <ForensicSchematic/>}
                {e.schematic === 'ai' && <AISchematic/>}
                {e.schematic === 'arbitration' && <ArbitrationSchematic/>}
              </div>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--gold-deep)', marginBottom: 28 }}>
                PHASE PROTOCOL
              </div>
              <ol style={{ listStyle: 'none', counterReset: 'phase' }}>
                {e.phases.map((ph, j) => (
                  <li key={j} style={{
                    paddingBottom: 24, marginBottom: 24,
                    borderBottom: j < e.phases.length - 1 ? '1px solid var(--line-soft)' : 'none',
                    display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24,
                  }}>
                    <div className="display" style={{ fontSize: 32, color: 'var(--gold-deep)', fontWeight: 300, lineHeight: 1 }}>
                      {String(j + 1).padStart(2, '0')}
                    </div>
                    <div>
                      <h4 className="serif" style={{ fontSize: 22, lineHeight: 1.25, fontWeight: 500 }}>{ph.p}</h4>
                      <p style={{ fontSize: 15, color: 'var(--slate-900)', lineHeight: 1.65, marginTop: 8 }}>
                        {ph.d}
                      </p>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>
      </section>
    ))}

    {/* Cross-engagement principles */}
    <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="container">
        <div className="eyebrow on-dark" style={{ marginBottom: 16 }}>Cross-Engagement</div>
        <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', color: 'var(--paper)', lineHeight: 1.05, marginBottom: 56 }}>
          Five principles that hold across every role.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32 }}>
          {[
            ['I.', 'Confidentiality', 'Protective orders, encrypted channels, access-logged storage \u2014 standard in every engagement.'],
            ['II.', 'Technical fluency', 'The neutral can read the source code, model weights, and audit logs, not just hear about them.'],
            ['III.', 'Reproducibility', 'Methodology recorded, hashes captured, custody chain documented \u2014 anyone with the same record could reach the same finding.'],
            ['IV.', 'Proportionality', 'Scope of investigation calibrated to the question put to the neutral. No fishing dressed as discovery.'],
            ['V.', 'Speed', 'Protocols issued within days; rulings within a week; awards within 60\u201390 days of hearings.'],
          ].map(([n, t, d]) => (
            <div key={n} style={{ borderTop: '1px solid rgba(212,185,122,0.3)', paddingTop: 20 }}>
              <div className="display" style={{ fontSize: 36, color: 'var(--gold)', fontWeight: 300, lineHeight: 1 }}>{n}</div>
              <h4 className="serif" style={{ fontSize: 22, color: 'var(--paper)', marginTop: 14, fontWeight: 500 }}>{t}</h4>
              <p style={{ fontSize: 14, color: 'var(--slate-300)', marginTop: 12, lineHeight: 1.55 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section className="section">
      <div className="container center">
        <div className="eyebrow">Begin a matter</div>
        <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 68px)', marginTop: 16 }}>
          Eight questions. <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic', fontWeight: 300 }}>One considered match.</em>
        </h2>
        <button className="btn btn-primary" style={{ marginTop: 32 }} onClick={() => onNav('intake')}>
          Open match intake <span className="arrow">→</span>
        </button>
      </div>
    </section>
  </div>
);

window.ProcessPage = ProcessPage;
