// Explore — sitemap-style discovery hub
// Aggregates all the routes the Explore mega-menu surfaces, with framing and brief
// descriptions so visitors can orient before navigating.

const EXPLORE_DATA = [
  {
    section: 'About',
    sub: 'Who · What · How',
    intro: 'Daniel B. Garrie is a world-class neutral resolving the disputes that conventional ADR cannot reach without technical fluency. The pages here introduce him, define the practice model, and contrast it with the alternative.',
    items: [
      {
        id: 'about',
        title: 'Daniel B. Garrie, Esq.',
        desc: 'Biography, credentials, representative matters, network, and counsel comments. Twenty years at the intersection of law and technology.',
      },
      {
        id: 'what-is',
        title: 'What is Tailored Mediation?',
        desc: 'A model of dispute resolution scoped to the specific matter — its technical character, scale, venue, and risk tolerance. Origins, characteristics, when it fits.',
      },
      {
        id: 'tailored-vs-standard',
        title: 'Tailored vs. Standard Mediation',
        desc: 'Side-by-side comparison: process design, neutral profile, evidence handling, confidentiality, timelines, costs, and outcomes.',
      },
    ],
  },
  {
    section: 'Practice',
    sub: 'Five engagement types · One bench',
    intro: 'Each of the five neutral roles has its own character, deliverable, and rhythm. The engagement-specific pages explain what the role is, when to retain Daniel for it, the methodology, and frequently asked questions. The cross-cutting pages describe how matters run end-to-end.',
    items: [
      {
        id: 'mediation',
        title: 'Mediation',
        desc: 'Privately-administered mediation for technically complex commercial disputes. AI, cyber, trade secret, smart contracts, cross-border.',
      },
      {
        id: 'special-master',
        title: 'Special Master',
        desc: 'Court-appointed for ESI protocols, TAR/CAL validation, spoliation findings, and complex protective orders.',
      },
      {
        id: 'forensic-neutral',
        title: 'Forensic Neutral',
        desc: 'Independent third-party technical expert appointed by tribunal or counsel — chain-of-custody preservation, authentication, and written findings.',
      },
      {
        id: 'ai-disputes',
        title: 'AI Disputes — Tribunal Services',
        desc: 'Arbitrator and protocol architect for AI matters. Tiered protective orders, AI-specific discovery, technical adjudication.',
      },
      {
        id: 'arbitration',
        title: 'Arbitration',
        desc: 'Sole and panel arbitrator for technically complex commercial matters. SaaS SLA, cyber coverage, cryptocurrency, software licensing, patents.',
      },
      {
        id: 'process',
        title: 'Process & Methodology',
        desc: 'Per-engagement deep dive: phase-by-phase protocols from appointment to award or report, plus the five principles that hold across every role.',
      },
      {
        id: 'notable-matters',
        title: 'Notable Matters',
        desc: 'Anonymized representative engagements across eight matter categories. Matter type, role, technical issue, and outcome category — no party names.',
      },
      {
        id: 'engagement-terms',
        title: 'Engagement Terms',
        desc: 'How retention works — court-appointed and party-stipulated paths, the six-step process, and factors that shape per-matter fee scoping.',
      },
    ],
  },
  {
    section: 'Writing & Voice',
    sub: 'Insights · Publications · Speaking',
    intro: 'Daniel has published twenty books, three hundred peer-reviewed and trade-press articles cited in five hundred opinions, and presented at six hundred conferences and judicial colleges over twenty years. The pages here surface a curated slice of that body of work.',
    items: [
      {
        id: 'insights',
        title: 'Insights',
        desc: 'Working notebook of twelve articles on technical dispute resolution — AI hallucinations, deepfake authentication, smart-contract arbitration, cyber-coverage mediation, and more.',
      },
      {
        id: 'publications',
        title: 'Publications & Books',
        desc: 'Curated selection across books and treatises, law-review articles, book chapters, conference papers, and trade press. Tabbed; reverse-chronological.',
      },
      {
        id: 'speaking',
        title: 'Speaking & Events',
        desc: '600+ presentations at RSA Conference, ABA, Harvard Extension, Tel Aviv Cyber Week, Sedona Conference, judicial colleges, and CLE programs. Booking inquiries welcome.',
      },
      {
        id: 'faq',
        title: 'FAQ',
        desc: 'Quick answers and deep-dive questions on retention, conflicts, evidence handling, AI tribunal procedures, and engagement fees.',
      },
    ],
  },
];

