/* global React, IconArrowRight, IconDownload */
/* =============================================================================
   Legal pages — /privacy /terms /cookies /accessibility
   All copy here is DRAFT pending legal review (per the implementation guide).
   Each page surfaces a clear "LEGAL DRAFT" status badge so it can't ship as-is.
   ============================================================================= */

const { useEffect: useLegalEffect, useState: useLegalState } = React;

/* ---------- Shared layout primitive ---------- */
function LegalShell({ label, eyebrow, title, lead, lastUpdated, status = "draft", toc, children, navigate }) {
  return (
    <main data-screen-label={label}>
      {/* Hero */}
      <section className="page-hero legal-hero">
        <div className="container">
          <div className="eyebrow">{eyebrow}</div>
          <h1 style={{ fontSize: "clamp(40px, 5vw, 64px)", maxWidth: "16ch" }}>{title}</h1>
          <p className="lead" style={{ marginTop: 24, maxWidth: "62ch" }}>{lead}</p>

          <div className="legal-meta">
            <div className="legal-meta-row">
              <span className="mono-label">Effective</span>
              <span className="mono-value">17 May 2026</span>
            </div>
            <div className="legal-meta-row">
              <span className="mono-label">Last updated</span>
              <span className="mono-value">{lastUpdated}</span>
            </div>
            <div className="legal-meta-row">
              <span className="mono-label">Status</span>
              <span className={`legal-status legal-status-${status}`}>
                {status === "draft" ? "// LEGAL DRAFT · pending counsel approval" : "// IN FORCE"}
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* Body: 2-col TOC + content */}
      <section className="section legal-section">
        <div className="container">
          <div className="legal-grid">
            <aside className="legal-toc">
              <div className="eyebrow">CONTENTS</div>
              <ol>
                {toc.map((t, i) => (
                  <li key={t.id}>
                    <a href={`#${t.id}`} onClick={(e) => smoothJump(e, t.id)}>
                      <span className="legal-toc-num">{String(i + 1).padStart(2, "0")}</span>
                      <span>{t.label}</span>
                    </a>
                  </li>
                ))}
              </ol>
              <div className="legal-toc-foot">
                <a className="legal-toc-print" onClick={() => window.print()}>Print this page <IconDownload size={12} /></a>
              </div>
            </aside>

            <article className="legal-body">{children}</article>
          </div>
        </div>
      </section>

      {/* Closing block — direct contact */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>Questions?</div>
          <h2 style={{ marginTop: 16, fontSize: "clamp(32px, 4vw, 48px)", maxWidth: "24ch", margin: "16px auto 0" }}>
            Talk to our Data Protection Officer.
          </h2>
          <p className="lead" style={{ margin: "20px auto 0", maxWidth: "58ch", textAlign: "center" }}>
            For privacy requests, data access, or anything in this policy that needs clarifying — write directly.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <a className="btn btn-primary" href="mailto:privacy@doblier.io">
              Email privacy@doblier.io <IconArrowRight size={14} className="arrow" />
            </a>
            <button className="btn btn-ghost" onClick={() => navigate("/talk-to-an-architect")}>
              Talk to an architect <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
      </section>

      <style>{`
        .legal-hero { padding-bottom: 48px; }
        .legal-meta {
          margin-top: 56px;
          display: grid;
          grid-template-columns: repeat(3, auto);
          gap: 0;
          border-top: 1px solid var(--border);
          max-width: 720px;
        }
        .legal-meta-row {
          padding: 18px 24px 18px 0;
          border-right: 1px solid var(--border);
          display: flex; flex-direction: column; gap: 6px;
        }
        .legal-meta-row:last-child { border-right: none; padding-right: 0; padding-left: 24px; }
        .legal-meta-row:first-child { padding-left: 0; }
        .mono-label {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
          text-transform: uppercase; color: var(--text-mute);
        }
        .mono-value {
          font-family: var(--font-mono); font-size: 12px;
          color: var(--text); letter-spacing: 0.02em;
        }
        .legal-status {
          font-family: var(--font-mono); font-size: 12px;
          letter-spacing: 0.02em;
        }
        .legal-status-draft { color: #E2A03F; }
        .legal-status-live  { color: var(--teal); }

        .legal-section { padding-top: 80px; padding-bottom: 96px; }
        .legal-grid {
          display: grid;
          grid-template-columns: 260px minmax(0, 1fr);
          gap: 80px;
          align-items: start;
        }
        .legal-toc {
          position: sticky; top: 100px;
        }
        .legal-toc ol {
          list-style: none; padding: 0;
          margin: 20px 0 0;
          display: flex; flex-direction: column; gap: 2px;
          border-top: 1px solid var(--border);
        }
        .legal-toc li a {
          display: flex; gap: 16px; align-items: baseline;
          padding: 12px 0;
          border-bottom: 1px solid var(--border);
          color: var(--text-dim);
          font-size: 14px;
          line-height: 1.4;
          text-decoration: none;
          cursor: pointer;
          transition: color 0.15s;
        }
        .legal-toc li a:hover { color: var(--teal); }
        .legal-toc-num {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--teal);
          letter-spacing: 0.04em;
          min-width: 22px;
        }
        .legal-toc-foot { margin-top: 20px; }
        .legal-toc-print {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--text-mute);
          cursor: pointer;
          display: inline-flex;
          gap: 8px; align-items: center;
        }
        .legal-toc-print:hover { color: var(--teal); }

        .legal-body section { padding: 0 0 56px; scroll-margin-top: 100px; }
        .legal-body section + section { border-top: 1px solid var(--border); padding-top: 48px; }
        .legal-body h2 {
          font-size: clamp(22px, 2.4vw, 30px);
          font-weight: 500; letter-spacing: -0.015em;
          margin: 0 0 20px;
          display: flex; gap: 16px; align-items: baseline;
        }
        .legal-body h2 .num {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--teal);
          letter-spacing: 0.06em;
          font-weight: 400;
        }
        .legal-body h3 {
          font-size: 16px;
          font-weight: 500;
          margin: 28px 0 12px;
          color: var(--text);
          letter-spacing: -0.005em;
        }
        .legal-body p, .legal-body li {
          color: var(--text-dim);
          font-size: 15px;
          line-height: 1.65;
          max-width: 68ch;
        }
        .legal-body p + p { margin-top: 14px; }
        .legal-body strong { color: var(--text); font-weight: 500; }
        .legal-body ul, .legal-body ol {
          padding-left: 22px;
          margin: 12px 0;
          display: flex; flex-direction: column; gap: 8px;
        }
        .legal-body ul li::marker { color: var(--teal); }
        .legal-body a {
          color: var(--teal); text-decoration: none;
          border-bottom: 1px solid rgba(0,212,170,0.35);
        }
        .legal-body a:hover { border-color: var(--teal); }
        .legal-body code {
          font-family: var(--font-mono);
          font-size: 12px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          padding: 2px 6px;
          border-radius: 2px;
          color: var(--text);
        }
        .legal-body .legal-callout {
          margin: 24px 0;
          padding: 20px 22px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-left: 2px solid var(--teal);
          border-radius: 2px;
        }
        .legal-body .legal-callout .eyebrow { font-size: 10px; margin-bottom: 8px; }
        .legal-body .legal-callout p { margin: 0; font-size: 14px; }

        .legal-table {
          width: 100%;
          border-collapse: collapse;
          margin: 16px 0 20px;
          font-size: 14px;
        }
        .legal-table th, .legal-table td {
          text-align: left;
          padding: 14px 16px;
          border-bottom: 1px solid var(--border);
          color: var(--text-dim);
          vertical-align: top;
        }
        .legal-table th {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--text-mute);
          font-weight: 500;
          border-bottom: 1px solid var(--border-bright);
        }
        .legal-table tr:last-child td { border-bottom: none; }
        .legal-table td strong { color: var(--text); }
        .legal-table td code {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text);
          background: var(--bg);
          padding: 2px 6px;
          border-radius: 2px;
        }

        @media (max-width: 1000px) {
          /* minmax(0,1fr) + min-width:0 let the single column shrink below the
             content's intrinsic width (otherwise a wide table or long token
             forces the track wider than the viewport). */
          .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
          .legal-toc { position: static; min-width: 0; }
          .legal-body { min-width: 0; }
          .legal-body p, .legal-body li { overflow-wrap: anywhere; }
          .legal-table { table-layout: fixed; width: 100%; }
          .legal-table th, .legal-table td { overflow-wrap: anywhere; word-break: break-word; }
        }
        @media (max-width: 880px) {
          /* desktop-scale section/meta spacing trimmed for mobile */
          .legal-section { padding-top: 40px; padding-bottom: 48px; }
          .legal-hero { padding-bottom: 0; }
          .legal-meta { margin-top: 32px; }
          /* legal body subsections stacked 56+48=104px between each — tighten */
          .legal-body section { padding-bottom: 36px; }
          .legal-body section + section { padding-top: 32px; }
        }
        @media (max-width: 640px) {
          .legal-meta { grid-template-columns: 1fr; }
          .legal-meta-row { border-right: none; border-bottom: 1px solid var(--border); padding: 14px 0; }
          .legal-meta-row:last-child { border-bottom: none; padding-left: 0; }
        }
      `}</style>
    </main>
  );
}

