// Legal — Privacy, Terms, Disclaimer, Accessibility (single page, anchored sections)

const LegalPage = ({ 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">Notices · Policies · Disclaimers</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 7.5vw, 104px)', marginTop: 16, color: 'var(--paper)' }}>
          Legal.
        </h1>
        <p style={{ marginTop: 32, fontSize: 19, color: 'var(--slate-300)', maxWidth: 720, lineHeight: 1.6 }}>
          Privacy, terms of use, disclaimer, and accessibility for tailoredmediation.com. Aligned with the framework Daniel's primary panel administrator (JAMS) operates under.
        </p>
      </div>
    </section>

    {/* TOC */}
    <section style={{ background: 'var(--paper-2)', borderBottom: '1px solid var(--line-soft)', position: 'sticky', top: 65, zIndex: 30 }}>
      <div className="container" style={{ padding: '20px 32px' }}>
        <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
          {[
            { id: 'privacy', label: '01 Privacy Policy' },
            { id: 'terms', label: '02 Terms of Use' },
            { id: 'disclaimer', label: '03 Disclaimer' },
            { id: 'accessibility', label: '04 Accessibility' },
          ].map(t => (
            <a key={t.id} href={`#${t.id}`} className="mono" style={{
              fontSize: 11, letterSpacing: '0.16em', color: 'var(--slate-700)', textTransform: 'uppercase',
            }}>· {t.label}</a>
          ))}
        </div>
      </div>
    </section>

    <article className="container" style={{ maxWidth: 820, padding: '80px 32px' }}>
      <p className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.18em', marginBottom: 48 }}>
        LAST UPDATED: APRIL 2026
      </p>

      {/* Privacy */}
      <section id="privacy" style={{ marginBottom: 80, scrollMarginTop: 120 }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.2em' }}>§ 01</div>
        <h2 className="display" style={{ fontSize: 40, marginTop: 8, marginBottom: 24, lineHeight: 1.05 }}>Privacy Policy</h2>
        <p className="serif" style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 16 }}>
          Tailored Mediation respects the confidentiality and privacy of every party who reaches the practice through this site. This policy summarizes what we collect, why, and how we handle it.
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>What we collect</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          Information you submit through the intake or contact forms (name, firm, email, phone, matter description), and standard server-log data (IP address, browser, request times) used for security and troubleshooting.
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>How we use it</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          To run conflicts checks, respond to inquiries, and — only with your consent — to communicate about a potential or active engagement. Matter content shared in confidence is handled under the protective framework of the relevant engagement (JAMS rules, court protective order, or a bilateral confidentiality agreement).
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>What we don't do</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          We don't sell, rent, or share intake or contact data with third parties for marketing. We don't set advertising cookies. We don't embed cross-site advertising trackers, and the site sets no cookies of its own.
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Service providers we use</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          The site is hosted on <strong>Vercel</strong>, which processes standard server-log data (IP address, browser, request times) for delivery and security. We use <strong>Vercel Web Analytics</strong> to understand aggregate traffic — it is privacy-preserving and cookieless, sets no cookies, does not track you across other sites, and does not store personally identifying information. Contact and intake form submissions are processed and forwarded by email through <strong>Formspree</strong> (a U.S.-based provider) under their data-processing terms. Each provider acts only as a processor on our behalf and is not permitted to use your data for its own purposes.
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Your choices</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)' }}>
          You may request access to, correction of, or deletion of any contact information we hold for you by emailing privacy@tailoredmediation.com. We will respond within 30 days. California, EEA, and UK residents have additional rights under CCPA/CPRA, GDPR, and UK GDPR respectively, all of which we honor.
        </p>
      </section>

      {/* Terms */}
      <section id="terms" style={{ marginBottom: 80, scrollMarginTop: 120 }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.2em' }}>§ 02</div>
        <h2 className="display" style={{ fontSize: 40, marginTop: 8, marginBottom: 24, lineHeight: 1.05 }}>Terms of Use</h2>
        <p className="serif" style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 16 }}>
          By using this site you agree to these terms. They govern your access to and use of tailoredmediation.com and the materials made available here.
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Content and intellectual property</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          Articles, schematics, design, and all original content on this site are the intellectual property of Daniel B. Garrie, Esq. and Tailored Mediation, except where third-party authorship or publication is identified. You may quote modest excerpts with attribution; broader reuse requires permission.
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Third-party links</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          Links to JAMS, Law &amp; Forensics, Harvard, the Federal Judicial Center, court records, and published articles are provided for reference. We do not control those sites and are not responsible for their content.
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>No warranties</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)' }}>
          Materials are provided "as is." Tailored Mediation makes no warranties as to accuracy, completeness, or fitness for a particular purpose. Site availability is offered without guarantee.
        </p>
      </section>

      {/* Disclaimer */}
      <section id="disclaimer" style={{ marginBottom: 80, scrollMarginTop: 120 }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.2em' }}>§ 03</div>
        <h2 className="display" style={{ fontSize: 40, marginTop: 8, marginBottom: 24, lineHeight: 1.05 }}>Disclaimer</h2>
        <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line-soft)', padding: 28, marginBottom: 24 }}>
          <p className="serif" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink)', fontStyle: 'italic' }}>
            Tailored Mediation provides alternative dispute resolution and forensic neutral services. Daniel B. Garrie, Esq. serves as a mediator, arbitrator, special master, and forensic neutral. In those roles he does not represent any party and does not provide legal advice or representation. No attorney-client relationship is formed by use of this site, by submitting an inquiry, or by an engagement as a neutral.
          </p>
        </div>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          Past results are case-specific. Articles, presentations, and other content on this site reflect general analysis and should not be relied upon as legal advice for any particular matter. Always consult counsel of record on a specific dispute.
        </p>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          Some jurisdictions require additional disclosures about ADR providers. Where local rules require specific notice, those notices are provided directly to the parties at engagement.
        </p>
        <h3 className="display" style={{ fontSize: 22, marginTop: 32, marginBottom: 12 }}>Affiliations</h3>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)' }}>
          Tailored Mediation is the independent neutral practice of Daniel B. Garrie, Esq. References on this site to Law &amp; Forensics, Harvard Extension School, the Federal Judicial Center, the Sedona Conference, the American Bar Association, the CPR Institute, the L.C.I.A., the H.K.I.A.C., the Academy of Court Appointed Neutrals, the courts that have appointed Daniel, and similar organizations describe Daniel's individual roles or affiliations. They are not endorsements of Tailored Mediation by those organizations and do not establish any agency or employment relationship between Tailored Mediation and those organizations.
        </p>
      </section>

      {/* Accessibility */}
      <section id="accessibility" style={{ marginBottom: 40, scrollMarginTop: 120 }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', letterSpacing: '0.2em' }}>§ 04</div>
        <h2 className="display" style={{ fontSize: 40, marginTop: 8, marginBottom: 24, lineHeight: 1.05 }}>Accessibility</h2>
        <p className="serif" style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 16 }}>
          We are committed to making this site usable by everyone. Tailored Mediation aims for substantial conformance with the Web Content Accessibility Guidelines (WCAG) 2.1, Level AA.
        </p>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)', marginBottom: 12 }}>
          Specifically: semantic HTML, sufficient color contrast, keyboard navigation throughout, descriptive labels on interactive controls, alt text on imagery, and a typography scale that respects user font-size preferences. The dot-grid and engraved schematics are presentational and have text alternatives.
        </p>
        <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--slate-900)' }}>
          If you encounter an accessibility barrier, please write to <a href="mailto:accessibility@tailoredmediation.com" style={{ color: 'var(--gold-deep)', borderBottom: '1px solid currentColor' }}>accessibility@tailoredmediation.com</a> with the page URL and a brief description. We aim to respond within five business days and to remediate substantively within 30.
        </p>
      </section>

      <div style={{ paddingTop: 32, borderTop: '1px solid var(--line-soft)' }}>
        <p className="mono" style={{ fontSize: 11, color: 'var(--slate-700)', letterSpacing: '0.18em', marginBottom: 12 }}>
          QUESTIONS · PRIVACY OFFICER
        </p>
        <p style={{ fontSize: 16, color: 'var(--slate-900)', lineHeight: 1.7 }}>
          privacy@tailoredmediation.com · accessibility@tailoredmediation.com · matters@tailoredmediation.com
        </p>
      </div>
    </article>
  </div>
);

window.LegalPage = LegalPage;