// Engagements (Services) page — overview hub.
// Each engagement has its own dedicated detail page; this page is the index.

const ENGAGEMENT_OVERVIEWS = [
  {
    id: 'mediation', n: '01',
    title: 'Mediation',
    tagline: 'Privately-administered mediation for technically complex commercial disputes.',
    blurb: 'For matters where outcome turns on a question of fact only an expert can resolve — model behavior, log integrity, contract code, schema lineage. Half-day to multi-week sessions; $5M to $1B+ exposure.',
    practice: ['AI / Model Liability', 'Trade Secret', 'Cyber Insurance', 'Smart Contracts', 'Cross-Border', 'Class Action Privacy'],
    schematic: 'mediation',
  },
  {
    id: 'special-master', n: '02',
    title: 'Special Master & Discovery Referee',
    tagline: 'Court-appointed for ESI protocols, discovery management, and complex protective orders.',
    blurb: 'Authoring ESI protocols, resolving discovery disputes in real time, and reporting findings to the appointing court. Distinguished Neutral, Academy of Court Appointed Masters; eDiscovery Special Master, U.S.D.C. W.D. Pa.',
    practice: ['ESI Protocols', 'Spoliation Findings', 'TAR / CAL Validation', 'Privilege Review', 'Cross-Border Discovery', 'Class Action ESI'],
    schematic: 'special-master',
  },
  {
    id: 'forensic-neutral', n: '03',
    title: 'Forensic Neutral',
    tagline: 'Independent third-party technical expert appointed by tribunal or counsel.',
    blurb: 'Tribunal-selected or party-stipulated. Designs the investigation protocol, conducts the analysis, and submits a written report. Engagements span trade secret, IP, fraud, employment, bankruptcy — including international device collection in coordination with FBI, Interpol, and counterparts.',
    practice: ['Device Imaging', 'Email & Chat Authentication', 'Cloud / SaaS', 'Mobile Forensics', 'Vehicle Telematics', 'IoT / Embedded'],
    schematic: 'forensic',
  },
  {
    id: 'ai-disputes', n: '04',
    title: 'AI Disputes — Tribunal Services',
    tagline: 'Arbitrator and protocol architect under emerging AI dispute frameworks.',
    blurb: 'Arbitrator on tribunals applying AI-specific rules. Co-author of standing protective orders for model weights, training data, and inference logs. Familiarity with how to discover, examine, and authenticate evidence produced by or about machine-learning systems.',
    practice: ['Model Liability', 'Training Data IP', 'Hallucination', 'Algorithmic Bias', 'AI Vendor Coverage', 'Generative IP'],
    schematic: 'ai',
  },
  {
    id: 'arbitration', n: '05',
    title: 'Arbitration',
    tagline: 'Sole or panel arbitrator for technically complex commercial matters.',
    blurb: 'Sole arbitrator and panelist for matters at the intersection of technology and contract. Member, London Court of International Arbitration; Hong Kong International Arbitration Centre; CPR Distinguished Neutral.',
    practice: ['SaaS / Cloud SLA', 'Data Breach Coverage', 'Cryptocurrency / Tokens', 'Software Licensing', 'Patent', 'Smart Contract'],
    schematic: 'arbitration',
  },
];

