// FAQ — two-tier: 6 marquee Quick Answers + expandable deep section

const QUICK_FAQS = [
  {
    q: 'How is Daniel retained?',
    a: 'Through JAMS for JAMS-administered matters, or directly via Tailored Mediation for ad-hoc engagements where the parties prefer party-stipulated retention. The intake form here generates a confidential matter request that routes either path.',
  },
  {
    q: 'What is the typical timeline from request to first session?',
    a: 'Mediation: 14–60 days. Special Master / Forensic Neutral: 7–30 days for straightforward matters; longer where conflicts checks, protective orders, or international coordination are required.',
  },
  {
    q: 'Are sessions in-person, virtual, or both?',
    a: 'All three. Daniel mediates in-person at JAMS or party-selected venues, runs virtual sessions on encrypted platforms, and supports hybrid configurations for cross-border or multi-party matters.',
  },
  {
    q: 'What disputes does Daniel typically resolve?',
    a: 'AI / model output liability, trade-secret misappropriation in software and ML, smart-contract and cryptocurrency disputes, cyber-insurance coverage fights, eDiscovery and ESI disputes, complex commercial matters with technical questions at their core.',
  },
  {
    q: 'How do conflicts checks run?',
    a: 'On receipt of an intake, Daniel\u2019s case manager runs a conflicts check across his active matters and prior representations through Law & Forensics LLC. Where the engagement is administered by an ADR provider, an additional conflicts review runs under that provider\u2019s protocol. Material conflicts are disclosed within 48 hours; if disqualifying, alternates are surfaced from a curated network.',
  },
  {
    q: 'Can Daniel serve as a co-mediator with a process neutral?',
    a: 'Frequently yes. Many of his engagements pair him as the technical neutral with a retired-judge process neutral (e.g. Hon. G. Andler, Hon. T. Vanaskie, Hon. F. Allegra). Co-mediation is often the right fit for matters where both procedural craft and subject-matter authority are required.',
  },
];

const DEEP_FAQ_SECTIONS = [
  {
    section: 'Engagement scope',
    qs: [
      { q: 'What kinds of evidence does Daniel typically work with?', a: 'Source code, model weights and inference logs, training data and provenance metadata, smart contracts and on-chain transaction histories, eDiscovery production sets, forensic disk images, mobile and IoT device dumps, cloud audit logs, and email archives \u2014 among others.' },
      { q: 'Will Daniel review source code under a protective order?', a: 'Yes, regularly. He has reviewed source code, ML model weights, and training data under tiered protective orders and has co-authored standing PO templates that distinguish weights, training data, prompts, and outputs into separate access tiers.' },
      { q: 'Does Daniel sit on AI tribunals under the JAMS AI Disputes framework?', a: 'Yes. Daniel arbitrates under the JAMS AI Disputes Clause and Rules and contributed to the JAMS Smart Contracts Rules. He has authored and co-authored standing protective orders for AI matters.' },
      { q: 'What is the maximum exposure Daniel typically handles?', a: 'Typical matter exposure ranges from $5M to $1B+. He has served as Special Master in multi-hundred-million-dollar trade secret matters and as forensic neutral in cyber-insurance disputes well into nine figures.' },
    ],
  },
  {
    section: 'Process',
    qs: [
      { q: 'How are protocols set?', a: 'On appointment, Daniel issues an initial scoping order. For Special Master and Forensic Neutral matters, this is a draft ESI/forensic protocol. For mediation, it is an agenda and confidentiality framework. Parties have a comment window of 7\u201314 days; finalization usually within 30.' },
      { q: 'Are findings published?', a: 'No. All written findings are issued under the matter\u2019s protective order and remain confidential to the tribunal and parties. Daniel does not publicly comment on active or past matters.' },
      { q: 'What does a forensic neutral report contain?', a: 'A reproducible methodology section, evidentiary findings keyed to the question put to the neutral, custody chain, hash verification, software/tooling provenance, limitations, and \u2014 where the protocol calls for it \u2014 a recommended disposition.' },
      { q: 'Do parties have direct access to Daniel during the engagement?', a: 'Yes, through case-management channels. Daniel is responsive to scheduling and procedural questions throughout. Substantive ex parte communications are handled per the engagement\u2019s confidentiality and ADR-rules framework.' },
    ],
  },
  {
    section: 'Technology & evidence',
    qs: [
      { q: 'How does Daniel handle TB-scale ESI productions?', a: 'Through Law & Forensics\u2019 production-grade infrastructure: validated TAR/CAL workflows, documented seed sets, sampling protocols, and reproducible privilege review pipelines. For special-master appointments specifically, the chain of custody and sampling design are recorded in the protocol order.' },
      { q: 'How are model weights and training data preserved?', a: 'Under tiered access controls: cryptographic hashing, bit-for-bit preservation of weight files, time-stamped logging of every read access, and segregated storage with reviewer-credential audit trails.' },
      { q: 'Does Daniel work on cross-border evidence collection?', a: 'Yes. He has coordinated international device collection in matters involving the FBI, Interpol, and counterpart agencies, and he is fluent in cross-border privilege, GDPR, and Schrems II constraints.' },
      { q: 'What about deepfake authentication?', a: 'Daniel has authored extensively on deepfake authentication in court and arbitration (Daily Journal, Law360, 2024). His protocols include device-level provenance, model-output forensics, and chain-of-custody review specific to synthetic-media artifacts.' },
    ],
  },
  {
    section: 'Fees, ethics, conflicts',
    qs: [
      { q: 'What does an engagement cost?', a: 'Fees on request. Daniel\u2019s rate structure depends on engagement type, exposure, and whether the matter is JAMS-administered or directly retained. We provide a fixed-fee or capped estimate when scope permits.' },
      { q: 'How are confidentiality and privilege handled?', a: 'Daniel operates under protective orders that distinguish work-product, party privilege, and tribunal-confidential categories. He does not participate in disputes adverse to prior counsel or clients without informed waiver.' },
      { q: 'What is the relationship between Tailored Mediation and Law & Forensics?', a: 'Daniel founded and remains Executive Managing Partner of Law & Forensics LLC. Where a matter requires substantive forensic technical work beyond a single neutral\u2019s scope, the firm\u2019s engineering bench supports the engagement under the appointing tribunal\u2019s protocols.' },
      { q: 'Can Daniel sit on a panel adverse to JAMS?', a: 'No. As a JAMS panelist Daniel does not accept neutral roles adverse to JAMS\u2019s administration. He routinely accepts party-stipulated and court-appointed neutral roles in matters not administered by JAMS.' },
    ],
  },
];

