// Homepage
const HomePage = ({ onNav, tweaks }) => {
  const heroVariant = tweaks.heroVariant || 'split';

  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.2)'
      }}>
        <div className="dotgrid-dark" style={{
          position: 'absolute', inset: 0, opacity: 0.5
        }}/>
        <div className="container" style={{ position: 'relative', padding: '40px 32px 0' }}>
          {/* metadata stamp */}
          <div className="mono" style={{
            display: 'flex', justifyContent: 'space-between',
            fontSize: 11, color: 'var(--gold)', letterSpacing: '0.18em',
            padding: '12px 0', borderBottom: '1px solid rgba(212,185,122,0.15)'
          }}>
            <span>LA · NYC · TEL AVIV · GENEVA · SINGAPORE</span>
            <span>NEUTRAL PRACTICE · BY APPOINTMENT</span>
            <span>DOCKET № TM-2026-001</span>
          </div>
        </div>
        <div className="container" style={{
          position: 'relative',
          display: 'grid', gridTemplateColumns: '1.15fr 1fr',
          gap: 64, padding: '88px 32px 96px', alignItems: 'center'
        }}>
          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 32 }}>
              · Technical Neutral · AI · Forensic · Special Master
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(48px, 6.5vw, 88px)', color: 'var(--paper)' }}>
              Disputes that turn on{' '}
              <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>
                code, data,
              </em>
              <br/>
              and the line between them.
            </h1>
            <p style={{
              maxWidth: 540, marginTop: 32, fontSize: 18, lineHeight: 1.6,
              color: 'var(--slate-300)'
            }}>
              A neutral practice for high-stakes mediation, special master appointments,
              and forensic neutral work — built around matters where the technology
              <em style={{ color: 'var(--paper)', fontStyle: 'italic' }}> is </em>
              the dispute.
            </p>
            <div style={{ display: 'flex', gap: 16, marginTop: 40 }}>
              <button className="btn btn-gold" onClick={() => onNav('intake')}>
                Match an expert <span className="arrow">→</span>
              </button>
              <button className="btn btn-ghost-light" onClick={() => onNav('services')}>
                See engagements
              </button>
            </div>
            {/* signature block */}
            <div style={{
              marginTop: 64, paddingTop: 24,
              borderTop: '1px solid rgba(212,185,122,0.15)',
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32
            }}>
              {[
                ['400+', 'Technical & legal publications'],
                ['20yr', 'At the bench of complex disputes'],
                ['$10M-$1B', 'Typical matter exposure'],
              ].map(([k, v]) => (
                <div key={k}>
                  <div className="display" style={{ fontSize: 32, color: 'var(--gold)' }}>{k}</div>
                  <div className="mono" style={{
                    fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                    color: 'var(--slate-300)', marginTop: 6
                  }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{
            border: '1px solid rgba(212,185,122,0.25)',
            background: 'rgba(15,27,45,0.4)',
            position: 'relative', aspectRatio: '6/5'
          }}>
            <div className="mono" style={{
              position: 'absolute', top: 12, left: 16, fontSize: 9,
              color: 'rgba(212,185,122,0.7)', letterSpacing: '0.2em'
            }}>FIG.01 · CONVERGENT RESOLUTION TOPOLOGY</div>
            <div className="mono" style={{
              position: 'absolute', top: 12, right: 16, fontSize: 9,
              color: 'rgba(212,185,122,0.7)', letterSpacing: '0.2em'
            }}>v.2026.4</div>
            <HeroSchematic variant="a"/>
          </div>
        </div>
      </section>

      {/* ============== AFFILIATIONS / LOGO WALL ============== */}
      {window.AffiliationsStrip && <window.AffiliationsStrip title="Appointed · affiliated · published"/>}

      {/* ============== THESIS ============== */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 64, alignItems: 'start' }}>
            <div>
              <div className="eyebrow">§ 01 · Thesis</div>
              <div style={{ marginTop: 24 }}>
                {window.CodeMeetsLawDiagram && <window.CodeMeetsLawDiagram/>}
              </div>
              <div className="mono" style={{ marginTop: 16, fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.18em', textAlign: 'right' }}>
                FIG. CODE × CASE LAW · WHERE THEY MEET
              </div>
            </div>
            <div>
              <h2 className="display" style={{ fontSize: 'clamp(34px, 4.2vw, 56px)' }}>
                Most disputes settle when someone in the room can read the{' '}
                <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic', fontWeight: 300 }}>
                  source code
                </em>{' '}
                and the{' '}
                <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic', fontWeight: 300 }}>
                  case law
                </em>.
              </h2>
              <p style={{
                maxWidth: 620, marginTop: 32, fontSize: 18, lineHeight: 1.65,
                color: 'var(--slate-700)'
              }}>
                Tailored Mediation is built for matters that exceed conventional ADR.
                AI-system liability. Trade-secret theft expressed in commits and access logs.
                Smart-contract disputes auto-executed before counsel can file.
                Multi-million-dollar cyber insurance coverage fights with TB-scale forensic records.
                When the dispute is technical, the neutral must be too.
              </p>
              <div className="mono" style={{ marginTop: 32, fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.18em' }}>
                — D.B.G.
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="hairline"/>

      {/* ============== ENGAGEMENTS — 5 ROLES TEASER ============== */}
      <section className="section" style={{ background: 'var(--paper-2)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow">§ 02 · Engagements</div>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, lineHeight: 1.05 }}>
                Five engagements. <em style={{ fontStyle: 'italic', color: 'var(--gold-deep)', fontWeight: 300 }}>One bench.</em>
              </h2>
            </div>
            <button className="btn btn-ghost" onClick={() => onNav('services')}>
              All engagements <span className="arrow">→</span>
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, border: '1px solid var(--line-soft)', background: 'var(--paper)' }}>
            {[
              { id: 'mediation',       n: '01', title: 'Mediation',         tag: 'PRIVATELY-ADMINISTERED' },
              { id: 'special-master',  n: '02', title: 'Special Master',    tag: 'COURT-APPOINTED' },
              { id: 'forensic-neutral',n: '03', title: 'Forensic Neutral',  tag: 'TRIBUNAL-APPOINTED' },
              { id: 'ai-disputes',     n: '04', title: 'AI Disputes',       tag: 'TRIBUNAL SERVICES' },
              { id: 'arbitration',     n: '05', title: 'Arbitration',       tag: 'SOLE OR PANEL' },
            ].map((s, i, all) => (
              <button key={s.id} onClick={() => onNav(s.id)} style={{
                padding: 28, textAlign: 'left',
                borderRight: i < all.length - 1 ? '1px solid var(--line-soft)' : 'none',
                background: 'transparent', cursor: 'pointer',
                transition: 'background 0.18s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper-2)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
                <div className="display" style={{ fontSize: 44, color: 'var(--gold-deep)', fontWeight: 300, lineHeight: 1 }}>
                  {s.n}
                </div>
                <h3 className="serif" style={{ fontSize: 22, marginTop: 16, lineHeight: 1.15, fontWeight: 500 }}>
                  {s.title}
                </h3>
                <div className="mono" style={{ fontSize: 9, color: 'var(--slate-700)', letterSpacing: '0.18em', marginTop: 10, textTransform: 'uppercase' }}>
                  {s.tag}
                </div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--gold-deep)', letterSpacing: '0.2em', marginTop: 28 }}>
                  READ →
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ============== ENGINE / INTAKE TEASER ============== */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
            <div>
              <div className="eyebrow on-dark">§ 03 · Match Intake</div>
              <h2 className="display" style={{
                fontSize: 'clamp(36px, 4.5vw, 60px)', marginTop: 16, color: 'var(--paper)'
              }}>
                Tell us about the matter.<br/>
                <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>
                  We'll route to the right neutral.
                </em>
              </h2>
              <p style={{ marginTop: 28, fontSize: 17, color: 'var(--slate-300)', maxWidth: 460, lineHeight: 1.6 }}>
                Eight considered questions. Five minutes. A confidential match
                request to a vetted neutral with subject-matter fluency for your
                specific dispute — Daniel or a curated panelist from our network.
              </p>
              <button className="btn btn-gold" style={{ marginTop: 36 }} onClick={() => onNav('intake')}>
                Begin intake <span className="arrow">→</span>
              </button>
            </div>
            <div style={{
              border: '1px solid rgba(212,185,122,0.2)', padding: 36,
              background: 'rgba(20,37,61,0.5)'
            }}>
              <div className="mono" style={{
                fontSize: 11, color: 'var(--gold)', letterSpacing: '0.2em', marginBottom: 28
              }}>
                Q.03 / 08 · DISPUTE TYPOLOGY
              </div>
              <div className="serif" style={{ fontSize: 26, lineHeight: 1.3, color: 'var(--paper)' }}>
                What is the closest characterization of your matter?
              </div>
              <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  'AI / model output liability',
                  'Trade secret · software, ML weights, schematics',
                  'Smart contract · on-chain auto-execution',
                  'Cyber insurance coverage',
                  'eDiscovery / ESI dispute',
                ].map((t, i) => (
                  <div key={i} style={{
                    padding: '14px 18px',
                    border: '1px solid rgba(255,255,255,0.1)',
                    color: i === 0 ? 'var(--paper)' : 'var(--slate-300)',
                    fontSize: 15,
                    background: i === 0 ? 'rgba(212,185,122,0.08)' : 'transparent',
                    borderColor: i === 0 ? 'var(--gold)' : 'rgba(255,255,255,0.1)',
                    display: 'flex', justifyContent: 'space-between'
                  }}>
                    <span>{t}</span>
                    {i === 0 && <span className="mono" style={{ color: 'var(--gold)', fontSize: 11 }}>SELECTED</span>}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============== INSIGHTS PREVIEW ============== */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56 }}>
            <div>
              <div className="eyebrow">§ 04 · The Future of Resolution</div>
              <h2 className="display" style={{ fontSize: 56, marginTop: 16 }}>
                Insights from the bench.
              </h2>
            </div>
            <button className="btn btn-ghost" onClick={() => onNav('insights')}>
              All writing <span className="arrow">→</span>
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {[
              { num: '003', cat: 'AI · LITIGATION', title: 'AI Hallucinations in Litigation', date: 'Mar 2026', read: '11 min', id: 'hallucinations' },
              { num: '002', cat: 'FORENSICS', title: 'Forensic Data as a Mediation Asset', date: 'Feb 2026', read: '9 min', id: 'forensic-data' },
              { num: '001', cat: 'NEUTRAL · PROFESSION', title: 'The Evolution of the Neutral Tech Expert', date: 'Jan 2026', read: '14 min', id: 'evolution' },
            ].map(a => (
              <article key={a.id} style={{ cursor: 'pointer' }} onClick={() => onNav('article-' + a.id)}>
                <div style={{
                  aspectRatio: '4/3', background: 'var(--navy)',
                  position: 'relative', overflow: 'hidden',
                  marginBottom: 20
                }}>
                  <div className="dotgrid-dark" style={{ position: 'absolute', inset: 0, opacity: 0.6 }}/>
                  <div className="mono" style={{
                    position: 'absolute', top: 16, left: 16, fontSize: 10,
                    color: 'var(--gold)', letterSpacing: '0.2em'
                  }}>{a.cat}</div>
                  <div className="display" style={{
                    position: 'absolute', bottom: 20, right: 24,
                    fontSize: 88, color: 'rgba(212,185,122,0.4)',
                    fontWeight: 300, lineHeight: 1
                  }}>{a.num}</div>
                </div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.14em' }}>
                  {a.date} · {a.read}
                </div>
                <h3 className="serif" style={{ fontSize: 26, marginTop: 8, lineHeight: 1.2 }}>
                  {a.title}
                </h3>
              </article>
            ))}
          </div>
        </div>
      </section>

      <div className="hairline"/>

      {/* ============== PRINCIPAL ============== */}
      <section className="section" style={{ background: 'var(--paper-2)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
            <div>
              <div style={{ aspectRatio: '4/5', position: 'relative', overflow: 'hidden' }}>
                <PhotoPortrait src="assets/dg-portrait.jpg" caption="DANIEL B. GARRIE, ESQ."/>
              </div>
            </div>
            <div>
              <div className="eyebrow">§ 05 · Principal Neutral</div>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4vw, 56px)', marginTop: 16, lineHeight: 1.05 }}>
                Daniel B. Garrie, Esq.
              </h2>
              <div className="serif" style={{ fontSize: 19, color: 'var(--slate-700)', marginTop: 12, fontStyle: 'italic' }}>
                Mediator · Arbitrator · Special Master · Forensic Neutral
              </div>
              <p style={{ marginTop: 32, fontSize: 17, lineHeight: 1.7, color: 'var(--slate-900)' }}>
                Twenty years at the intersection of technology and the law.
                Adjunct Professor at Harvard. Author of 400+ legal and technical
                publications, cited in 500+ articles and judicial opinions.
                Co-inventor on four cybersecurity patents. Founder of Law &amp; Forensics.
              </p>
              <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.7, color: 'var(--slate-900)' }}>
                Most recently appointed Special Master in <em>In re: Facebook, Inc.
                Consumer Privacy User Profile Litigation</em>.
              </p>
              <button className="btn btn-ghost" style={{ marginTop: 32 }} onClick={() => onNav('about')}>
                Full biography <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.HomePage = HomePage;