function smoothJump(e, id) {
  e.preventDefault();
  const el = document.getElementById(id);
  if (el) el.scrollIntoView ? window.scrollTo({ top: el.offsetTop - 88, behavior: "smooth" }) : window.location.hash = id;
}

/* =============================================================================
   /privacy — Privacy Policy
   ============================================================================= */
const PrivacyPolicy = ({ navigate }) => {
  const toc = [
    { id: "intro", label: "Who we are" },
    { id: "data-we-collect", label: "Data we collect" },
    { id: "how-we-use", label: "How we use it" },
    { id: "legal-basis", label: "Legal basis (GDPR)" },
    { id: "sharing", label: "Sharing & sub-processors" },
    { id: "transfers", label: "International transfers" },
    { id: "retention", label: "Retention" },
    { id: "your-rights", label: "Your rights" },
    { id: "ccpa-opt-out", label: "California rights · Do Not Sell" },
    { id: "security", label: "Security" },
    { id: "children", label: "Children" },
    { id: "changes", label: "Changes to this policy" },
    { id: "contact", label: "Contact our DPO" },
  ];
  return (
    <LegalShell
      label="Privacy Policy"
      eyebrow="Legal · Privacy Policy"
      title="Privacy Policy."
      lead="How Doblier collects, uses, and protects your information when you visit doblier.io or engage our team. Written in plain language. Drafted with our counsel; pending final review before launch."
      lastUpdated="17 May 2026"
      status="draft"
      toc={toc}
      navigate={navigate}
    >
      <section id="intro">
        <h2><span className="num">01</span> Who we are</h2>
        <p>
          <strong>Doblier Inc.</strong> ("Doblier", "we", "us") is a Delaware corporation operating an enterprise AI infrastructure business. Our principal place of business is 1750 Prairie City Rd #130, Folsom, CA 95630, United States. We act as the data controller for personal data you share with us on this website.
        </p>
        <p>
          For questions about this policy, our processing activities, or your rights, our Data Protection Officer can be reached at <a href="mailto:privacy@doblier.io">privacy@doblier.io</a>.
        </p>
      </section>

      <section id="data-we-collect">
        <h2><span className="num">02</span> Data we collect</h2>
        <p>We collect only what we need to operate the site and respond to enterprise inquiries. Categories below.</p>
        <table className="legal-table">
          <thead>
            <tr><th>Category</th><th>Examples</th><th>Source</th></tr>
          </thead>
          <tbody>
            <tr>
              <td><strong>Contact data</strong></td>
              <td>Name, work email, company, job title, phone (optional)</td>
              <td>Forms you submit</td>
            </tr>
            <tr>
              <td><strong>Engagement context</strong></td>
              <td>Industry, company size, interest area, free-text describing your project</td>
              <td>Forms you submit</td>
            </tr>
            <tr>
              <td><strong>Technical data</strong></td>
              <td>IP address (truncated), browser, device class, referrer URL</td>
              <td>Server logs · CDN (Cloudflare)</td>
            </tr>
            <tr>
              <td><strong>Usage data</strong></td>
              <td>Pages viewed, time on page, link clicks, scroll depth — aggregated</td>
              <td>Cookies (only if you consent to Analytics)</td>
            </tr>
            <tr>
              <td><strong>Session recording</strong></td>
              <td>Anonymized session playback with form fields masked</td>
              <td>Cookies (only if you consent to Session recording)</td>
            </tr>
            <tr>
              <td><strong>Marketing data</strong></td>
              <td>Email subscription, content downloads, attribution</td>
              <td>Forms + Cookies (only if you consent to Marketing)</td>
            </tr>
          </tbody>
        </table>

        <div className="legal-callout">
          <div className="eyebrow">DOBLIER™ PRODUCT &amp; CUSTOMER DATA</div>
          <p>
            This policy covers <strong>this website only</strong>. Data processed inside AORBIT™ deployments is governed by your enterprise agreement and the Doblier <a onClick={() => navigate("/why-doblier/data-sovereignty")} style={{cursor:"pointer"}}>data sovereignty model</a>: customer data remains within your infrastructure perimeter and Doblier is not the controller of that data.
          </p>
        </div>
      </section>

      <section id="how-we-use">
        <h2><span className="num">03</span> How we use it</h2>
        <ul>
          <li><strong>Respond to your inquiry.</strong> When you submit a "Talk to an architect" or demo request, we contact you, route it to the right architect, and discuss your project.</li>
          <li><strong>Operate the site.</strong> Logging, load balancing, security, and rate-limiting — the things that keep a website online.</li>
          <li><strong>Improve our content.</strong> Aggregated analytics to understand which pages get read and which architecture topics resonate.</li>
          <li><strong>Marketing communications.</strong> Only if you opted in. Quarterly architecture briefs and product updates. Unsubscribe in one click, any time.</li>
          <li><strong>Legal &amp; compliance.</strong> Tax, audit, fraud prevention, regulatory response.</li>
        </ul>
      </section>

      <section id="legal-basis">
        <h2><span className="num">04</span> Legal basis (GDPR Art. 6)</h2>
        <ul>
          <li><strong>Consent (Art. 6(1)(a)).</strong> Non-essential cookies, marketing emails, gated content follow-up. Withdraw any time.</li>
          <li><strong>Performance of a contract (Art. 6(1)(b)).</strong> When we're scoping or delivering an engagement with you.</li>
          <li><strong>Legitimate interests (Art. 6(1)(f)).</strong> Direct B2B outreach to a relevant contact at an account that engaged us; security; fraud prevention. We balance these against your rights — write to us if you disagree.</li>
          <li><strong>Legal obligation (Art. 6(1)(c)).</strong> Tax, audit, regulator requests.</li>
        </ul>
      </section>

      <section id="sharing">
        <h2><span className="num">05</span> Sharing &amp; sub-processors</h2>
        <p>We don't sell personal information. We do share data with vendors that help us run the business; each is bound by a Data Processing Agreement and processes only on our instructions.</p>
        <table className="legal-table">
          <thead><tr><th>Sub-processor</th><th>Purpose</th><th>Region</th></tr></thead>
          <tbody>
            <tr><td><strong>Cloudflare</strong></td><td>CDN, DDoS protection, edge caching</td><td>Global</td></tr>
            <tr><td><strong>HubSpot</strong></td><td>CRM &amp; marketing automation</td><td>US / EU</td></tr>
            <tr><td><strong>Google Analytics 4</strong></td><td>Aggregate usage analytics (opt-in)</td><td>US</td></tr>
            <tr><td><strong>Hotjar</strong></td><td>Session recording with field masking (opt-in)</td><td>EU (Malta)</td></tr>
            <tr><td><strong>Cal.com</strong></td><td>Architect demo scheduling (opt-in)</td><td>EU</td></tr>
            <tr><td><strong>Postmark</strong></td><td>Transactional email (form receipts, double opt-in)</td><td>US</td></tr>
          </tbody>
        </table>
        <p>We may also disclose information when required by law (subpoena, court order) or to protect rights, property, or safety. The current sub-processor list is updated at least every 12 months; check this page or write to us for the latest.</p>
      </section>

      <section id="transfers">
        <h2><span className="num">06</span> International transfers</h2>
        <p>
          Doblier is US-headquartered with global operations. When personal data moves from the EEA, UK, or Switzerland to a country without an adequacy decision, we rely on the European Commission's <strong>Standard Contractual Clauses (2021 SCCs)</strong> with appropriate supplementary measures (encryption in transit and at rest, access controls, transfer impact assessments). Copies of the SCCs are available on request.
        </p>
      </section>

      <section id="retention">
        <h2><span className="num">07</span> Retention</h2>
        <ul>
          <li><strong>Contact form submissions:</strong> 36 months from last interaction, then deleted or anonymized.</li>
          <li><strong>Newsletter subscribers:</strong> until you unsubscribe; logs of consent kept for 5 years (proof of opt-in).</li>
          <li><strong>Server &amp; security logs:</strong> 90 days rolling.</li>
          <li><strong>Analytics &amp; recording cookies:</strong> per the <a onClick={() => navigate("/cookies")} style={{cursor:"pointer"}}>Cookie Policy</a> (max 12 months).</li>
          <li><strong>Contract &amp; billing records:</strong> 7 years (statutory retention).</li>
        </ul>
      </section>

      <section id="your-rights">
        <h2><span className="num">08</span> Your rights</h2>
        <p>Wherever you live, you can ask us to:</p>
        <ul>
          <li><strong>Access</strong> the personal data we hold about you.</li>
          <li><strong>Correct</strong> data that's inaccurate or out of date.</li>
          <li><strong>Delete</strong> data we no longer need to keep.</li>
          <li><strong>Restrict</strong> or <strong>object to</strong> processing.</li>
          <li><strong>Port</strong> your data in a structured, machine-readable format.</li>
          <li><strong>Withdraw consent</strong> you previously gave.</li>
          <li><strong>Complain</strong> to a supervisory authority (your local DPA, or the Irish DPC for EU residents).</li>
        </ul>
        <p>
          Write to <a href="mailto:privacy@doblier.io">privacy@doblier.io</a> with your request. We respond within 30 days. Verification of identity may be required for security.
        </p>
      </section>

      <section id="ccpa-opt-out">
        <h2><span className="num">09</span> California rights &middot; Do Not Sell or Share</h2>
        <p>
          California residents have specific rights under the <strong>CCPA</strong> (as amended by CPRA): the right to know, delete, correct, and to opt out of the "sale" or "sharing" of personal information.
        </p>
        <p>
          <strong>Doblier does not sell personal information for money.</strong> The CCPA defines "sharing" broadly enough to include some third-party advertising cookies. To be safe, our cookie banner lets you reject all non-essential cookies, and you can revisit it at any time using the <strong>Cookie Settings</strong> link in the footer.
        </p>
        <div className="legal-callout">
          <div className="eyebrow">EXERCISE YOUR RIGHT</div>
          <p>
            To opt out of any sharing for cross-context behavioral advertising, click the <strong>Cookie Settings</strong> link in our footer and disable the <strong>Marketing</strong> category, or honor your browser's <strong>Global Privacy Control (GPC)</strong> signal — we treat GPC as a valid opt-out. You can also email <a href="mailto:privacy@doblier.io">privacy@doblier.io</a> with subject "CCPA Opt-Out".
          </p>
        </div>
        <p>You have the right to non-discrimination — we won't change your service or pricing because you exercised a CCPA right.</p>
      </section>

      <section id="security">
        <h2><span className="num">10</span> Security</h2>
        <p>
          Data in transit is encrypted with TLS 1.3. Access to production systems is restricted by role and audited. Vendors are reviewed annually. No system is unbreakable; if a breach affects you, we will notify you and the relevant regulator within the timeframes required by law.
        </p>
      </section>

      <section id="children">
        <h2><span className="num">11</span> Children</h2>
        <p>This site is intended for enterprise audiences. We do not knowingly collect personal data from anyone under 16. If you believe a child has provided us data, contact us and we will delete it.</p>
      </section>

      <section id="changes">
        <h2><span className="num">12</span> Changes to this policy</h2>
        <p>
          We update this policy when our practices change. Material changes — new sub-processors, new cookie categories, new purposes — will be flagged at the top of this page for 30 days. The "Last updated" date in the header always reflects the latest version.
        </p>
      </section>

      <section id="contact">
        <h2><span className="num">13</span> Contact our DPO</h2>
        <p>
          <strong>Doblier Inc. — Attn: Data Protection Officer</strong><br />
          1750 Prairie City Rd #130, Folsom, CA 95630, United States<br />
          <a href="mailto:privacy@doblier.io">privacy@doblier.io</a> &middot; <a href="tel:+16282293590">+1 628 229 3590</a>
        </p>
      </section>
    </LegalShell>
  );
};

