// Engagement Terms — "Fees on request" framing with retention paths

const RETENTION_PATHS = [
  {
    label: 'Court-appointed',
    sub: 'SPECIAL MASTER · DISCOVERY REFEREE · FORENSIC NEUTRAL',
    body: 'On order of an appointing court. Daniel issues a brief acknowledgment outlining the procedural framework and reporting cadence, then proceeds per the order. Common for ESI special-master appointments, forensic-neutral roles, and discovery-referee designations.',
    bullets: [
      'Order from the appointing federal or state court',
      'Acknowledgment with reporting cadence and protocol',
      'Reports back to the bench as the order requires',
      'Applies in U.S. Federal and State courts; foreign equivalents handled case-by-case',
    ],
    cta: 'About Daniel',
  },
  {
    label: 'Party-stipulated',
    sub: 'MEDIATION · ARBITRATION · FORENSIC NEUTRAL',
    body: 'Parties stipulate to Daniel as the neutral and execute an engagement letter specifying scope, fee structure, and process. Best for mediations, sole or panel arbitrations, and forensic-neutral engagements where the parties have selected him directly.',
    bullets: [
      'Engagement letter executed by all parties',
      'Customized scope and protocol per matter',
      'Direct case management by the Tailored Mediation team',
      'Optional ADR-administrator overlay (JAMS, AAA, CPR, ICC, L.C.I.A., or H.K.I.A.C.) where the parties prefer it',
    ],
    cta: 'Begin intake',
  },
];

const FEE_FACTORS = [
  { t: 'Engagement type', d: 'Mediation, Special Master, Forensic Neutral, Arbitration (sole or panel) \u2014 each has a distinct rate structure.' },
  { t: 'Subject-matter complexity', d: 'Frontier-technical matters with novel evidence (model weights, smart contracts) carry preparation premiums.' },
  { t: 'Exposure and scope', d: 'Multi-billion-dollar matters and multi-week sessions are scoped differently from half-day mediations.' },
  { t: 'Document corpus', d: 'TB-scale ESI, source code review, and forensic protocol design materially affect scope.' },
  { t: 'Co-mediation', d: 'Pairing with a process neutral (retired judge) or with technical co-counsel changes the rate structure.' },
  { t: 'Travel and venue', d: 'In-person vs. virtual, single venue vs. multi-jurisdictional. International matters scoped accordingly.' },
];

const RETAIN_STEPS = [
  { n: '01', t: 'Intake', d: 'Confidential matter request via the intake form, by email, or through JAMS.' },
  { n: '02', t: 'Conflicts check', d: 'Run within 48 hours across active matters and prior representations. Material conflicts disclosed.' },
  { n: '03', t: 'Scope and quote', d: 'Engagement letter draft (or JAMS retention agreement) with scope, fee structure, deposit, and timeline.' },
  { n: '04', t: 'Engagement order', d: 'For court-appointed roles, an order issuing from the appointing court. For private engagements, signed retention.' },
  { n: '05', t: 'Initial protocol', d: 'Daniel issues an initial scoping order or session agenda. Parties have 7\u201314 days to comment.' },
  { n: '06', t: 'First session / appointment effective', d: 'Within 14\u201360 days of retention for mediation; sooner for forensic and special-master appointments.' },
];

