// Tailored vs. Standard Mediation — comparison sub-page

const COMPARE_ROWS = [
  {
    axis: 'Process design',
    standard: 'Template: opening session \u2192 caucuses \u2192 settlement architecture \u2192 term sheet. Same shape regardless of matter type.',
    tailored: 'Custom-fit: protocol designed around the dispute\u2019s actual structure. Some matters use the standard rhythm; others require forensic phases, code review, or panel constitution.',
  },
  {
    axis: 'Neutral profile',
    standard: 'Process neutral, often a retired generalist judge. Subject-matter authority furnished by the parties\u2019 experts.',
    tailored: 'Technical neutral with subject-matter fluency. Reads source code, model weights, and audit logs directly. Routinely paired with a process neutral as co-mediator.',
  },
  {
    axis: 'Pre-session work',
    standard: 'Position briefs from each side. Mediator reviews, identifies issues, sets agenda.',
    tailored: 'Position briefs plus technical briefings, evidence-designation orders, and (where called for) protocols for forensic preservation. Often a tiered protective order is in place before first session.',
  },
  {
    axis: 'Evidence handling',
    standard: 'Position-based; parties present what they choose. Mediator does not adjudicate disputed facts.',
    tailored: 'Where the dispute turns on a verifiable fact, the neutral may invoke a forensic component to resolve it on the spot \u2014 file existence, log integrity, model-output reproducibility.',
  },
  {
    axis: 'Confidentiality',
    standard: 'Standard mediation confidentiality (Cal. Evid. Code \u00a7 1119, FRCP-style protective frameworks).',
    tailored: 'Tiered protective order distinguishes weights, training data, source code, prompts, outputs, and party-confidential business material into separate access tiers.',
  },
  {
    axis: 'Typical timeline',
    standard: '14\u201360 days from retention to first session. Half-day to two-day sessions are typical.',
    tailored: '14\u201360 days for mediation alone. Where forensic work or special-master protocol is part of the engagement, sessions may extend or pause for evidence development.',
  },
  {
    axis: 'Co-mediation',
    standard: 'Single neutral, occasionally panel.',
    tailored: 'Frequently a technical-neutral / process-neutral pair (e.g. Daniel + a retired judge). Splits subject-matter authority from procedural craft.',
  },
  {
    axis: 'Cost driver',
    standard: 'Sessions and preparation hours. Typically capped per matter.',
    tailored: 'Sessions, technical preparation, forensic infrastructure where invoked. Scoped per matter; often comparable to or less than the cost of litigating the technical question to the same answer.',
  },
  {
    axis: 'Outcome artifact',
    standard: 'Term sheet executed by parties. Mediator may issue a written summary if asked.',
    tailored: 'Term sheet plus, where relevant, a written technical finding the parties have agreed in advance to treat as authoritative on the narrow question put to the neutral.',
  },
  {
    axis: 'Best fit',
    standard: 'Matters where the dispute is fundamentally about money, fault, or relationship; technical complexity is incidental.',
    tailored: 'Matters where the dispute turns on technology — AI behavior, software defect, forensic chain of custody, smart-contract execution, breach causation. Where the technology IS the dispute.',
  },
];