const FAQAccordionItem = ({ q, a }) => {
  const { useState } = React;
  const [open, setOpen] = useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--line-soft)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', textAlign: 'left',
        padding: '20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
      }}>
        <span className="serif" style={{ fontSize: 18, lineHeight: 1.35, color: 'var(--ink)' }}>{q}</span>
        <span className="mono" style={{ fontSize: 18, color: 'var(--gold-deep)', flexShrink: 0 }}>{open ? '−' : '+'}</span>
      </button>
      {open && (
        <p style={{
          paddingBottom: 20, paddingRight: 48,
          fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)',
        }}>
          {a}
        </p>
      )}
    </div>
  );
};

const FAQPage = ({ 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">Practical Information for Counsel</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 7.5vw, 104px)', marginTop: 16, color: 'var(--paper)' }}>
          Frequently<br/>
          <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontWeight: 300 }}>asked.</em>
        </h1>
        <p style={{ marginTop: 32, fontSize: 19, color: 'var(--slate-300)', maxWidth: 720, lineHeight: 1.6 }}>
          Quick answers up top. Deeper questions on engagement scope, process, technology, and ethics below.
        </p>
      </div>
    </section>

    {/* Quick answers — 6 cards */}
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 32 }}>§ 01 · Quick Answers</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--line-soft)', background: 'var(--paper)' }}>
          {QUICK_FAQS.map((f, i) => (
            <div key={i} style={{
              padding: 32,
              borderRight: i % 2 === 0 ? '1px solid var(--line-soft)' : 'none',
              borderBottom: i < QUICK_FAQS.length - 2 ? '1px solid var(--line-soft)' : 'none',
            }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.18em' }}>
                Q.{String(i + 1).padStart(2, '0')}
              </div>
              <h3 className="serif" style={{ fontSize: 22, marginTop: 12, lineHeight: 1.25, fontWeight: 500 }}>
                {f.q}
              </h3>
              <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.65, color: 'var(--slate-900)' }}>
                {f.a}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Deep section — accordions by category */}
    <section className="section">
      <div className="container" style={{ maxWidth: 880 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>§ 02 · Deeper Questions</div>
        <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.05, marginBottom: 56 }}>
          For counsel who need to <em style={{ color: 'var(--gold-deep)', fontStyle: 'italic' }}>look under the hood.</em>
        </h2>
        {DEEP_FAQ_SECTIONS.map(s => (
          <div key={s.section} style={{ marginBottom: 56 }}>
            <h3 className="display" style={{ fontSize: 28, marginBottom: 16 }}>{s.section}</h3>
            <div style={{ borderTop: '1px solid var(--line-soft)' }}>
              {s.qs.map((qa, i) => <FAQAccordionItem key={i} q={qa.q} a={qa.a}/>)}
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* CTA */}
    <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">Question not answered?</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 16, color: 'var(--paper)', lineHeight: 1.05 }}>
              Reach out directly.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--slate-300)', marginTop: 20, lineHeight: 1.6, maxWidth: 480 }}>
              For matter-specific questions — conflicts, scope, scheduling, fees — the case manager replies within one business day.
            </p>
          </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')}>
              Send a general inquiry
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
);

window.FAQPage = FAQPage;
window.QUICK_FAQS = QUICK_FAQS;
window.DEEP_FAQ_SECTIONS = DEEP_FAQ_SECTIONS;
