// PrivacyPage.jsx — Privacy Policy for Tiber Course
// Plain-English, premium-feeling. Starting point for legal review.

const PRIVACY_SECTIONS = [
  {
    id: 'who',
    title: 'Who we are',
    body: (
      <>
        <p>Tiber Course is a UK compliance-training platform operated by <strong>Dopara Group Ltd</strong>, a company registered in England and Wales.</p>
        <p>For privacy questions, email <a href="mailto:help@tibercourse.com">help@tibercourse.com</a>.</p>
      </>
    ),
  },
  {
    id: 'what',
    title: 'What data we collect',
    body: (
      <>
        <p>We collect only what's needed to run the platform:</p>
        <ul>
          <li><strong>Account data</strong> — name, email address, organisation name, role.</li>
          <li><strong>Training data</strong> — courses assigned, lessons completed, assessment scores, certificates issued, dates and times.</li>
          <li><strong>Billing data</strong> — billing address, invoice history. Card details are handled by our payment processor (Stripe) — we never see or store full card numbers.</li>
          <li><strong>Usage data</strong> — basic technical logs (IP, browser, page visited) so we can keep the service reliable and safe.</li>
        </ul>
        <p>We do not collect special-category data (health, religion, political views, etc.) and we do not buy or sell personal data.</p>
      </>
    ),
  },
  {
    id: 'why',
    title: 'Why we use it',
    body: (
      <>
        <p>We use your data only for the purposes you'd expect:</p>
        <ul>
          <li>Running your account and your team's training</li>
          <li>Sending reminders to learners who haven't completed assigned training</li>
          <li>Generating named, dated certificates and completion records for your internal evidence</li>
          <li>Sending operational emails (password resets, receipts, service updates)</li>
          <li>Keeping the service secure and improving its reliability</li>
        </ul>
        <p>We will only send marketing emails to people who have explicitly opted in, and you can opt out at any time from the link in any email.</p>
      </>
    ),
  },
  {
    id: 'lawful-basis',
    title: 'Lawful basis (UK GDPR)',
    body: (
      <>
        <p>We process your data under the following lawful bases:</p>
        <ul>
          <li><strong>Contract</strong> — to deliver the training service you've paid for.</li>
          <li><strong>Legitimate interest</strong> — to keep the service secure and to send essential operational emails.</li>
          <li><strong>Consent</strong> — for any marketing emails or non-essential cookies.</li>
          <li><strong>Legal obligation</strong> — to meet our accounting and statutory obligations.</li>
        </ul>
      </>
    ),
  },
  {
    id: 'sharing',
    title: 'Who we share it with',
    body: (
      <>
        <p>We share data only with trusted service providers we need to operate. Each is bound by data-processing agreements:</p>
        <ul>
          <li><strong>Hosting and email</strong> — UK / EU-region cloud providers.</li>
          <li><strong>Payments</strong> — Stripe (card processing).</li>
          <li><strong>Email delivery</strong> — for transactional emails (reminders, certificates, login links).</li>
          <li><strong>Customer support</strong> — when you contact us, we keep a record of the conversation.</li>
        </ul>
        <p>We never sell your data, and we never share it with third parties for their own marketing.</p>
      </>
    ),
  },
  {
    id: 'retention',
    title: 'How long we keep it',
    body: (
      <>
        <p>We keep training records (enrolments, completions, certificates) for as long as your account is active. After cancellation, we retain certificates for <strong>seven years</strong> by default so they remain available as inspection evidence — you can request earlier deletion in writing.</p>
        <p>Billing records are kept for the period required by UK tax law (currently six years).</p>
        <p>Basic technical logs are rotated within 30 days.</p>
      </>
    ),
  },
  {
    id: 'rights',
    title: 'Your rights',
    body: (
      <>
        <p>Under UK GDPR you have the right to:</p>
        <ul>
          <li>Access the personal data we hold about you</li>
          <li>Correct any data that's wrong</li>
          <li>Delete your data (with limited exceptions for records we're legally required to keep)</li>
          <li>Object to processing or restrict it</li>
          <li>Take your data with you (data portability)</li>
          <li>Complain to the Information Commissioner's Office (ICO) — <a href="https://ico.org.uk/" target="_blank" rel="noreferrer">ico.org.uk</a></li>
        </ul>
        <p>To exercise any of these, email <a href="mailto:help@tibercourse.com">help@tibercourse.com</a>. We aim to respond within 30 days.</p>
      </>
    ),
  },
  {
    id: 'cookies',
    title: 'Cookies',
    body: (
      <>
        <p>We use a small number of essential cookies to keep you signed in and to remember your preferences. We use a privacy-friendly, cookie-less analytics service to understand which pages are useful — no third-party trackers, no cross-site fingerprinting.</p>
        <p>You can disable cookies in your browser settings. The site will still work, but you may need to sign in more often.</p>
      </>
    ),
  },
  {
    id: 'changes',
    title: 'Changes to this policy',
    body: (
      <>
        <p>We may update this policy from time to time. Material changes will be communicated by email to organisation administrators with at least 14 days' notice. The "last updated" date below shows the current version.</p>
        <p style={{ marginTop: 16, color: '#7A756E', fontSize: 13 }}>Last updated: 22 May 2026.</p>
      </>
    ),
  },
];

const PrivacyPage = ({ onNav }) => (
  <div style={{ paddingTop: 124, background: C.parchment, minHeight: '100vh' }}>
    {/* Header */}
    <div style={{ background: C.linen, borderBottom: `1px solid ${C.border}`, padding: '56px 40px 48px' }}>
      <div style={{ maxWidth: 920, margin: '0 auto' }}>
        <Label color={C.brass}>Legal</Label>
        <h1 style={{ fontFamily: F.display, fontSize: 'clamp(34px, 4.4vw, 46px)', fontWeight: 400, fontStyle: 'italic', color: C.ink, lineHeight: 1.15, marginBottom: 14, maxWidth: 760 }}>
          Privacy Policy.
        </h1>
        <p style={{ fontFamily: F.body, fontSize: 16, color: C.ash, lineHeight: 1.65, maxWidth: 620 }}>
          The plain-English version of what we collect, why, and what your rights are.
        </p>
      </div>
    </div>

    <div style={{ maxWidth: 920, margin: '0 auto', padding: '48px 40px 96px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 48, alignItems: 'start' }}>

      <aside style={{ position: 'sticky', top: 100, alignSelf: 'start' }}>
        <Label color={C.dust} mb={14}>On this page</Label>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {PRIVACY_SECTIONS.map((s, i) => (
            <a key={s.id} href={'#' + s.id} style={{
              display: 'block', padding: '6px 0',
              fontFamily: F.body, fontSize: 13.5, color: C.ash, textDecoration: 'none',
              borderLeft: `2px solid ${C.borderSubtle}`, paddingLeft: 12,
              transition: 'color 0.15s, border-color 0.15s',
            }}
              onMouseEnter={e => { e.currentTarget.style.color = C.brass; e.currentTarget.style.borderColor = C.brass; }}
              onMouseLeave={e => { e.currentTarget.style.color = C.ash; e.currentTarget.style.borderColor = C.borderSubtle; }}
            >
              <span style={{ fontFamily: F.mono, fontSize: 11, color: C.dust, marginRight: 10 }}>{String(i + 1).padStart(2, '0')}</span>
              {s.title}
            </a>
          ))}
        </nav>
      </aside>

      <main style={{ minWidth: 0, gridColumn: 'span 2' }}>
        {PRIVACY_SECTIONS.map((s, i) => (
          <section key={s.id} id={s.id} style={{ marginBottom: 56, scrollMarginTop: 100 }}>
            <div style={{ fontFamily: F.mono, fontSize: 11, color: C.brass, marginBottom: 6 }}>{String(i + 1).padStart(2, '0')}</div>
            <h2 style={{ fontFamily: F.sans, fontSize: 22, fontWeight: 600, color: C.ink, lineHeight: 1.25, letterSpacing: '-0.3px', marginBottom: 16 }}>{s.title}</h2>
            <div style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.75 }} className="terms-body">{s.body}</div>
            <div style={{ marginTop: 22, height: 1, background: C.borderSubtle }} />
          </section>
        ))}

        <div style={{
          background: C.linen, border: `1px solid ${C.border}`, borderRadius: 12,
          padding: '22px 26px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16, flexWrap: 'wrap', marginTop: 16,
        }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass, marginBottom: 6 }}>Questions?</div>
            <div style={{ fontFamily: F.body, fontSize: 14, color: C.ink, lineHeight: 1.55 }}>
              Email <a href="mailto:help@tibercourse.com" style={{ color: C.brass, textDecoration: 'underline', textUnderlineOffset: 3 }}>help@tibercourse.com</a> or read the <a href="#" onClick={(e) => { e.preventDefault(); onNav('terms'); }} style={{ color: C.brass, textDecoration: 'underline', textUnderlineOffset: 3 }}>Terms of Service</a>.
            </div>
          </div>
          <button onClick={() => onNav('contact')} style={{
            background: C.ink, color: C.textInverse, border: 'none', borderRadius: 9999,
            padding: '12px 22px', cursor: 'pointer',
            fontFamily: F.sans, fontSize: 11, fontWeight: 600,
            letterSpacing: '1.5px', textTransform: 'uppercase', flexShrink: 0,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>Contact us</button>
        </div>
      </main>
    </div>
  </div>
);

Object.assign(window, { PrivacyPage });