// About + Contact pages — rebuilt About to match site rhythm.
// Section pattern alternates ink (dark) / paper / paper-2 with clear breathing room.

const AboutPage = ({ onNav }) => {
  const credentials = [
    { cat: 'Education & Bar', items: [
      'J.D., Rutgers School of Law (Editor, Journal of Law & Public Policy)',
      'M.A., Computer Science, Brandeis University (with honors)',
      'B.A., Computer Science, Brandeis University',
      'Bar admissions: New York · Washington · U.S. Supreme Court Bar (2022) · Honorary, U.S. Federal Court of Claims',
    ]},
    { cat: 'Faculty & Scholarship', items: [
      'Adjunct Faculty, Harvard Extension School (2020–present)',
      'Cybersecurity Law · Computer Forensics · Crypto & Smart Contracts · Information Systems Forensics',
      'Former: Cardozo School of Law · Rutgers School of Law · Chicago-Kent College of Law',
      'Editor-in-Chief, Journal of Law & Cyber Warfare (2012–present)',
    ]},
    { cat: 'Memberships & Recognition', items: [
      'Fellow, Academy of Court Appointed Neutrals (ACAN)',
      'Distinguished Neutral, Academy of Court Appointed Masters (ACAM)',
      'Distinguished Neutral, CPR Institute',
      'Member, L.C.I.A. · Arbitrator, H.K.I.A.C.',
      'eDiscovery Special Master, U.S.D.C. W.D. Pa.',
      'Fellow, Ponemon Institute · Sedona Conference WG 1 & WG 6',
      'Member, Forbes Technology Council (2019–present)',
    ]},
    { cat: 'Patents & Certifications', items: [
      'Co-inventor, U.S. Patents 10546129 · 10528738 · 9990498 · 9990497',
      'Patent-pending forensic technology (US 20140181975 A1)',
      'Certified Forensic Engineer · Certified CISO Professional',
      'Certified Cyber Crime Examiner & Investigator (NW3C)',
      'Certified Privacy Solution Engineer (ISACA)',
      'Certified Blockchain Engineer (IIB Council) · CMMC-AB Provisional Assessor',
    ]},
  ];

  const stats = [
    ['20',    'YEARS · LAW & TECHNOLOGY'],
    ['100+',  'COURT APPOINTMENTS'],
    ['20',    'BOOKS & TREATISES'],
    ['300+',  'PUBLISHED ARTICLES'],
    ['500+',  'CITED IN OPINIONS'],
    ['600+',  'PRESENTATIONS GLOBALLY'],
  ];

  return (
    <div className="page-fade">

      {/* ============== HERO ============== */}
      <section style={{
        background: 'var(--ink)', color: 'var(--paper)',
        position: 'relative', overflow: 'hidden',
        borderBottom: '1px solid rgba(212,185,122,0.18)',
      }}>
        <div className="dotgrid-dark" style={{ position: 'absolute', inset: 0, opacity: 0.4 }}/>
        <div className="container" style={{ position: 'relative', padding: '40px 32px 0' }}>
          <div className="mono" style={{
            display: 'flex', justifyContent: 'space-between',
            fontSize: 11, color: 'var(--gold)', letterSpacing: '0.2em',
            padding: '12px 0', borderBottom: '1px solid rgba(212,185,122,0.15)',
          }}>
            <span>PRINCIPAL NEUTRAL</span>
            <span>EST. 2026 · BY APPOINTMENT</span>
            <span>D.B.G. · ESQ.</span>
          </div>
        </div>
        <div className="container" style={{
          position: 'relative',
          display: 'grid', gridTemplateColumns: '1fr 1.4fr',
          gap: 80, padding: '80px 32px 96px', alignItems: 'center',
        }}>
          <div style={{ aspectRatio: '4/5', position: 'relative', overflow: 'hidden' }}>
            <PhotoPortrait src="assets/dg-portrait.jpg"
                           caption="DANIEL B. GARRIE, ESQ."
                           cornerStamp="PORTRAIT · PLATE I"/>
          </div>
          <div>
            <div className="eyebrow on-dark">A jurist as comfortable with engineers as with the bench</div>
            <h1 className="display" style={{
              fontSize: 'clamp(56px, 7.5vw, 104px)', marginTop: 24,
              color: 'var(--paper)', letterSpacing: '-0.025em', lineHeight: 0.98,
            }}>
              Daniel B. Garrie,<br/>
              <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>Esq.</em>
            </h1>
            <p className="serif" style={{
              fontSize: 22, color: 'var(--slate-300)', marginTop: 28,
              fontStyle: 'italic', lineHeight: 1.4,
            }}>
              Mediator · Arbitrator · Special Master · Forensic Neutral
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 32 }}>
              {['Harvard · Adjunct', '20+ years', '20+ books', '300+ articles', '500+ citations', '4 U.S. patents', 'L.C.I.A.', 'H.K.I.A.C.'].map(t => (
                <span key={t} className="tag" style={{ borderColor: 'rgba(212,185,122,0.4)', color: 'var(--gold)' }}>{t}</span>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <button className="btn btn-gold" onClick={() => onNav('intake')}>
                Begin a matter <span className="arrow">→</span>
              </button>
              <button className="btn btn-ghost-light" onClick={() => onNav('notable-matters')}>
                Notable matters
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ============== § 01 BIOGRAPHY ============== */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96 }}>
            <div>
              <div className="eyebrow">§ 01 · Biography</div>
              <p className="serif" style={{
                fontSize: 14, color: 'var(--slate-700)', fontStyle: 'italic',
                marginTop: 32, lineHeight: 1.55,
              }}>
                Twenty years at the intersection of law and technology — and the intersections that conventional ADR cannot reach without it.
              </p>
            </div>
            <div>
              <p className="serif" style={{
                fontSize: 28, lineHeight: 1.3, color: 'var(--ink)',
                fontWeight: 400, letterSpacing: '-0.01em',
              }}>
                One of the few neutrals in the world fluent in both the law and the technology underlying the modern commercial dispute — and the only one with a J.D., a Master's and Bachelor's in Computer Science from Brandeis, four U.S. cybersecurity patents, and a Federal Judicial Center commission to author the standard reference on technology for the federal bench.
              </p>

              <p style={{ fontSize: 18, lineHeight: 1.75, color: 'var(--slate-900)', marginTop: 36 }}>
                Daniel has been appointed and appeared before the L.A. County Superior Court, the New York Supreme Court, the Delaware Supreme Court, and the United States Courts of Appeals for the Second, Third, and Seventh Circuits. He has served as Special Master, Discovery Referee, Forensic Neutral, sole and panel arbitrator, and mediator in more than a hundred state and federal matters — including <em style={{ fontStyle: 'italic' }}>In re Facebook, Inc. Consumer Privacy User Profile Litigation</em>, large-scale mass tort productions, multi-hundred-million-dollar trade secret matters, and cyber insurance coverage fights running into nine figures of exposure.
              </p>

              <p style={{ fontSize: 18, lineHeight: 1.75, color: 'var(--slate-900)', marginTop: 22 }}>
                His scholarship has shaped the field. The Federal Judicial Center commissioned him to author <em style={{ fontStyle: 'italic' }}>Understanding Software, the Internet, Mobile Computing, and the Cloud — A Guide for Judges</em>, distributed to every federal judge in the United States. He co-authored <em style={{ fontStyle: 'italic' }}>Law Firm Cybersecurity</em> (American Bar Association), <em style={{ fontStyle: 'italic' }}>Cybersecurity &amp; the Courthouse</em> (Wolters Kluwer, with Hon. L. Gordon), and four editions of the standing Thomson Reuters treatise <em style={{ fontStyle: 'italic' }}>Plugged In: Guidebook to Software and the Law</em>. He is editor-in-chief and founder of the <em style={{ fontStyle: 'italic' }}>Journal of Law &amp; Cyber Warfare</em>.
              </p>

              <blockquote style={{
                margin: '40px 0', padding: '0 0 0 28px',
                borderLeft: '2px solid var(--gold-deep)',
                fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.5,
                fontStyle: 'italic', color: 'var(--ink)',
              }}>
                Recognized by the American Bar Association and the Federal Judiciary as a subject-matter expert on cybersecurity controls and systems. Scholarship recognized by Supreme Court Justices and cited in over 500 articles, publications, and judicial opinions.
              </blockquote>

              <p style={{ fontSize: 18, lineHeight: 1.75, color: 'var(--slate-900)', marginTop: 22 }}>
                Daniel teaches Cybersecurity Law, Computer Forensics, Cryptocurrency &amp; Smart Contracts, Information Systems Forensics, and the Ethics of Cybersecurity at Harvard Extension School. He has trained hundreds of federal and state judges, Chief Information Security Officers, General Counsel, and senior executives. Outside his neutral practice he is founder and Executive Managing Partner of Law &amp; Forensics LLC, a global cybersecurity, eDiscovery, and digital forensics consulting firm whose technical bench supports his neutral work where matters require it.
              </p>

              <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => onNav('publications')}>
                  Publications &amp; books <span className="arrow">→</span>
                </button>
                <button className="btn btn-ghost" onClick={() => onNav('speaking')}>
                  Speaking &amp; events
                </button>
                <button className="btn btn-ghost" onClick={() => onNav('insights')}>
                  Insights from the bench
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============== STATS STRIP ============== */}
      <section style={{ background: 'var(--paper-2)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }}>
        <div className="container" style={{ padding: '56px 32px' }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.2em', marginBottom: 24, textTransform: 'uppercase' }}>
            By the numbers
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '24px 32px' }}>
            {stats.map(([k, v]) => (
              <div key={v}>
                <div className="display" style={{
                  fontSize: 'clamp(40px, 4.4vw, 64px)', color: 'var(--gold-deep)',
                  fontWeight: 300, lineHeight: 1, letterSpacing: '-0.025em',
                }}>{k}</div>
                <div className="mono" style={{
                  fontSize: 9, letterSpacing: '0.18em', color: 'var(--slate-700)',
                  marginTop: 12, textTransform: 'uppercase', lineHeight: 1.4,
                }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== § 02 DISTINCTIONS ============== */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow">§ 02 · Distinctions</div>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', marginTop: 16, lineHeight: 1.05 }}>
                What sets the practice <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic', fontWeight: 300 }}>apart.</em>
              </h2>
            </div>
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 0, border: '1px solid var(--line-soft)', background: 'var(--paper)',
          }}>
            {[
              { n: 'I',   t: 'Author for the federal bench',
                d: 'Commissioned by the Federal Judicial Center to author Understanding Software, the Internet, Mobile Computing, and the Cloud — A Guide for Judges (2015), distributed to every federal judge in the United States.' },
              { n: 'II',  t: 'Recognized by the ABA and federal judiciary',
                d: 'Recognized by the American Bar Association and the Federal Judiciary as a subject-matter expert on cybersecurity controls and systems.' },
              { n: 'III', t: 'Cited in 500+ opinions and articles',
                d: 'Scholarship cited in over 500 articles, publications, and judicial opinions — including recognition by Supreme Court Justices.' },
              { n: 'IV',  t: 'Co-inventor on four U.S. patents',
                d: 'U.S. Patents 10546129, 10528738, 9990498, 9990497 — cybersecurity inventions, plus one patent-pending forensic technology.' },
            ].map((d, i) => (
              <div key={d.n} style={{
                padding: 40,
                borderRight: i % 2 === 0 ? '1px solid var(--line-soft)' : 'none',
                borderBottom: i < 2 ? '1px solid var(--line-soft)' : 'none',
              }}>
                <div className="display" style={{ fontSize: 36, color: 'var(--gold-deep)', fontWeight: 300, lineHeight: 1, marginBottom: 16 }}>
                  {d.n}
                </div>
                <h3 className="serif" style={{ fontSize: 24, fontWeight: 500, lineHeight: 1.2, color: 'var(--ink)' }}>{d.t}</h3>
                <p style={{ fontSize: 15, color: 'var(--slate-700)', lineHeight: 1.65, marginTop: 14 }}>{d.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== § 03 IN HIS VOICE ============== */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <div className="container">
          <div className="eyebrow on-dark">§ 03 · In His Voice</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', color: 'var(--paper)', lineHeight: 1.05, marginTop: 16, marginBottom: 16 }}>
            Four principles that hold across <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>every engagement.</em>
          </h2>
          <p className="serif" style={{ fontSize: 19, color: 'var(--slate-300)', fontStyle: 'italic', maxWidth: 760, marginBottom: 56, lineHeight: 1.55 }}>
            What I have come to believe after twenty years at the bench of complex disputes.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
            {[
              { k: 'I',   h: 'When the dispute is technical, the neutral must be too.',
                d: 'Not just versed in technology. Fluent. The mediator who can read the IR report, the source code, the model card, and the smart-contract bytecode — directly — collapses the distance between rooms in a way no generalist can.' },
              { k: 'II',  h: 'A finding both sides agreed in advance to treat as authoritative removes the dispute.',
                d: 'A party-retained expert produces evidence; a court-appointed forensic neutral produces shared understanding. The advance agreement is what makes the role effective.' },
              { k: 'III', h: 'Speed is a craft, not a marketing line.',
                d: 'Protocols within days. Discovery rulings within five business days. Forensic reports within thirty days for straightforward matters. Awards within sixty to ninety days of the close of hearings.' },
              { k: 'IV',  h: 'Process is bespoke; rigor is not.',
                d: 'No two matters are the same. The methodology is. Reproducible analysis. Documented chain of custody. Tiered protective access. Reasoned written outputs that survive cross.' },
            ].map(p => (
              <blockquote key={p.k} style={{
                border: '1px solid rgba(212,185,122,0.25)', padding: 32,
                background: 'rgba(244,240,230,0.03)', position: 'relative',
              }}>
                <div className="display" style={{ fontSize: 36, color: 'var(--gold)', fontWeight: 300, lineHeight: 1, position: 'absolute', top: 20, right: 28 }}>{p.k}</div>
                <p className="serif" style={{ fontSize: 22, fontStyle: 'italic', lineHeight: 1.4, color: 'var(--paper)', fontWeight: 400, paddingRight: 56 }}>
                  &ldquo;{p.h}&rdquo;
                </p>
                <p style={{ fontSize: 15, color: 'var(--slate-300)', lineHeight: 1.65, marginTop: 18 }}>{p.d}</p>
                <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.2em', marginTop: 18 }}>
                  — D.B.G.
                </div>
              </blockquote>
            ))}
          </div>
        </div>
      </section>

      {/* ============== § 04 CAREER ARC ============== */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96 }}>
            <div>
              <div className="eyebrow">§ 04 · Career Arc</div>
              <p className="serif" style={{ fontSize: 14, color: 'var(--slate-700)', fontStyle: 'italic', marginTop: 32, lineHeight: 1.55 }}>
                Selected milestones. The full record runs longer.
              </p>
            </div>
            <div>
              <ol style={{ listStyle: 'none', borderLeft: '2px solid var(--gold)', marginLeft: 8 }}>
                {[
                  { y: '2002', t: 'U.S. Department of Justice',
                    d: 'Senior Consultant to the Deputy Attorney General. The earliest formal seat at the intersection of legal practice and computer science.' },
                  { y: '2005', t: 'Federal Judicial Center',
                    d: 'Legal Associate. A decade later, the FJC commissions the standard reference on technology for the federal bench.' },
                  { y: '2008', t: 'Founded Law & Forensics LLC',
                    d: 'Builds the global cybersecurity, eDiscovery, and digital forensics consulting firm whose technical bench supports the future neutral practice.' },
                  { y: '2012', t: 'Founded Journal of Law & Cyber Warfare',
                    d: 'Editor-in-Chief of the leading peer-reviewed venue for cyber-warfare law scholarship. Admitted to the Washington bar.' },
                  { y: '2015', t: 'FJC commission published',
                    d: 'Understanding Software, the Internet, Mobile Computing, and the Cloud — A Guide for Judges, distributed to every federal judge in the United States.' },
                  { y: '2017–19', t: 'Standing treatises',
                    d: 'Law Firm Cybersecurity (American Bar Association, 2017); Cybersecurity & the Courthouse (Wolters Kluwer, 2019, with Hon. L. Gordon).' },
                  { y: '2020', t: 'Harvard Extension Adjunct',
                    d: 'Five courses across cybersecurity law, forensics, crypto and smart contracts, ethics — taught annually to Harvard graduate students and external candidates.' },
                  { y: '2021', t: 'Special Master, In re Facebook',
                    d: 'Appointed Special Master in In re: Facebook, Inc. Consumer Privacy User Profile Litigation, one of the largest privacy class actions in U.S. history.' },
                  { y: '2022', t: 'U.S. Supreme Court Bar',
                    d: 'Admitted to the bar of the Supreme Court of the United States.' },
                  { y: '2026', t: 'Tailored Mediation launched',
                    d: 'A neutral practice scoped to the specific matter — its technical character, scale, venue, and risk tolerance.' },
                ].map((e, i) => (
                  <li key={i} style={{ position: 'relative', paddingLeft: 36, paddingBottom: 28, marginBottom: 4 }}>
                    <span style={{
                      position: 'absolute', left: -7, top: 6,
                      width: 12, height: 12, borderRadius: 0,
                      background: 'var(--gold-deep)',
                      border: '3px solid var(--paper)',
                    }}/>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.2em', fontWeight: 500 }}>
                      {e.y}
                    </div>
                    <h4 className="serif" style={{ fontSize: 21, lineHeight: 1.25, fontWeight: 500, color: 'var(--ink)', marginTop: 6 }}>
                      {e.t}
                    </h4>
                    <p style={{ fontSize: 15, color: 'var(--slate-700)', lineHeight: 1.65, marginTop: 6, maxWidth: 700 }}>
                      {e.d}
                    </p>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>
      </section>

      {/* ============== § 05 FEATURED PUBLICATIONS ============== */}
      <section className="section" style={{ background: 'var(--paper-2)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow">§ 05 · Featured Publications</div>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', marginTop: 16, lineHeight: 1.05 }}>
                Books that <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic', fontWeight: 300 }}>shape the field.</em>
              </h2>
            </div>
            <button className="btn btn-ghost" onClick={() => onNav('publications')}>
              Full publications <span className="arrow">→</span>
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
            {[
              { title: 'Understanding Software, the Internet, Mobile Computing, and the Cloud',
                sub: 'A Guide for Judges', year: '2015', publisher: 'FEDERAL JUDICIAL CENTER', accent: '#1F2D44',
                note: 'Commissioned by the FJC; distributed to every federal judge in the United States.' },
              { title: 'Cybersecurity & the Courthouse', sub: 'Safeguarding the Judicial Process',
                year: '2019', publisher: 'WOLTERS KLUWER', accent: '#003366',
                note: 'Co-authored with Hon. L. Gordon. How courts must defend the integrity of judicial systems.' },
              { title: 'Law Firm Cybersecurity', sub: 'The standing treatise on cybersecurity for law firms',
                year: '2017', publisher: 'AMERICAN BAR ASSOCIATION', accent: '#7B1F2B',
                note: 'Co-authored with B. Spernow. Published by the ABA.' },
              { title: 'Plugged In', sub: 'Guidebook to Software and the Law (4 editions)',
                year: '2015–2020', publisher: 'THOMSON REUTERS', accent: '#0A1424',
                note: 'Co-authored with Hon. F. Allegra. Standing reference; four editions.' },
            ].map((b, i) => (
              <div key={i}>
                <div style={{ marginBottom: 16 }}>
                  {window.BookCover && <window.BookCover
                    title={b.title} sub={b.sub} year={b.year}
                    publisher={b.publisher} accent={b.accent}/>}
                </div>
                <p style={{ fontSize: 13, color: 'var(--slate-700)', lineHeight: 1.55, fontStyle: 'italic' }}>
                  {b.note}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== § 06 GLOBAL REACH ============== */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <div className="container">
          <div className="eyebrow on-dark">§ 06 · Global Reach</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'flex-start', marginTop: 16 }}>
            <div>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', color: 'var(--paper)', lineHeight: 1.05 }}>
                Tailored mediations,<br/>
                <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>wherever the matter sits.</em>
              </h2>
              <p style={{ fontSize: 18, color: 'var(--slate-300)', maxWidth: 600, marginTop: 24, lineHeight: 1.65 }}>
                Appointed by U.S. Federal and State courts. Sitting on tribunals at L.C.I.A. and H.K.I.A.C. International device-collection coordination through FBI, Interpol, and counterpart agencies.
              </p>
            </div>
            <div style={{
              padding: '24px 28px',
              border: '1px solid rgba(212,185,122,0.3)',
              background: 'rgba(244,240,230,0.04)',
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: 'var(--gold)', marginBottom: 12 }}>
                ANCHOR VENUES · IN-PERSON
              </div>
              <p style={{ fontSize: 18, color: 'var(--paper)', lineHeight: 1.5, fontWeight: 400 }}>
                Los Angeles · New York<br/>
                Tel Aviv · Geneva · Singapore
              </p>
              <p style={{ fontSize: 13, color: 'var(--slate-300)', lineHeight: 1.55, marginTop: 14, fontStyle: 'italic' }}>
                Additional in-person sessions in Seattle, Miami, Park City, Barcelona, Dubai, and Tokyo by arrangement. Virtual or hybrid wherever else.
              </p>
            </div>
          </div>
          <div style={{ marginTop: 56 }}>
            <JurisdictionMap/>
          </div>
        </div>
      </section>

      {/* ============== AFFILIATIONS LOGO WALL ============== */}
      {window.AffiliationsStrip && <window.AffiliationsStrip/>}

      {/* ============== § 07 CREDENTIALS ============== */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow">§ 07 · Credentials</div>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', marginTop: 16, lineHeight: 1.05 }}>
                Education, faculty, memberships, <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic', fontWeight: 300 }}>and patents.</em>
              </h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 36 }}>
            {credentials.map(c => (
              <div key={c.cat} style={{
                padding: 32, background: 'var(--paper)',
                border: '1px solid var(--line-soft)',
              }}>
                <h3 className="display" style={{ fontSize: 22, marginBottom: 18, lineHeight: 1.2 }}>{c.cat}</h3>
                <ul style={{ listStyle: 'none', borderTop: '1px solid var(--line-soft)' }}>
                  {c.items.map(i => (
                    <li key={i} style={{
                      padding: '12px 0', borderBottom: '1px solid var(--line-soft)',
                      fontSize: 14, color: 'var(--slate-900)', lineHeight: 1.55,
                    }}>
                      {i}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== § 08 TEAM & NETWORK ============== */}
      <section className="section" style={{ background: 'var(--paper-2)' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 16 }}>§ 08 · Team &amp; Network</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 1.05, marginBottom: 16 }}>
            Daniel anchors a network of <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic' }}>retired-judge co-mediators</em> and a <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic' }}>technical bench.</em>
          </h2>
          <p className="serif" style={{ fontSize: 18, color: 'var(--slate-700)', lineHeight: 1.55, fontStyle: 'italic', maxWidth: 760, marginBottom: 56 }}>
            Where a matter calls for it, Daniel co-mediates with retired federal and state judges he has authored with for over a decade, and draws on the technical bench at Law &amp; Forensics for forensic preservation, model-weight review, and ESI protocol design.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.22em', marginBottom: 24 }}>
                CO-MEDIATORS · RETIRED JUDICIARY
              </div>
              <ul style={{ listStyle: 'none', borderTop: '1px solid var(--line-soft)' }}>
                {[
                  { n: 'Hon. Gail Andler',         r: 'Retired Cal. Sup. Ct. judge; frequent co-author (LA Daily Journal columns on technical mediation, 2017–2024); JAMS panelist.' },
                  { n: 'Hon. Thomas I. Vanaskie',  r: 'Retired Third Circuit judge; co-presenter on Special Masters in federal court; JAMS neutral.' },
                  { n: 'Hon. Frank Allegra',       r: 'Retired U.S. Court of Federal Claims; co-author of Plugged In: Guidebook to Software and the Law (Thomson Reuters, four editions).' },
                  { n: 'Hon. Larry Gordon',        r: 'Retired judicial officer; co-author of Cybersecurity & the Courthouse (Wolters Kluwer, 2019).' },
                ].map(p => (
                  <li key={p.n} style={{ padding: '24px 0', borderBottom: '1px solid var(--line-soft)' }}>
                    <h4 className="serif" style={{ fontSize: 22, fontWeight: 500, lineHeight: 1.2 }}>{p.n}</h4>
                    <p style={{ fontSize: 14, color: 'var(--slate-700)', marginTop: 8, lineHeight: 1.6 }}>{p.r}</p>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.22em', marginBottom: 24 }}>
                TECHNICAL BENCH · LAW &amp; FORENSICS
              </div>
              <ul style={{ listStyle: 'none', borderTop: '1px solid var(--line-soft)' }}>
                {[
                  { n: 'David Cass',     r: 'Cybersecurity practitioner and Harvard Extension co-instructor; long-running co-author with Daniel on cyber warfare, board-level cyber risk, and incident response.' },
                  { n: 'Jared Deutsch',  r: 'Senior associate at Law & Forensics; frequent co-author on deepfakes, SEC cyber rules, vendor risk, and AI in eDiscovery.' },
                  { n: 'Jeff Hoekstra',  r: 'eDiscovery and forensic specialist; long-running co-author with Daniel on social media evidence, e-discovery in cloud, and special-master practice.' },
                  { n: 'Bill Spernow',   r: 'Forensic engineer; co-author with Daniel of Law Firm Cybersecurity (American Bar Association, 2017) and the Federal Lawyer pieces on digital forensic reports.' },
                ].map(p => (
                  <li key={p.n} style={{ padding: '24px 0', borderBottom: '1px solid var(--line-soft)' }}>
                    <h4 className="serif" style={{ fontSize: 22, fontWeight: 500, lineHeight: 1.2 }}>{p.n}</h4>
                    <p style={{ fontSize: 14, color: 'var(--slate-700)', marginTop: 8, lineHeight: 1.6 }}>{p.r}</p>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <p className="serif" style={{ fontSize: 14, color: 'var(--slate-700)', fontStyle: 'italic', marginTop: 40, lineHeight: 1.6 }}>
            Curated panel. Daniel's working network includes additional retired judges, current and former regulators, and senior technical practitioners who staff up matters as scope requires.
          </p>
        </div>
      </section>

      {/* ============== § 09 IN THE PRESS ============== */}
      <section className="section">
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 16 }}>§ 09 · In the Press</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 1.05, marginBottom: 56 }}>
            Interviewed by <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic', fontWeight: 300 }}>the bench, the bar, and the trade.</em>
          </h2>
          <ul style={{ listStyle: 'none', borderTop: '1px solid var(--line-soft)' }}>
            {[
              { y: '2019', v: 'Los Angeles Daily Journal', t: 'Wrote the Book', by: 'C. Stoddard' },
              { y: '2019', v: 'Cyber Insecurity News', t: 'Reviewing 2018 and Predicting What\u2019s Ahead in Cybersecurity', by: 'D. Hechler' },
              { y: '2018', v: 'Legal Black Book', t: 'Predictions and Threats for the Year in Cybersecurity', by: 'D. Hechler' },
              { y: '2017', v: 'authentic8 Blog', t: 'The One IT Security Issue That Too Many Media Are Totally Missing', by: 'G. Meissner' },
              { y: '2017', v: 'LexisNexis PSL', t: 'How Organizations Should Respond to Cybersecurity Incidents', by: 'M. Kagu' },
              { y: '2016', v: 'Thomson Reuters Legal Executive Blog', t: 'How Prepared Are Law Firms to Face Cyber Security Threats?', by: 'J. Raczynski' },
              { y: '2015', v: 'The National Law Review', t: 'Cybersecurity Concerns: A Conversation with Daniel Garrie', by: 'E. Spear' },
              { y: '2014', v: 'The New York Times — DealBook', t: 'Law Firms Are Pressed on Security for Data', by: 'M. Goldstein' },
              { y: '2014', v: 'SC Magazine (eBook)', t: 'Insider Threat: The Accidental Threat', by: 'S. Lawton' },
              { y: '2010', v: 'Corporate Counsel', t: 'How to Keep ESI at Bay in e-Discovery', by: 'E. Sherman' },
            ].map((p, i) => (
              <li key={i} style={{
                padding: '24px 0', borderBottom: '1px solid var(--line-soft)',
                display: 'grid', gridTemplateColumns: '70px 1fr', gap: 28, alignItems: 'baseline',
              }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.2em' }}>{p.y}</span>
                <div>
                  <div className="serif" style={{ fontSize: 19, color: 'var(--ink)', fontWeight: 500, lineHeight: 1.3 }}>
                    "{p.t}"
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.18em', marginTop: 6, textTransform: 'uppercase' }}>
                    {p.v} · {p.by}
                  </div>
                </div>
              </li>
            ))}
          </ul>
          <p className="serif" style={{ fontSize: 13, color: 'var(--slate-700)', fontStyle: 'italic', marginTop: 24, lineHeight: 1.6 }}>
            Press inquiries: press@tailoredmediation.com
          </p>
        </div>
      </section>

      {/* ============== § 10 REFERENCES ============== */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <div className="container">
          <div className="eyebrow on-dark" style={{ marginBottom: 16 }}>§ 10 · References</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 1.05, color: 'var(--paper)', marginBottom: 24, maxWidth: 760 }}>
            Live references from <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>the bench and the bar.</em>
          </h2>
          <p className="serif" style={{ fontSize: 19, color: 'var(--slate-300)', fontStyle: 'italic', maxWidth: 720, lineHeight: 1.55, marginBottom: 40 }}>
            Counsel evaluating Daniel for an engagement may request live references through the case manager. Daniel will provide direct contact information for retired-judge co-mediators, lead counsel of recent matters, and (with permission) the appointing judges of recent special-master engagements.
          </p>
          <button className="btn btn-gold" onClick={() => onNav('contact')}>
            Request references <span className="arrow">→</span>
          </button>
        </div>
      </section>

      {/* ============== CTA CLOSER ============== */}
      <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">Next step</div>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 68px)', marginTop: 16, lineHeight: 1.05 }}>
                Open a confidential matter request.
              </h2>
              <p className="serif" style={{ fontSize: 18, color: 'var(--slate-700)', fontStyle: 'italic', marginTop: 20, lineHeight: 1.55, maxWidth: 480 }}>
                Eight considered questions, five minutes. Conflicts cleared within 48 hours. First session within 14–60 days for mediation; sooner for special-master and forensic-neutral roles.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button className="btn btn-primary" onClick={() => onNav('intake')}>
                Open match intake <span className="arrow">→</span>
              </button>
              <button className="btn btn-ghost" onClick={() => onNav('engagement-terms')}>
                Engagement terms
              </button>
              <button className="btn btn-ghost" onClick={() => onNav('contact')}>
                Direct contact
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// Formspree endpoint — pulled from /config.jsx (window.SITE_CONFIG.FORM_ENDPOINT).
// Web developer: change FORM_ENDPOINT in config.jsx, NOT here.
const FORM_ENDPOINT = (window.SITE_CONFIG && window.SITE_CONFIG.FORM_ENDPOINT) || 'https://formspree.io/f/YOUR_FORMSPREE_ID';

const ContactPage = ({ onNav }) => {
  const { useState } = React;
  const [status, setStatus] = useState('idle'); // idle | submitting | submitted | error
  const [errMsg, setErrMsg] = useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    // Honeypot — bots fill this; humans don't.
    if (form.elements.website && form.elements.website.value) {
      setStatus('submitted');
      return;
    }
    // Form endpoint not yet configured — surface friendly fallback.
    if (window.SITE_CONFIG && !window.SITE_CONFIG.isFormEndpointConfigured()) {
      setErrMsg('The contact form is not yet wired to a delivery endpoint. Please email matters@tailoredmediation.com directly.');
      setStatus('error');
      return;
    }
    setStatus('submitting');
    setErrMsg('');
    try {
      const data = new FormData(form);
      const res = await fetch(FORM_ENDPOINT, {
        method: 'POST',
        body: data,
        headers: { Accept: 'application/json' },
      });
      if (res.ok) {
        setStatus('submitted');
        form.reset();
      } else {
        const j = await res.json().catch(() => ({}));
        setErrMsg(j.error || 'Something went wrong. Please email matters@tailoredmediation.com directly.');
        setStatus('error');
      }
    } catch (err) {
      setErrMsg('Network error. Please email matters@tailoredmediation.com directly.');
      setStatus('error');
    }
  }

  return (
    <div className="page-fade">
      <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '120px 0 80px', position: 'relative', overflow: 'hidden' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="eyebrow on-dark">Reach the Practice</div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 7.5vw, 96px)', marginTop: 16, color: 'var(--paper)' }}>
              Contact.
            </h1>
            <p className="serif" style={{ fontSize: 21, color: 'var(--slate-300)', marginTop: 24, fontStyle: 'italic', maxWidth: 540, lineHeight: 1.5 }}>
              By appointment. Privately scheduled. Direct retentions and administered engagements both accepted. Engagements seated wherever the matter sits — in-person, virtual, or hybrid.
            </p>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Seal size={220}/>
          </div>
        </div>
      </section>

      {/* Candid banner */}
      <section style={{ position: 'relative', height: 280, overflow: 'hidden', borderBottom: '1px solid var(--line-soft)' }}>
        <img src="assets/dg-candid-wide.jpg" alt="Daniel B. Garrie, Esq."
             style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 35%', display: 'block', filter: 'contrast(1.02) saturate(0.95)' }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(90deg, rgba(10,20,36,0.55) 0%, rgba(10,20,36,0.15) 50%, rgba(10,20,36,0.55) 100%)',
          pointerEvents: 'none',
        }}/>
        <div className="container" style={{
          position: 'absolute', left: '50%', bottom: 24, transform: 'translateX(-50%)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          color: 'var(--paper)', padding: '0 32px',
        }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--gold)' }}>
            DANIEL B. GARRIE, ESQ.
          </span>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--gold)', opacity: 0.7 }}>
            BY APPOINTMENT
          </span>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>Direct</div>
              <div style={{ borderTop: '1px solid var(--line-soft)' }}>
                {[
                  ['Practice', 'Tailored Mediation — Daniel B. Garrie, Esq.'],
                  ['Direct (matters)', 'matters@tailoredmediation.com'],
                  ['Direct (general)', 'info@tailoredmediation.com'],
                  ['Telephone', '+1 (213) 620-1133'],
                  ['Encrypted', 'PGP available on request'],
                  ['Engagements', 'In-person · Virtual · Hybrid'],
                ].map(([k, v]) => (
                  <div key={k} style={{ padding: '18px 0', borderBottom: '1px solid var(--line-soft)' }}>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>{k}</div>
                    <div className="serif" style={{ fontSize: 18, marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>
              <p style={{ fontSize: 14, color: 'var(--slate-700)', marginTop: 24, lineHeight: 1.6 }}>
                For urgent matters please use the match intake form, which routes directly to Daniel and the case manager.
              </p>
              <button className="btn btn-ghost" style={{ marginTop: 16 }} onClick={() => onNav('intake')}>
                Open match intake <span className="arrow">→</span>
              </button>
            </div>
            <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line-soft)', padding: 40 }}>
              {status === 'submitted' ? (
                <div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.18em' }}>MESSAGE RECEIVED</div>
                  <h3 className="display" style={{ fontSize: 32, marginTop: 16 }}>Thank you.</h3>
                  <p className="serif" style={{ fontSize: 18, marginTop: 12, color: 'var(--slate-700)', lineHeight: 1.6 }}>
                    A case manager will respond within one business day. For urgent matters, please use the match intake.
                  </p>
                  <button className="btn btn-ghost" style={{ marginTop: 20 }} onClick={() => setStatus('idle')}>
                    Send another <span className="arrow">→</span>
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} action={FORM_ENDPOINT} method="POST">
                  <div className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.18em', marginBottom: 24 }}>
                    GENERAL INQUIRY
                  </div>
                  {[
                    ['Name', 'text', 'name'],
                    ['Firm / Organization', 'text', 'organization'],
                    ['Email', 'email', 'email'],
                    ['Phone', 'tel', 'phone'],
                  ].map(([l, t, n]) => (
                    <div key={n} style={{ marginBottom: 18 }}>
                      <label htmlFor={`fld-${n}`} className="mono" style={{ fontSize: 10, color: 'var(--slate-700)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>{l}</label>
                      <input id={`fld-${n}`} name={n} required={n !== 'phone'} type={t}
                        autoComplete={n === 'name' ? 'name' : n === 'email' ? 'email' : n === 'phone' ? 'tel' : 'organization'}
                        style={{
                          display: 'block', width: '100%', marginTop: 6, padding: '12px 14px',
                          border: '1px solid var(--line-soft)', background: 'var(--paper)',
                          fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ink)',
                        }}/>
                    </div>
                  ))}
                  <div style={{ marginBottom: 18 }}>
                    <label htmlFor="fld-subject" className="mono" style={{ fontSize: 10, color: 'var(--slate-700)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Subject</label>
                    <select id="fld-subject" name="subject" required style={{
                      display: 'block', width: '100%', marginTop: 6, padding: '12px 14px',
                      border: '1px solid var(--line-soft)', background: 'var(--paper)',
                      fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ink)',
                    }}>
                      <option value="">Choose…</option>
                      <option>Mediation inquiry</option>
                      <option>Special Master / Forensic Neutral inquiry</option>
                      <option>Arbitration inquiry</option>
                      <option>Speaking / event invitation</option>
                      <option>Press / media</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div style={{ marginBottom: 24 }}>
                    <label htmlFor="fld-message" className="mono" style={{ fontSize: 10, color: 'var(--slate-700)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Brief description</label>
                    <textarea id="fld-message" name="message" required rows={5} style={{
                      display: 'block', width: '100%', marginTop: 6, padding: '12px 14px',
                      border: '1px solid var(--line-soft)', background: 'var(--paper)',
                      fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ink)', resize: 'vertical',
                    }}/>
                  </div>

                  {/* Honeypot — invisible to humans */}
                  <input type="text" name="website" autoComplete="off" tabIndex="-1"
                    aria-hidden="true"
                    style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}/>
                  {/* Subject line for the email Formspree forwards */}
                  <input type="hidden" name="_subject" value={(window.SITE_CONFIG && window.SITE_CONFIG.FORM_SUBJECT_CONTACT) || 'Tailored Mediation — new inquiry'}/>
                  {/* Page that submitted */}
                  <input type="hidden" name="_source" value="contact-page"/>

                  {status === 'error' && (
                    <div style={{ background: 'var(--paper)', border: '1px solid #c33', padding: 12, marginBottom: 16, fontSize: 14, color: '#c33' }}>
                      {errMsg}
                    </div>
                  )}

                  <button type="submit" disabled={status === 'submitting'} className="btn btn-primary">
                    {status === 'submitting' ? 'Sending…' : 'Send inquiry'} <span className="arrow">→</span>
                  </button>

                  <p style={{ fontSize: 12, color: 'var(--slate-700)', marginTop: 16, lineHeight: 1.5 }}>
                    Submissions are forwarded by email and are not protected by attorney-client privilege. Please do not include privileged or matter-sensitive details here; use the match intake for confidential matter information.
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.AboutPage = AboutPage;
window.ContactPage = ContactPage;