const ExplorePage = ({ 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.35 }}/>
      <div className="container" style={{ position: 'relative' }}>
        <div className="eyebrow on-dark">Discovery · Wayfinding · Orientation</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 7.5vw, 104px)', marginTop: 16, color: 'var(--paper)', lineHeight: 1.02 }}>
          Explore<br/>
          <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>the practice.</em>
        </h1>
        <p style={{ marginTop: 32, fontSize: 21, color: 'var(--slate-300)', maxWidth: 760, lineHeight: 1.5, fontFamily: 'var(--serif)', fontStyle: 'italic' }}>
          Three sections, sixteen pages. Pick where to start — by who Daniel is, by the kind of matter you have, or by the body of work behind the practice.
        </p>
      </div>
    </section>

    {EXPLORE_DATA.map((s, si) => (
      <section key={s.section} className="section" style={{ background: si % 2 === 0 ? 'var(--paper)' : 'var(--paper-2)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
            <div>
              <div className="eyebrow">§ {String(si + 1).padStart(2, '0')} · {s.section}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.18em', marginTop: 12 }}>
                {s.sub}
              </div>
              <p className="serif" style={{ fontSize: 18, color: 'var(--slate-700)', marginTop: 24, fontStyle: 'italic', lineHeight: 1.55 }}>
                {s.intro}
              </p>
            </div>
            <div>
              <ul style={{ listStyle: 'none', borderTop: '1px solid var(--line-soft)' }}>
                {s.items.map((it, i) => (
                  <li key={it.id}>
                    <button onClick={() => onNav(it.id)} style={{
                      display: 'grid', gridTemplateColumns: '64px 1fr 32px', gap: 24,
                      width: '100%', textAlign: 'left',
                      padding: '24px 0', borderBottom: '1px solid var(--line-soft)',
                      background: 'transparent', border: 'none', cursor: 'pointer',
                      transition: 'all 0.18s',
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper)'; e.currentTarget.style.paddingLeft = '12px'; e.currentTarget.style.paddingRight = '12px'; }}
                    onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; e.currentTarget.style.paddingRight = '0'; }}
                    >
                      <span className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.18em', paddingTop: 6 }}>
                        {String(i + 1).padStart(2, '0')}
                      </span>
                      <div>
                        <div className="serif" style={{ fontSize: 22, lineHeight: 1.25, fontWeight: 500, color: 'var(--ink)' }}>
                          {it.title}
                        </div>
                        <div style={{ fontSize: 14, color: 'var(--slate-700)', marginTop: 6, lineHeight: 1.55, maxWidth: 600 }}>
                          {it.desc}
                        </div>
                      </div>
                      <span className="mono" style={{ fontSize: 14, color: 'var(--gold-deep)', alignSelf: 'center' }}>
                        →
                      </span>
                    </button>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
    ))}

    {/* Engage strip */}
    <section className="section" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="eyebrow on-dark">Begin a matter</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', marginTop: 16, color: 'var(--paper)', lineHeight: 1.05 }}>
              Tell us about the dispute.<br/>
              <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>We'll design the process.</em>
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <button className="btn btn-gold" onClick={() => onNav('intake')}>
              Open match intake <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost-light" onClick={() => onNav('contact')}>
              Or send a direct inquiry
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
);

window.ExplorePage = ExplorePage;