const TailoredVsStandardPage = ({ onNav }) => (
  <div className="page-fade">
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '120px 0 80px' }}>
      <div className="container">
        <button onClick={() => onNav('what-is')} className="mono" style={{
          fontSize: 11, color: 'var(--gold)', letterSpacing: '0.2em', marginBottom: 24, display: 'block',
        }}>
          ← WHAT IS TAILORED MEDIATION
        </button>
        <div className="eyebrow on-dark">A comparison for counsel</div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 6.5vw, 88px)', marginTop: 16, color: 'var(--paper)', lineHeight: 1.02 }}>
          Tailored vs.<br/>
          <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>Standard Mediation.</em>
        </h1>
        <p style={{ marginTop: 32, fontSize: 19, color: 'var(--slate-300)', maxWidth: 720, lineHeight: 1.55 }}>
          Two different tools for two different kinds of dispute. Below, the comparison axis by axis.
        </p>
      </div>
    </section>

    {/* Comparison */}
    <section className="section">
      <div className="container">
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 800 }}>
            <thead>
              <tr>
                <th style={{
                  textAlign: 'left', padding: '20px 24px',
                  borderBottom: '2px solid var(--ink)',
                  width: '20%', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.18em', color: 'var(--slate-700)',
                  textTransform: 'uppercase',
                }}>Axis</th>
                <th style={{
                  textAlign: 'left', padding: '20px 24px',
                  borderBottom: '2px solid var(--slate-300)',
                  fontSize: 16, fontFamily: 'var(--serif)', color: 'var(--slate-700)', fontWeight: 500,
                }}>Standard mediation</th>
                <th style={{
                  textAlign: 'left', padding: '20px 24px',
                  borderBottom: '2px solid var(--gold)',
                  fontSize: 16, fontFamily: 'var(--serif)', color: 'var(--ink)', fontWeight: 500,
                  background: 'var(--paper-2)',
                }}>Tailored mediation</th>
              </tr>
            </thead>
            <tbody>
              {COMPARE_ROWS.map((r, i) => (
                <tr key={i} style={{ borderBottom: '1px solid var(--line-soft)' }}>
                  <td style={{
                    padding: '24px', verticalAlign: 'top',
                    fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em',
                    color: 'var(--gold-deep)', textTransform: 'uppercase',
                  }}>{r.axis}</td>
                  <td style={{ padding: '24px', verticalAlign: 'top', fontSize: 15, color: 'var(--slate-700)', lineHeight: 1.65 }}>
                    {r.standard}
                  </td>
                  <td style={{
                    padding: '24px', verticalAlign: 'top', fontSize: 15, color: 'var(--ink)', lineHeight: 1.65,
                    background: 'var(--paper-2)',
                  }}>
                    {r.tailored}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>

    {/* Decision tree */}
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 16 }}>Decision Aid</div>
        <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', lineHeight: 1.05, marginBottom: 48 }}>
          Which one fits your matter?
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div style={{ background: 'var(--paper)', border: '1px solid var(--line-soft)', padding: 36 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.2em', marginBottom: 12 }}>
              CHOOSE STANDARD IF
            </div>
            <ul style={{ listStyle: 'none', marginTop: 16, borderTop: '1px solid var(--line-soft)' }}>
              {[
                'The dispute is principally about damages, fault, or relationship',
                'Technical issues, if any, are uncontested or peripheral',
                'A retired generalist judge can mediate the matter end-to-end',
                'Parties prefer the standard JAMS, AAA, or party-stipulated framework',
                'Discovery has not surfaced any technical question requiring fact-finding',
              ].map(s => (
                <li key={s} style={{
                  padding: '12px 0', borderBottom: '1px solid var(--line-soft)',
                  fontSize: 14, color: 'var(--slate-900)', display: 'flex', gap: 12, lineHeight: 1.55,
                }}>
                  <span className="mono" style={{ color: 'var(--slate-700)' }}>·</span>
                  {s}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background: 'var(--paper)', border: '1px solid var(--gold)', padding: 36 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.2em', marginBottom: 12 }}>
              CHOOSE TAILORED IF
            </div>
            <ul style={{ listStyle: 'none', marginTop: 16, borderTop: '1px solid var(--gold)' }}>
              {[
                'The dispute turns on a verifiable technical fact',
                'Source code, model weights, or proprietary algorithms are at issue',
                'Standard mediation has stalled on a technical disagreement',
                'Cross-border, TB-scale, or forensic-protocol design is required',
                'A tiered protective order is needed for sensitive technical material',
                'A defensible technical finding is part of the desired outcome',
              ].map(s => (
                <li key={s} style={{
                  padding: '12px 0', borderBottom: '1px solid var(--gold)',
                  fontSize: 14, color: 'var(--ink)', display: 'flex', gap: 12, lineHeight: 1.55,
                }}>
                  <span style={{ color: 'var(--gold-deep)' }}>✓</span>
                  {s}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>

    {/* CTA */}
    <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="container center">
        <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', color: 'var(--paper)' }}>
          Still uncertain which fits?
        </h2>
        <p className="serif" style={{ fontSize: 19, color: 'var(--slate-300)', marginTop: 16, fontStyle: 'italic', maxWidth: 600, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.55 }}>
          The intake form will route you. Eight questions; the suggested process — and the matched neutral — are presented at the end.
        </p>
        <button className="btn btn-gold" style={{ marginTop: 32 }} onClick={() => onNav('intake')}>
          Open match intake <span className="arrow">→</span>
        </button>
      </div>
    </section>
  </div>
);

window.TailoredVsStandardPage = TailoredVsStandardPage;