// What is Tailored Mediation — pillar education page

const WhatIsPage = ({ onNav }) => (
  <div className="page-fade">
    <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.4 }}/>
      <div className="container" style={{ position: 'relative' }}>
        <div className="eyebrow on-dark">An education for counsel and parties</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 7.5vw, 104px)', marginTop: 16, color: 'var(--paper)', lineHeight: 1 }}>
          What is<br/>
          <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>Tailored Mediation?</em>
        </h1>
        <p style={{ marginTop: 32, fontSize: 21, color: 'var(--slate-300)', maxWidth: 760, lineHeight: 1.55, fontFamily: 'var(--serif)', fontStyle: 'italic' }}>
          A neutral practice built around the dispute, not around the form. Where the matter is technical, the neutral is technical. Where it requires forensic resolution, a forensic protocol issues. Where it calls for a panel of three, a panel of three convenes.
        </p>
      </div>
    </section>

    {/* Definition + thesis */}
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96 }}>
          <div>
            <div className="eyebrow">§ 01 · Definition</div>
          </div>
          <div>
            <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: 1.05 }}>
              <em style={{ fontStyle: 'italic', color: 'var(--gold-deep)' }}>Tailored mediation</em> is alternative dispute resolution scoped to the specific matter — its technical character, its scale, its venue, and the parties' tolerance for risk.
            </h2>
            <p style={{ marginTop: 32, fontSize: 18, lineHeight: 1.7, color: 'var(--slate-900)' }}>
              Standard mediation runs to a template: opening session, caucuses, settlement architecture, term sheet. The template works for matters where the dispute is fundamentally about money, fault, or relationship. It does not work as well — and often fails outright — when the dispute is about whether a particular file existed on a particular device on a particular date, whether a model behaved as advertised, or whether a smart contract executed as intended.
            </p>
            <p style={{ marginTop: 16, fontSize: 18, lineHeight: 1.7, color: 'var(--slate-900)' }}>
              Tailored mediation begins with the question of <em>what kind of resolution this matter actually needs</em>, and only then designs the process to produce it. Sometimes that is a single-day mediation. Sometimes it is a multi-week shuttle diplomacy. Sometimes it is a forensic investigation that produces a finding the parties have, in advance, agreed to treat as authoritative — and the case settles within hours of the report being shared.
            </p>
          </div>
        </div>
      </div>
    </section>

    {/* Origins */}
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 16 }}>§ 02 · Origins</div>
        <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: 1.05, marginBottom: 48 }}>
          A practice shaped by twenty years at the intersection of <em style={{ fontStyle: 'italic', color: 'var(--gold-deep)' }}>law and technology</em>.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {[
            {
              y: 'Wave I — eDiscovery (2006-2014)',
              t: 'Procedural neutrals',
              d: 'The 2006 amendments to the Federal Rules and the Sedona Conference made the eDiscovery special master a recognized appointment. The role was procedural — about how to produce — but it established that some disputes require a neutral fluent in the underlying technology.',
            },
            {
              y: 'Wave II — Substantive technology (2014-2023)',
              t: 'Substantive technical neutrals',
              d: 'Software disputes stopped being about how the software was managed and started being about what the software did. Source-code review protocols, smart-contract autopsy, IoT data-integrity findings — these were no longer skirmishes. They were the merits.',
            },
            {
              y: 'Wave III — AI and autonomous systems (2024-)',
              t: 'Tailored mediation',
              d: 'The JAMS AI Disputes Clause and Rules formalized the recognition that ADR for machine-behavior disputes requires custom-fit process. Tailored mediation is the practice that meets that moment — not by abandoning the conventional craft, but by adapting it to the matter.',
            },
          ].map((w, i) => (
            <div key={i}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.18em', marginBottom: 12 }}>
                {w.y}
              </div>
              <h3 className="display" style={{ fontSize: 26, lineHeight: 1.1, marginBottom: 16 }}>{w.t}</h3>
              <p style={{ fontSize: 15, color: 'var(--slate-900)', lineHeight: 1.65 }}>{w.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Five characteristics */}
    <section className="section">
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 16 }}>§ 03 · Five Characteristics</div>
        <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: 1.05, marginBottom: 56 }}>
          What makes a mediation <em style={{ fontStyle: 'italic', color: 'var(--gold-deep)' }}>tailored</em>.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32 }}>
          {[
            ['Adapted to the matter', 'Process designed around the dispute\u2019s actual structure, not retrofitted to a template.'],
            ['Technically fluent', 'The neutral can read what the dispute is about \u2014 not just hear about it through experts.'],
            ['Evidence-converging', 'Where verifiable facts can collapse the distance between positions, they are produced and shared.'],
            ['Confidentiality-tiered', 'Protective orders distinguish weights, training data, source code, and outputs into separate access levels.'],
            ['Speed-disciplined', 'Protocols issue within days; findings within weeks; awards within 60\u201390 days of hearings.'],
          ].map(([t, d], i) => (
            <div key={i} style={{ borderTop: '1px solid var(--gold-deep)', paddingTop: 20 }}>
              <div className="display" style={{ fontSize: 28, color: 'var(--gold-deep)', fontWeight: 300, lineHeight: 1 }}>
                0{i + 1}
              </div>
              <h4 className="serif" style={{ fontSize: 20, marginTop: 12, fontWeight: 500, lineHeight: 1.2 }}>{t}</h4>
              <p style={{ fontSize: 14, color: 'var(--slate-700)', marginTop: 12, lineHeight: 1.55 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* When to use */}
    <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="container">
        <div className="eyebrow on-dark" style={{ marginBottom: 16 }}>§ 04 · When the model fits</div>
        <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', color: 'var(--paper)', lineHeight: 1.05, marginBottom: 56 }}>
          Indicators that tailored mediation is <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>the right choice</em>.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--gold)', letterSpacing: '0.2em', marginBottom: 20 }}>
              SIGNALS YES
            </div>
            <ul style={{ listStyle: 'none', borderTop: '1px solid rgba(212,185,122,0.25)' }}>
              {[
                'The dispute turns on a question of fact only an expert can resolve',
                'Source code, model weights, or proprietary algorithms are at issue',
                'Standard ADR has been tried and stalled on a technical disagreement',
                'Parties want a defensible technical finding that admits in court if needed',
                'Cross-border evidence collection is required',
                'The matter exceeds $5M exposure with TB-scale ESI',
                'A protective order needs to distinguish access tiers for sensitive technical material',
              ].map(s => (
                <li key={s} style={{
                  padding: '14px 0', borderBottom: '1px solid rgba(212,185,122,0.18)',
                  fontSize: 16, color: 'var(--paper)', display: 'flex', gap: 16,
                }}>
                  <span style={{ color: 'var(--gold)', flexShrink: 0 }}>✓</span>
                  {s}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--slate-300)', letterSpacing: '0.2em', marginBottom: 20 }}>
              SIGNALS NO
            </div>
            <ul style={{ listStyle: 'none', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
              {[
                'Matter has no technical dimension; standard mediation is sufficient',
                'Dispute is fundamentally about damages quantification with no fact disputes',
                'Parties expressly reject neutral fact-finding by stipulation',
                'The matter requires unique subject-matter expertise outside Daniel\u2019s scope (e.g. heavy industry, biopharma)',
              ].map(s => (
                <li key={s} style={{
                  padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.08)',
                  fontSize: 16, color: 'var(--slate-300)', display: 'flex', gap: 16,
                }}>
                  <span style={{ color: 'var(--slate-300)', flexShrink: 0 }}>·</span>
                  {s}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>

    {/* Comparison link */}
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="eyebrow">§ 05 · Compared to standard mediation</div>
            <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', lineHeight: 1.05, marginTop: 16 }}>
              See the side-by-side.
            </h2>
            <p style={{ fontSize: 18, color: 'var(--slate-900)', marginTop: 24, lineHeight: 1.65 }}>
              Tailored mediation is not a replacement for standard mediation; it is a different tool for a different class of dispute. The comparison page walks through process, neutral, timeline, evidence handling, and outcomes.
            </p>
            <button className="btn btn-primary" style={{ marginTop: 28 }} onClick={() => onNav('tailored-vs-standard')}>
              Tailored vs. Standard Mediation <span className="arrow">→</span>
            </button>
          </div>
          <div style={{ aspectRatio: '4/3', position: 'relative', overflow: 'hidden', border: '1px solid var(--line-soft)', background: 'var(--paper)' }}>
            <div className="dotgrid" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}/>
            <div style={{ position: 'absolute', inset: 0, padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.18em', marginBottom: 12 }}>
                FIG. SIDE-BY-SIDE
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                <div>
                  <div className="serif" style={{ fontSize: 16, fontWeight: 500, color: 'var(--slate-700)', borderBottom: '1px solid var(--line-soft)', paddingBottom: 8, marginBottom: 12 }}>Standard</div>
                  {['Template process','Process neutral','Set caucus rhythm','Position-based','Outcome: term sheet'].map(x => (
                    <div key={x} className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', padding: '8px 0', borderBottom: '1px dotted var(--line-soft)' }}>{x}</div>
                  ))}
                </div>
                <div>
                  <div className="serif" style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink)', borderBottom: '1px solid var(--gold)', paddingBottom: 8, marginBottom: 12 }}>Tailored</div>
                  {['Custom-fit protocol','Technical neutral','Evidence-driven','Fact-converging','Outcome: + technical finding'].map(x => (
                    <div key={x} className="mono" style={{ fontSize: 11, color: 'var(--ink)', padding: '8px 0', borderBottom: '1px dotted var(--gold)' }}>{x}</div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* CTA */}
    <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="container center">
        <div className="eyebrow on-dark">Tailored to your matter</div>
        <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 68px)', marginTop: 16, color: 'var(--paper)' }}>
          Tell us about the dispute. <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>We'll design the process.</em>
        </h2>
        <button className="btn btn-gold" style={{ marginTop: 40 }} onClick={() => onNav('intake')}>
          Begin intake <span className="arrow">→</span>
        </button>
      </div>
    </section>
  </div>
);

window.WhatIsPage = WhatIsPage;