/* =============================================================================
   /terms — Terms of Use
   ============================================================================= */
const TermsOfUse = ({ navigate }) => {
  const toc = [
    { id: "agreement", label: "The agreement" },
    { id: "use", label: "Acceptable use" },
    { id: "accounts", label: "Accounts & forms" },
    { id: "ip", label: "Intellectual property" },
    { id: "feedback", label: "Feedback" },
    { id: "third-party", label: "Third-party links" },
    { id: "disclaimers", label: "Disclaimers" },
    { id: "liability", label: "Limitation of liability" },
    { id: "indemnity", label: "Indemnification" },
    { id: "law", label: "Governing law" },
    { id: "changes", label: "Changes" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <LegalShell
      label="Terms of Use"
      eyebrow="Legal · Terms of Use"
      title="Terms of Use."
      lead="The rules of engagement for visiting doblier.io. These terms govern your use of the website itself — separate commercial agreements govern any AORBIT™ deployment or services engagement."
      lastUpdated="17 May 2026"
      status="draft"
      toc={toc}
      navigate={navigate}
    >
      <section id="agreement">
        <h2><span className="num">01</span> The agreement</h2>
        <p>
          By accessing or using <strong>doblier.io</strong> (the "Site"), you agree to these Terms of Use and our <a onClick={() => navigate("/privacy")} style={{cursor:"pointer"}}>Privacy Policy</a>. If you don't agree, please don't use the Site. If you're using the Site on behalf of an organization, you confirm you have authority to bind that organization.
        </p>
      </section>

      <section id="use">
        <h2><span className="num">02</span> Acceptable use</h2>
        <p>You may use the Site for lawful, informational purposes. You may not:</p>
        <ul>
          <li>Reverse engineer, scrape, or systematically extract content beyond ordinary browsing.</li>
          <li>Probe, scan, or test the vulnerability of the Site without our written permission.</li>
          <li>Use the Site to send spam, malware, or anything that violates someone else's rights.</li>
          <li>Impersonate another person or organization when submitting forms.</li>
          <li>Use any data extracted from the Site to train a machine-learning model without our written permission.</li>
        </ul>
      </section>

      <section id="accounts">
        <h2><span className="num">03</span> Accounts &amp; forms</h2>
        <p>
          The Site does not host user accounts. Contact forms and downloads collect only the information described in the <a onClick={() => navigate("/privacy")} style={{cursor:"pointer"}}>Privacy Policy</a>. Submitting false information to a Doblier form is a breach of these Terms.
        </p>
      </section>

      <section id="ip">
        <h2><span className="num">04</span> Intellectual property</h2>
        <p>
          All content on the Site — including text, graphics, logos, the AORBIT reference architecture, whitepapers, and source code samples — is owned by <strong>Doblier Inc.</strong> or its licensors, and is protected by US and international copyright, trademark, and other laws.
        </p>
        <p>
          <strong>Trademarks.</strong> <code>DOBLIER™</code>, <code>AORBIT™</code>, and <code>The Architecture Gap™</code> are trademarks of Doblier Inc. Use of these marks without written permission is prohibited.
        </p>
        <p>
          <strong>Limited license.</strong> You may view, download, and print pages for internal, non-commercial reference. Attribution is required for any quotation in external materials.
        </p>
      </section>

      <section id="feedback">
        <h2><span className="num">05</span> Feedback</h2>
        <p>
          If you send us ideas, suggestions, or feedback (e.g. about an AORBIT layer or a whitepaper), you grant Doblier a perpetual, worldwide, royalty-free license to use that feedback without obligation. You retain no rights in it, and we are not obligated to keep it confidential.
        </p>
      </section>

      <section id="third-party">
        <h2><span className="num">06</span> Third-party links</h2>
        <p>The Site links to third-party sites (e.g. GitHub, LinkedIn). We don't control those sites and aren't responsible for their content, privacy practices, or availability.</p>
      </section>

      <section id="disclaimers">
        <h2><span className="num">07</span> Disclaimers</h2>
        <p>
          THE SITE IS PROVIDED "AS IS" AND "AS AVAILABLE", WITHOUT WARRANTY OF ANY KIND. DOBLIER DISCLAIMS ALL WARRANTIES, EXPRESS OR IMPLIED, INCLUDING MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. CONTENT ON THE SITE IS FOR GENERAL INFORMATION AND DOES NOT CONSTITUTE LEGAL, FINANCIAL, OR ARCHITECTURAL ADVICE FOR YOUR SPECIFIC SITUATION.
        </p>
      </section>

      <section id="liability">
        <h2><span className="num">08</span> Limitation of liability</h2>
        <p>
          TO THE MAXIMUM EXTENT PERMITTED BY LAW, DOBLIER WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES ARISING FROM YOUR USE OF THE SITE. OUR TOTAL LIABILITY FOR ANY CLAIM ARISING FROM THE SITE WILL NOT EXCEED ONE HUNDRED US DOLLARS (US$100). Some jurisdictions don't allow these limits — they apply to you only to the extent permitted by law.
        </p>
      </section>

      <section id="indemnity">
        <h2><span className="num">09</span> Indemnification</h2>
        <p>
          You agree to indemnify and hold Doblier harmless from claims arising out of your breach of these Terms or your misuse of the Site.
        </p>
      </section>

      <section id="law">
        <h2><span className="num">10</span> Governing law &amp; venue</h2>
        <p>
          These Terms are governed by the laws of the State of California, USA, without regard to conflicts-of-law principles. Disputes will be resolved exclusively in the state or federal courts located in Sacramento County, California, and you consent to jurisdiction there.
        </p>
      </section>

      <section id="changes">
        <h2><span className="num">11</span> Changes</h2>
        <p>We may update these Terms at any time. Material changes will be flagged at the top of this page for 30 days before they take effect. Continued use of the Site after that period constitutes acceptance.</p>
      </section>

      <section id="contact">
        <h2><span className="num">12</span> Contact</h2>
        <p>
          <strong>Doblier Inc. — Attn: Legal</strong><br />
          1750 Prairie City Rd #130, Folsom, CA 95630, United States<br />
          <a href="mailto:legal@doblier.io">legal@doblier.io</a>
        </p>
      </section>
    </LegalShell>
  );
};

/* =============================================================================
   /cookies — Cookie Policy
   ============================================================================= */
const CookiePolicy = ({ navigate }) => {
  const toc = [
    { id: "what", label: "What cookies are" },
    { id: "manage", label: "Manage your preferences" },
    { id: "categories", label: "Categories we use" },
    { id: "list", label: "Full cookie list" },
    { id: "browser", label: "Browser controls" },
    { id: "gpc", label: "Global Privacy Control" },
    { id: "changes", label: "Changes" },
  ];
  return (
    <LegalShell
      label="Cookie Policy"
      eyebrow="Legal · Cookie Policy"
      title="Cookie Policy."
      lead="The cookies and similar technologies we use, why we use them, and exactly how you turn them on or off. Nothing fires until you say so."
      lastUpdated="17 May 2026"
      status="draft"
      toc={toc}
      navigate={navigate}
    >
      <section id="what">
        <h2><span className="num">01</span> What cookies are</h2>
        <p>
          A cookie is a small text file your browser stores when you visit a website. It can hold a session identifier, your preferences, or analytics data. "Similar technologies" — local storage, pixels — work the same way for the purpose of this policy.
        </p>
        <p>
          We split cookies into <strong>strictly necessary</strong> (the site can't load without them) and <strong>optional</strong> (analytics, recording, marketing, scheduling). Optional cookies are blocked by default and only fire after you grant consent.
        </p>
      </section>

      <section id="manage">
        <h2><span className="num">02</span> Manage your preferences</h2>
        <p>
          You can change your choice any time. Your preferences live in a first-party cookie called <code>doblier_cookie_consent</code> and persist for 12 months. After 12 months we re-prompt.
        </p>
        <div className="legal-callout">
          <div className="eyebrow">PREFERENCES</div>
          <p>
            <button className="legal-inline-btn" onClick={() => window.reopenCookieSettings && window.reopenCookieSettings()}>
              Manage Cookie Preferences →
            </button>
          </p>
        </div>
        <style>{`
          .legal-inline-btn {
            background: var(--teal);
            color: #001a14;
            border: none;
            padding: 12px 20px;
            border-radius: 2px;
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.02em;
          }
          .legal-inline-btn:hover { background: #00ebbd; }
        `}</style>
      </section>

      <section id="categories">
        <h2><span className="num">03</span> Categories we use</h2>
        <table className="legal-table">
          <thead><tr><th>Category</th><th>Default</th><th>Why</th></tr></thead>
          <tbody>
            <tr><td><strong>Strictly necessary</strong></td><td>Always on</td><td>Security, session, CSRF. Can't be disabled.</td></tr>
            <tr><td><strong>Analytics</strong></td><td>Off</td><td>Aggregated page views and engagement.</td></tr>
            <tr><td><strong>Session recording</strong></td><td>Off</td><td>Anonymized UX playback; all form fields masked.</td></tr>
            <tr><td><strong>Marketing</strong></td><td>Off</td><td>CRM linkage so a conversation we start stays continuous.</td></tr>
            <tr><td><strong>Scheduling</strong></td><td>Off</td><td>Embedded calendar on contact pages.</td></tr>
          </tbody>
        </table>
      </section>

      <section id="list">
        <h2><span className="num">04</span> Full cookie list</h2>
        <table className="legal-table">
          <thead><tr><th>Cookie</th><th>Provider</th><th>Category</th><th>Lifetime</th></tr></thead>
          <tbody>
            <tr><td><code>cf_clearance</code></td><td>Cloudflare</td><td>Necessary</td><td>30 days</td></tr>
            <tr><td><code>doblier_session</code></td><td>Doblier</td><td>Necessary</td><td>Session</td></tr>
            <tr><td><code>csrf_token</code></td><td>Doblier</td><td>Necessary</td><td>Session</td></tr>
            <tr><td><code>doblier_cookie_consent</code></td><td>Doblier</td><td>Necessary</td><td>12 months</td></tr>
            <tr><td><code>_ga</code> / <code>_ga_*</code></td><td>Google Analytics</td><td>Analytics</td><td>13 months</td></tr>
            <tr><td><code>_gid</code></td><td>Google Analytics</td><td>Analytics</td><td>24 hours</td></tr>
            <tr><td><code>_hjSessionUser_*</code></td><td>Hotjar</td><td>Session recording</td><td>12 months</td></tr>
            <tr><td><code>_hjSession_*</code></td><td>Hotjar</td><td>Session recording</td><td>30 minutes</td></tr>
            <tr><td><code>__hssc</code></td><td>HubSpot</td><td>Marketing</td><td>30 minutes</td></tr>
            <tr><td><code>__hstc</code></td><td>HubSpot</td><td>Marketing</td><td>6 months</td></tr>
            <tr><td><code>hubspotutk</code></td><td>HubSpot</td><td>Marketing</td><td>6 months</td></tr>
            <tr><td><code>calendly_session</code></td><td>Cal.com</td><td>Scheduling</td><td>3 months</td></tr>
          </tbody>
        </table>
      </section>

      <section id="browser">
        <h2><span className="num">05</span> Browser controls</h2>
        <p>
          Every major browser lets you block or delete cookies. Doing so site-wide may break parts of doblier.io and other sites. We recommend using our banner to make granular choices instead.
        </p>
        <ul>
          <li><strong>Chrome:</strong> Settings &rsaquo; Privacy and security &rsaquo; Cookies and other site data</li>
          <li><strong>Firefox:</strong> Settings &rsaquo; Privacy &amp; Security</li>
          <li><strong>Safari:</strong> Preferences &rsaquo; Privacy</li>
          <li><strong>Edge:</strong> Settings &rsaquo; Cookies and site permissions</li>
        </ul>
      </section>

      <section id="gpc">
        <h2><span className="num">06</span> Global Privacy Control</h2>
        <p>
          If your browser sends a <strong>Global Privacy Control (GPC)</strong> signal, we treat it as a valid opt-out from "sale" or "sharing" under the CCPA — your Marketing category will be set to <strong>off</strong> automatically. You can still grant consent affirmatively from the banner if you want to.
        </p>
      </section>

      <section id="changes">
        <h2><span className="num">07</span> Changes</h2>
        <p>
          When we add or remove a vendor that sets cookies, this policy is updated within 5 business days. The change resets our cookie-consent prompt so you can review your choices.
        </p>
      </section>
    </LegalShell>
  );
};

/* =============================================================================
   /accessibility — Accessibility statement
   ============================================================================= */
const AccessibilityStatement = ({ navigate }) => {
  const toc = [
    { id: "commitment", label: "Our commitment" },
    { id: "standard", label: "Standard we target" },
    { id: "supported", label: "What's supported" },
    { id: "known", label: "Known limitations" },
    { id: "feedback", label: "Give us feedback" },
    { id: "formal", label: "Formal complaint route" },
  ];
  return (
    <LegalShell
      label="Accessibility Statement"
      eyebrow="Legal · Accessibility"
      title="Accessibility Statement."
      lead="Architecture you can read with any input method, screen reader, or assistive technology. We aim for WCAG 2.1 AA on every page. Where we fall short, we say so."
      lastUpdated="17 May 2026"
      status="draft"
      toc={toc}
      navigate={navigate}
    >
      <section id="commitment">
        <h2><span className="num">01</span> Our commitment</h2>
        <p>
          Doblier builds infrastructure for regulated industries. Accessibility is part of that discipline — not a checklist tacked on at the end. We design doblier.io so technical leaders using screen readers, keyboard navigation, or other assistive technology get the same information as everyone else.
        </p>
      </section>

      <section id="standard">
        <h2><span className="num">02</span> Standard we target</h2>
        <p>
          We target conformance with <strong>Web Content Accessibility Guidelines (WCAG) 2.1, Level AA</strong>, and align with Section 508 (US) and EN 301 549 (EU) where applicable. We test with axe-core, Lighthouse, and manual screen-reader passes on every release.
        </p>
      </section>

      <section id="supported">
        <h2><span className="num">03</span> What's supported</h2>
        <ul>
          <li>Skip-to-content link on every page.</li>
          <li>Full keyboard navigation across the site, including the mega menu and Tweaks panel.</li>
          <li>Visible focus rings on every interactive element.</li>
          <li>Semantic HTML with proper landmarks: <code>header</code>, <code>nav</code>, <code>main</code>, <code>footer</code>.</li>
          <li>ARIA labels and roles where native semantics are insufficient.</li>
          <li>Color contrast meeting WCAG AA on body text (4.5:1) and large text (3:1).</li>
          <li>Resizable text up to 200% without loss of content.</li>
          <li>Reduced-motion support: animations respect <code>prefers-reduced-motion</code>.</li>
          <li>Form fields with associated labels, error states, and inline guidance.</li>
        </ul>
      </section>

      <section id="known">
        <h2><span className="num">04</span> Known limitations</h2>
        <p>We are honest about where we still have work to do:</p>
        <ul>
          <li><strong>Architecture diagrams.</strong> Some interactive diagrams currently rely on hover to reveal detail. Long-form text equivalents accompany each one; we are migrating to keyboard-equivalent affordances by Q3 2026.</li>
          <li><strong>Embedded PDFs.</strong> Older whitepapers (pre-2026) may not be fully tagged. Newer downloads ship with full PDF/UA tagging.</li>
        </ul>
      </section>

      <section id="feedback">
        <h2><span className="num">05</span> Give us feedback</h2>
        <p>
          If you encounter an accessibility barrier — a missing label, a contrast issue, a keyboard trap — write to <a href="mailto:accessibility@doblier.io">accessibility@doblier.io</a>. Include the page URL, what you were trying to do, and any assistive technology you were using. We aim to acknowledge within 2 business days and resolve within 30 days.
        </p>
      </section>

      <section id="formal">
        <h2><span className="num">06</span> Formal complaint route</h2>
        <p>
          If we haven't resolved an issue to your satisfaction, you can escalate to the relevant authority in your jurisdiction (e.g. the US Access Board, the EU national enforcement body designated under the European Accessibility Act). We'll provide direct contact details on request.
        </p>
      </section>
    </LegalShell>
  );
};

Object.assign(window, { PrivacyPolicy, TermsOfUse, CookiePolicy, AccessibilityStatement });