const ServicesPage = ({ onNav }) => (
  <div className="page-fade">
    {/* Title slab */}
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '120px 0 80px', position: 'relative', overflow: 'hidden' }}>
      <div className="dotgrid-dark" style={{ position: 'absolute', inset: 0, opacity: 0.35 }}/>
      <div className="container" style={{ position: 'relative' }}>
        <div className="eyebrow on-dark">Engagements</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 7.5vw, 104px)', marginTop: 16, color: 'var(--paper)', letterSpacing: '-0.03em', lineHeight: 1.02 }}>
          Five engagements.<br/>
          <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>One bench.</em>
        </h1>
        <p style={{ marginTop: 32, fontSize: 21, color: 'var(--slate-300)', maxWidth: 720, lineHeight: 1.5, fontFamily: 'var(--serif)', fontStyle: 'italic' }}>
          Each role is a distinct posture toward the same problem: getting parties to a defensible resolution faster than litigation can run its course.
        </p>
      </div>
    </section>

    {/* Engagement rows — each links to its detail page */}
    <section className="section">
      <div className="container">
        <div className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.2em', marginBottom: 32, textTransform: 'uppercase' }}>
          Click any role for the full page →
        </div>
        {ENGAGEMENT_OVERVIEWS.map((s, i) => {
          const Schematic =
            s.schematic === 'mediation'      ? window.MediationSchematic :
            s.schematic === 'special-master' ? window.SpecialMasterSchematic :
            s.schematic === 'forensic'       ? window.ForensicSchematic :
            s.schematic === 'ai'             ? window.AISchematic :
            s.schematic === 'arbitration'    ? window.ArbitrationSchematic : null;
          return (
            <article key={s.id} onClick={() => onNav(s.id)} style={{
              cursor: 'pointer', padding: '40px 0',
              borderTop: '1px solid var(--line-soft)',
              borderBottom: i === ENGAGEMENT_OVERVIEWS.length - 1 ? '1px solid var(--line-soft)' : 'none',
              transition: 'all 0.18s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper-2)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr 1fr', gap: 48, alignItems: 'center' }}>
                <div>
                  <div className="display" style={{ fontSize: 64, color: 'var(--gold-deep)', fontWeight: 300, lineHeight: 1 }}>
                    {s.n}
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.18em', marginTop: 10 }}>
                    ENGAGEMENT
                  </div>
                </div>
                <div>
                  <h2 className="display" style={{ fontSize: 'clamp(28px, 3.2vw, 40px)', lineHeight: 1.1 }}>
                    {s.title}
                  </h2>
                  <p className="serif" style={{ fontSize: 18, color: 'var(--slate-700)', marginTop: 12, fontStyle: 'italic', lineHeight: 1.5 }}>
                    {s.tagline}
                  </p>
                  <p style={{ marginTop: 16, fontSize: 15, color: 'var(--slate-900)', lineHeight: 1.65 }}>
                    {s.blurb}
                  </p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 18 }}>
                    {s.practice.slice(0, 4).map(p => <span key={p} className="tag">{p}</span>)}
                    {s.practice.length > 4 && <span className="tag">+ {s.practice.length - 4} more</span>}
                  </div>
                  <div className="mono" style={{ marginTop: 20, fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.2em' }}>
                    READ THE FULL PAGE →
                  </div>
                </div>
                {Schematic && (
                  <div style={{ padding: 16, border: '1px solid var(--line-soft)', background: 'var(--paper)' }}>
                    <Schematic/>
                  </div>
                )}
              </div>
            </article>
          );
        })}
      </div>
    </section>

    {/* Cross-cutting links */}
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 24 }}>Across all five</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {[
            { id: 'process', t: 'Process & Methodology', d: 'Phase-by-phase walk-through of how each engagement runs, plus the principles that hold across every role.' },
            { id: 'notable-matters', t: 'Notable Matters', d: 'Anonymized representative engagements across eight matter categories. Matter type, role, technical issue, outcome.' },
            { id: 'engagement-terms', t: 'Engagement Terms', d: 'How retention works — court-appointed and party-stipulated paths, the six-step process, and fee scoping.' },
          ].map(c => (
            <button key={c.id} onClick={() => onNav(c.id)} style={{
              textAlign: 'left', padding: 28, background: 'var(--paper)',
              border: '1px solid var(--line-soft)', cursor: 'pointer',
              transition: 'all 0.18s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--gold-deep)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line-soft)'; e.currentTarget.style.transform = 'none'; }}>
              <h3 className="display" style={{ fontSize: 24, lineHeight: 1.15 }}>{c.t}</h3>
              <p style={{ fontSize: 14, color: 'var(--slate-700)', lineHeight: 1.6, marginTop: 12 }}>{c.d}</p>
              <div className="mono" style={{ fontSize: 10, color: 'var(--gold-deep)', letterSpacing: '0.2em', marginTop: 16 }}>
                READ →
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>

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

window.ServicesPage = ServicesPage;