// Modal pages — AI statement, How we use data, Privacy/GDPR, "We don't store your data".

const PAGES = {
  ai: {
    title: "AI statement",
    deck: "How AI participates in your bill analysis, where it doesn't, and what we do to keep it honest.",
    body: () => (
      <React.Fragment>
        <div className="promise">
          <b>The short version.</b>
          We use a large language model to read your bill, extract line items, and explain what they mean.
          We do not let the model decide what is owed, what is fraud, or what your legal options are.
          Those framings are written by humans and reviewed quarterly.
        </div>

        <h2>Where the model helps</h2>
        <ul>
          <li>Parsing free-form text and tables out of PDFs and photos.</li>
          <li>Mapping vague descriptions ("Admin recovery surcharge") onto a normalized vocabulary.</li>
          <li>Drafting plain-English explanations of CPT, HCPCS, and revenue codes.</li>
          <li>Producing the first draft of a negotiation script that you can edit before using.</li>
        </ul>

        <h2>Where the model does not decide</h2>
        <ul>
          <li>Flag thresholds (when a line is "suspicious") are set in code by our medical-billing team and a board-certified coder we contract with.</li>
          <li>Regional benchmark prices come from anonymized aggregations of real bills, not model output.</li>
          <li>"Likely recoverable" estimates use deterministic rules — not the model's judgment — so two users with the same bill see the same number.</li>
        </ul>

        <h2>Honesty checks</h2>
        <p>
          Every flag carries a citation back to the line item, the rule that triggered it,
          and the underlying source (NCCI policy, payer manual, or aggregated benchmark).
          If you can't see <em>why</em> we flagged something, that's a bug — please tell us.
        </p>

        <h2>Models we use</h2>
        <p>
          Document parsing and explanation generation run on a frontier model under a zero-retention
          enterprise agreement. Your bill is sent as a transient prompt and is not used to train
          that model or any other.
        </p>

        <h2>Mistakes</h2>
        <p>
          AI gets things wrong. So do humans. So do hospitals. Treat our output as a sharp second
          opinion — not a final answer. We surface uncertainty by marking lines as <i>flagged</i>,
          <i> negotiable</i>, or <i>within range</i>, and we tell you when the underlying market
          data is thin.
        </p>
      </React.Fragment>
    )
  },

  data: {
    title: "How we use your data",
    deck: "Plain-English answer to the question: what happens to my bill after I upload it?",
    body: () => (
      <React.Fragment>
        <div className="promise">
          <b>One sentence.</b>
          Your bill is parsed in memory, returned to you as an analysis, and discarded —
          unless you opt in to anonymized benchmarking, in which case the line-item amounts
          (without your name, account, or address) help everyone else negotiate better.
        </div>

        <h2>What we collect by default</h2>
        <ul>
          <li>The file itself — held only in volatile memory for the duration of one analysis.</li>
          <li>Operational logs (request timing, error rates) without bill content.</li>
          <li>A coarse hash of your IP for rate-limiting. We don't keep the IP itself.</li>
        </ul>

        <h2>What we collect if you opt in</h2>
        <ul>
          <li>Anonymized line items: code, description, charged amount, ZIP-3.</li>
          <li>No names, no account numbers, no provider patient identifiers.</li>
          <li>You can withdraw at any time and we will purge contributions within 30 days.</li>
        </ul>

        <h2>What we never do</h2>
        <ul>
          <li>Sell your data to insurers, employers, advertisers, or data brokers.</li>
          <li>Use your bill content to train any AI model.</li>
          <li>Share identifiable information with affiliated providers we link out to.</li>
        </ul>

        <h2>Why benchmarks exist</h2>
        <p>
          Negotiation power comes from knowing the median rate. The more bills our community
          contributes, the sharper the percentile we can show every user. We are honest that
          this is a network effect — and we believe the only ethical version of it is the one
          where contribution is opt-in, anonymized, and reversible.
        </p>
      </React.Fragment>
    )
  },

  privacy: {
    title: "Privacy & compliance",
    deck: "GDPR, CCPA, CPRA, Texas, Virginia, Colorado. The same rights, restated for each.",
    body: () => (
      <React.Fragment>
        <h2>Your rights, regardless of jurisdiction</h2>
        <ul>
          <li><b>Access.</b> Ask what we hold on you. We respond within 30 days.</li>
          <li><b>Portability.</b> Download an export in JSON.</li>
          <li><b>Correction.</b> Fix anything inaccurate.</li>
          <li><b>Deletion.</b> Have all records purged from primary and backup systems.</li>
          <li><b>Objection.</b> Opt out of anonymized benchmarking at any time.</li>
        </ul>

        <h2>EU / UK · GDPR</h2>
        <p>
          We act as the data controller for the limited operational data described above.
          Lawful bases are <i>consent</i> for benchmark contribution and <i>legitimate interest</i> for
          rate-limiting and abuse prevention. International transfers use Standard Contractual Clauses.
          Our EU representative is listed at the bottom of this page.
        </p>

        <h2>California · CCPA / CPRA</h2>
        <p>
          We do not sell or share personal information for cross-context behavioral advertising.
          We honor Global Privacy Control signals automatically.
        </p>

        <h2>Texas · Virginia · Colorado · Connecticut · Utah</h2>
        <p>
          State-level consumer privacy rights mirror the protections above. Sensitive personal
          information categories collected: <b>none by default</b>. Health information from medical
          bills is processed only for the duration of the analysis and is not retained.
        </p>

        <h2>Children</h2>
        <p>
          Checkthisbill is not directed at people under 16. We do not knowingly collect data from minors.
          A parent or guardian uploading a child's medical bill processes that bill on the child's behalf;
          the same in-memory-only handling applies.
        </p>

        <h2>Changes to this policy</h2>
        <p>
          When we change anything material, we post the change with a 30-day window before it takes effect,
          and we email everyone with an account. Quiet rewrites are not allowed under our internal rules.
        </p>
      </React.Fragment>
    )
  },

  storage: {
    title: "We don't store your bill.",
    deck: "Most billing tools want everything: your inbox, your bank, your card. We want about thirty seconds.",
    body: () => (
      <React.Fragment>
        <div className="promise">
          <b>Zero-retention by default.</b>
          The PDF or image you upload is held in volatile memory only.
          When the analysis finishes — or after 5 minutes, whichever is first — it is gone.
        </div>

        <h2>What that means in practice</h2>
        <ul>
          <li>No copy is written to disk on our servers.</li>
          <li>No copy is written to disk on any model provider we use.</li>
          <li>You will not find your bill in a "history" tab — there isn't one.</li>
          <li>If you want a record, download the PDF report at the end of the analysis. That copy lives on your device, not ours.</li>
        </ul>

        <h2>What we do keep</h2>
        <ul>
          <li>The fact that <i>some</i> analysis ran, with timestamps, for billing and abuse-prevention.</li>
          <li>If you opt in: anonymized line-item benchmarks with no link back to you.</li>
        </ul>

        <h2>Why this is the default</h2>
        <p>
          Billing data is sensitive in ways most product teams understand only after a breach.
          We'd rather not be the team that learns the lesson the hard way — and we'd rather you
          not be the user who teaches them. The cheapest way to keep something safe is to not
          keep it at all.
        </p>

        <h2>Independent verification</h2>
        <p>
          We are mid-audit for SOC 2 Type II. Once complete, the report is available on request.
          Our infrastructure-as-code is open for inspection by partners under NDA — no hidden
          retention paths.
        </p>
      </React.Fragment>
    )
  },

  how: {
    title: "How it works",
    deck: "Upload, read, explain, negotiate. Four moves. About thirty seconds end-to-end.",
    body: () => (
      <React.Fragment>
        <h2>1. Upload</h2>
        <p>
          Drag a PDF, snap a photo, or paste a screenshot. Internet bills, medical statements,
          repair quotes, subscription invoices, hotel folios. We support most consumer billing formats
          and a growing set of business invoices.
        </p>

        <h2>2. Read</h2>
        <p>
          We extract every line — codes, descriptions, quantities, amounts. We normalize vague
          surcharge names against a vocabulary built from millions of real bills, so
          "Administrative Recovery Fee", "Cost Recovery Surcharge", and "Operational Adjustment"
          all resolve to the same family.
        </p>

        <h2>3. Explain</h2>
        <p>
          Each line gets one of three labels — <i>flagged</i>, <i>negotiable</i>, or <i>within range</i> —
          and a one-sentence explanation in plain English. If a line shouldn't be there, we say so,
          and we tell you why.
        </p>

        <h2>4. Negotiate</h2>
        <p>
          We hand you a script tuned to the actual issues we found. Calm, specific, and short.
          Use it on a phone call, paste it into live chat, or attach it to a written dispute.
          Then close the tab and get on with your life.
        </p>
      </React.Fragment>
    )
  },

  monitor: {
    title: "Bill creep monitoring",
    deck: "Coming soon — we'll watch your future bills against this baseline and ping you only when something changes.",
    body: () => (
      <React.Fragment>
        <p>
          One-time analysis is most of the value. But if you'd like, we can hold a checksum
          of this bill (no content, just structural fingerprints) and compare it against future
          uploads. When a fee creeps, a new line appears, or a promo expires, we'll send one email.
          No dashboards, no daily reminders.
        </p>
        <p style={{ color: 'var(--ink-3)' }}>
          Premium feature, $4/month, opt-in. Available in beta from June.
        </p>
      </React.Fragment>
    )
  }
};

const ModalPage = ({ pageKey, onClose }) => {
  const isOpen = !!(pageKey && PAGES[pageKey]);

  React.useEffect(() => {
    if (!isOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;
  const page = PAGES[pageKey];

  return (
    <div className="modal-page" onClick={onClose}>
      <div className="modal-inner" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        <div className="legal">
          <span className="eyebrow">/ {page.title}</span>
          <h1 style={{ marginTop: 16 }}>{page.title}</h1>
          <p className="deck">{page.deck}</p>
          {page.body()}
          <div style={{
            marginTop: 48, paddingTop: 24,
            borderTop: '1px solid var(--line-2)',
            fontSize: 'var(--fz-micro)', letterSpacing: '0.06em',
            color: 'var(--ink-3)', display: 'flex', justifyContent: 'space-between'
          }}>
            <span>Last updated · Apr 2026</span>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ModalPage });