const Privacy = () => {
  const { ink, cream, muted, mutedDark, mutedDarker, rule, ruleDark, accent } = rToken;

  return (
    <div style={{ background: cream, color: ink, fontFamily: 'Inter, sans-serif', minHeight: '100vh' }}>
      <RNav active="privacy" />

      {/* HERO */}
      <div style={{ padding: '120px 64px 96px', borderBottom: `1px solid ${rule}` }}>
        <RMono style={{ color: accent, display: 'block', marginBottom: 28 }}>§ privacy charter</RMono>
        <RSerif style={{ fontSize: 140, lineHeight: 0.9, letterSpacing: '-0.035em', display: 'block', maxWidth: 1400 }}>
          Not shared.<br />
          Not sold.<br />
          Not used for <span style={{ fontStyle: 'italic', color: accent }}>anything else</span>.
        </RSerif>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginTop: 56 }}>
          <div />
          <RSans style={{ fontSize: 18, lineHeight: 1.6, color: muted, maxWidth: 560 }}>
            Period. No caveats. No asterisks.
            <br /><br />
            This is the charter — the guarantees, plainly worded. It&rsquo;s where our <em>Trust</em> principle becomes legal text. For <em>how</em> your voice gets built on top of these guarantees, see <a href="how-it-works.html" style={{ color: ink }}>How it works</a>.
          </RSans>
        </div>
      </div>

      {/* NORTH STAR */}
      <div style={{ background: ink, color: cream, padding: '120px 64px' }}>
        <RMono style={{ color: accent, display: 'block', marginBottom: 24 }}>north star</RMono>
        <RSerif style={{ fontSize: 72, lineHeight: 1.05, letterSpacing: '-0.02em', display: 'block', maxWidth: 1400 }}>
          We understand why people are worried<br />
          about AI <span style={{ fontStyle: 'italic', color: mutedDarker }}>stealing</span> their intellectual property.<br />
          We built Respoken with that concern as our <span style={{ fontStyle: 'italic', color: accent }}>north star</span>.
        </RSerif>
      </div>

      {/* THREE ARTICLES — tightened, no overlap with how-it-works */}
      <div style={{ padding: '40px 64px 80px' }}>
        {[
          {
            n: 'I.',
            t: 'Your writing stays yours.',
            b: 'The prior content you bring in and everything you create inside Respoken is used for one purpose only: building your voice, inside your account. Your writing never trains a model anyone else will ever use — not a partner&rsquo;s, not a future version of Respoken that a different user gets to touch, not a general-purpose LLM. Like any AI tool, Respoken runs on underlying language models trained on generic language. Those are trained on public and licensed data — never on your content.',
          },
          {
            n: 'II.',
            t: 'Nothing leaves without your consent.',
            b: 'Your writing doesn&rsquo;t get licensed, sold to data brokers, or handed to outside model providers. Paid subscriptions are how this gets paid for — that&rsquo;s the entire business model. If there&rsquo;s ever anything new we want to do with your content, we ask first, in plain language, per account, and your existing work stays off-limits regardless of your answer.',
          },
          {
            n: 'III.',
            t: 'When you&rsquo;re done, you&rsquo;re done.',
            b: 'Delete everything in one click. You have 30 days to change your mind — a grace period, not a dark pattern. After that, your data is removed from training data, caches, and pending backups, and we email you confirming it&rsquo;s gone.',
          },
        ].map((s) => (
          <div key={s.n} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 56, padding: '64px 0', borderTop: `1px solid ${rule}` }}>
            <RSerif style={{ fontSize: 80, fontStyle: 'italic', color: accent, lineHeight: 1 }}>{s.n}</RSerif>
            <div>
              <RSerif style={{ fontSize: 52, lineHeight: 1.0, display: 'block', marginBottom: 24 }}>{s.t}</RSerif>
              <RSans style={{ fontSize: 18, lineHeight: 1.65, color: muted, display: 'block', maxWidth: 780 }} dangerouslySetInnerHTML={{ __html: s.b }} />
            </div>
          </div>
        ))}
      </div>

      {/* INFRASTRUCTURE */}
      <div style={{ background: ink, color: cream, padding: '140px 64px' }}>
        <RMono style={{ color: accent, display: 'block', marginBottom: 20 }}>Infrastructure</RMono>
        <RSerif style={{ fontSize: 72, lineHeight: 0.95, display: 'block', marginBottom: 64, maxWidth: 1100 }}>
          Where your data lives<br />— and <span style={{ fontStyle: 'italic' }}>doesn&rsquo;t</span>.
        </RSerif>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: ruleDark }}>
          {[
            ['Encrypted at rest', 'AES-256, per-account keys. Nobody casually reads your content.'],
            ['Encrypted in transit', 'TLS 1.3 end-to-end. No plaintext hops between internal services either.'],
            ['Account isolation', 'Models, corpora, and pattern maps live in per-account partitions. No shared training runs.'],
            ['Minimal retention', 'We keep only what&rsquo;s needed to run your account. Logs roll fast. Backups roll with your deletions.'],
            ['No third-party training', 'We don&rsquo;t license your data. We don&rsquo;t resell it. We don&rsquo;t hand it to model providers. Zero exceptions.'],
            ['Auditable deletion', 'Every delete is logged and surfaced. You can check what was removed and when.'],
          ].map(([t, b]) => (
            <div key={t} style={{ background: ink, padding: '36px 32px' }}>
              <RSerif style={{ fontSize: 26, display: 'block', marginBottom: 12 }}>{t}</RSerif>
              <RSans style={{ fontSize: 14.5, lineHeight: 1.65, color: mutedDarker }}>{b}</RSans>
            </div>
          ))}
        </div>
      </div>

      {/* Q&A */}
      <div style={{ padding: '140px 64px', borderBottom: `1px solid ${rule}` }}>
        <RMono style={{ color: accent, display: 'block', marginBottom: 20 }}>The awkward questions</RMono>
        <RSerif style={{ fontSize: 72, lineHeight: 0.95, display: 'block', marginBottom: 56, maxWidth: 1100 }}>
          Answered first.
        </RSerif>
        {[
          ['Do you train a foundation model on my writing?', 'No. The underlying language models we use are trained on generic language — public and licensed corpora, like any AI tool. Your writing is never in that training data. Your writing only ever shapes your own voice, inside your own account.'],
          ['What about "improving the product"?', 'Product telemetry — which buttons you click, how long a draft takes — is separate from your writing and never contains it. We ship improvements from usage metrics, not from your sentences.'],
          ['Will this change in the future?', 'No. Your writing powers your voice, in your account, and nothing else — that&rsquo;s the product. It isn&rsquo;t a default setting waiting to be flipped, and it isn&rsquo;t a commitment we plan to grow out of.'],
          ['What if you get acquired?', 'The charter is written into the terms. An acquirer inherits the terms. If a future change ever conflicts with what you signed up for, you&rsquo;ll be notified with enough time to export and leave.'],
          ['What does the 30-day window actually do?', 'When you delete everything, your data is held for 30 days so you can change your mind. You can cancel the deletion any time in that window. After 30 days, it&rsquo;s removed — and we email you confirming it&rsquo;s done.'],
          ['Can I self-host?', 'On the Studio plan, yes — a VPC deployment with bring-your-own keys.'],
        ].map(([q, a]) => (
          <div key={q} style={{ padding: '36px 0', borderTop: `1px solid ${rule}`, display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64 }}>
            <RSerif style={{ fontSize: 26, lineHeight: 1.2 }}>{q}</RSerif>
            <RSans style={{ fontSize: 16, lineHeight: 1.65, color: muted }} dangerouslySetInnerHTML={{ __html: a }} />
          </div>
        ))}
      </div>

      {/* LINKS */}
      <div style={{ padding: '80px 64px', textAlign: 'center' }}>
        <RMono style={{ color: muted }}>Full legal documents: <span style={{ color: ink }}>Privacy policy · Data processing agreement · Security whitepaper</span></RMono>
      </div>

      <RFooter />
    </div>
  );
};

window.Privacy = Privacy;