const EngagementTermsPage = ({ 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">Retention · Fees · Process</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 7.5vw, 104px)', marginTop: 16, color: 'var(--paper)' }}>
          Engagement<br/>
          <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>terms.</em>
        </h1>
        <p style={{ marginTop: 32, fontSize: 19, color: 'var(--slate-300)', maxWidth: 720, lineHeight: 1.6 }}>
          Two retention paths — JAMS-administered and direct. Fees scoped per matter on request. A six-step retention process.
        </p>
      </div>
    </section>

    {/* Retention paths */}
    <section className="section">
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 16 }}>§ 01 · Retention Paths</div>
        <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: 1.05, marginBottom: 48 }}>
          Two ways to retain.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--line-soft)' }}>
          {RETENTION_PATHS.map((p, i) => (
            <div key={i} style={{
              padding: 40,
              borderRight: i === 0 ? '1px solid var(--line-soft)' : 'none',
              background: 'var(--paper)',
            }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.18em' }}>
                {p.sub}
              </div>
              <h3 className="display" style={{ fontSize: 32, marginTop: 14, lineHeight: 1.1 }}>{p.label}</h3>
              <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.65, color: 'var(--slate-900)' }}>{p.body}</p>
              <ul style={{ listStyle: 'none', marginTop: 24 }}>
                {p.bullets.map(b => (
                  <li key={b} style={{
                    padding: '10px 0', borderTop: '1px solid var(--line-soft)',
                    fontSize: 14, color: 'var(--slate-900)', display: 'flex', gap: 12,
                  }}>
                    <span className="mono" style={{ color: 'var(--gold-deep)', fontSize: 11 }}>·</span>
                    {b}
                  </li>
                ))}
              </ul>
              <button className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => onNav(i === 0 ? 'about' : 'intake')}>
                {p.cta} <span className="arrow">→</span>
              </button>
            </div>
          ))}
        </div>
        <p className="serif" style={{ fontSize: 13, color: 'var(--slate-700)', fontStyle: 'italic', lineHeight: 1.6, marginTop: 24, maxWidth: 840 }}>
          Tailored Mediation is the neutral practice of Daniel B. Garrie, Esq. Daniel is an <em>affiliated panelist</em> with JAMS; he is not an employee of JAMS, and Tailored Mediation is independent of JAMS. JAMS-administered engagements are governed by the rules and policies of JAMS; direct engagements are governed by the engagement letter executed between the parties and Daniel.
        </p>
      </div>
    </section>

    {/* Fees */}
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
          <div>
            <div className="eyebrow">§ 02 · Fees</div>
            <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: 1.02, marginTop: 16 }}>
              On request.
            </h2>
            <p className="serif" style={{ fontSize: 19, color: 'var(--slate-700)', marginTop: 24, fontStyle: 'italic', lineHeight: 1.55 }}>
              Daniel's fees vary by engagement type, complexity, exposure, and venue. We scope per matter and provide a written estimate before retention.
            </p>
            <button className="btn btn-primary" style={{ marginTop: 32 }} onClick={() => onNav('intake')}>
              Request a fee estimate <span className="arrow">→</span>
            </button>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--slate-700)', marginBottom: 24 }}>
              FACTORS THAT SHAPE THE QUOTE
            </div>
            <ul style={{ listStyle: 'none', borderTop: '1px solid var(--line-soft)' }}>
              {FEE_FACTORS.map((f, i) => (
                <li key={i} style={{
                  padding: '20px 0', borderBottom: '1px solid var(--line-soft)',
                  display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, alignItems: 'baseline',
                }}>
                  <span className="serif" style={{ fontSize: 17, color: 'var(--ink)', fontWeight: 500 }}>{f.t}</span>
                  <span style={{ fontSize: 15, color: 'var(--slate-900)', lineHeight: 1.6 }}>{f.d}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>

    {/* Process */}
    <section className="section">
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 16 }}>§ 03 · Retention Process</div>
        <h2 className="display" style={{ fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: 1.05, marginBottom: 48 }}>
          Six steps from intake to first session.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {RETAIN_STEPS.map(s => (
            <div key={s.n} style={{
              padding: 28, border: '1px solid var(--line-soft)', background: 'var(--paper)',
            }}>
              <div className="display" style={{ fontSize: 56, color: 'var(--gold-deep)', fontWeight: 300, lineHeight: 1 }}>
                {s.n}
              </div>
              <h3 className="serif" style={{ fontSize: 22, marginTop: 16, fontWeight: 500 }}>{s.t}</h3>
              <p style={{ fontSize: 15, color: 'var(--slate-700)', marginTop: 12, lineHeight: 1.6 }}>{s.d}</p>
            </div>
          ))}
        </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. <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.EngagementTermsPage = EngagementTermsPage;