// ═══════════════════════════════════════════════════════════
// Leftshifted - Privacy Notice Page
// ═══════════════════════════════════════════════════════════

const privacySections = [
  {
    num: '01', title: 'Contact details',
    body: <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>This privacy notice tells you what to expect us to do with your personal information when you contact us or use our services.</p>,
    card: <><strong>Leftshifted Ltd</strong><br />66 Paul Street<br />London<br />EC2A 4NA</>,
  },
  {
    num: '02', title: 'What information we collect, use, and why',
    body: <>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>We collect or use the following personal information for the operation of client or customer accounts:</p>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)', marginTop: 12 }}>Names and contact details.</p>
    </>,
  },
  {
    num: '03', title: 'Lawful bases and data protection rights',
    body: <>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>Under UK data protection law, we must have a "lawful basis" for collecting and using your personal information. You can find out more about lawful bases on the <a href="https://ico.org.uk/for-organisations/advice-for-small-organisations/getting-started-with-gdpr/data-protection-principles-definitions-and-key-terms/" target="_blank" rel="noopener noreferrer">ICO's website</a>.</p>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)', marginTop: 12 }}>Your data protection rights are set out below. You can find out more about your rights and the exemptions which may apply on the ICO's website.</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 24 }}>
        {[
          { t: 'Your right of access', b: 'You have the right to ask us for copies of your personal information, including details about where we get it from and who we share it with. Some exemptions may apply.' },
          { t: 'Your right to rectification', b: 'You have the right to ask us to correct or delete personal information you think is inaccurate or incomplete.' },
          { t: 'Your right to erasure', b: 'You have the right to ask us to delete your personal information.' },
          { t: 'Your right to restriction of processing', b: 'You have the right to ask us to limit how we can use your personal information.' },
          { t: 'Your right to object to processing', b: 'You have the right to object to the processing of your personal data.' },
          { t: 'Your right to data portability', b: 'You have the right to ask that we transfer the personal information you gave us to another organisation, or to you.' },
          { t: 'Your right to withdraw consent', b: 'When we use consent as our lawful basis you have the right to withdraw your consent at any time.' },
        ].map((r, i) => (
          <div key={i} style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '16px 20px' }}>
            <div style={{ font: 'var(--type-h4)', marginBottom: 6 }}>{r.t}</div>
            <div style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)' }}>{r.b} <a href="https://ico.org.uk/for-organisations/advice-for-small-organisations/privacy-notices-and-cookies/create-your-own-privacy-notice/your-data-protection-rights/" target="_blank" rel="noopener noreferrer">Read more</a></div>
          </div>
        ))}
      </div>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)', marginTop: 24 }}>If you make a request, we must respond to you without undue delay and in any event within one month. To make a data protection rights request, please contact us using the contact details at the top of this notice.</p>
      <p style={{ font: 'var(--type-h4)', marginTop: 24, marginBottom: 12 }}>Our lawful basis for collecting and using your data</p>
      <span style={{ display: 'inline-block', padding: '6px 16px', borderRadius: 'var(--radius-pill)', background: 'var(--ls-blue-10)', color: 'var(--ls-ultramarine-blue)', font: '600 13px/1 var(--font-mono)', letterSpacing: '.04em', marginBottom: 12 }}>Contract</span>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>We collect or use personal information for the operation of client or customer accounts on the basis of contract - we have to collect or use the information so we can enter into or carry out a contract with you. All of your data protection rights may apply except the right to object.</p>
    </>,
  },
  {
    num: '04', title: 'Where we get personal information from',
    body: <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>Directly from you.</p>,
  },
  {
    num: '05', title: 'How long we keep information',
    body: <>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>We store contact details in our CRM. Our retention periods are:</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 20 }}>
        <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '16px 20px' }}>
          <div style={{ font: 'var(--type-h4)', marginBottom: 6 }}>Contacts who have never become clients</div>
          <div style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)' }}>We retain contact details for 3 years from the date of last activity. After this period, details are deleted from our CRM.</div>
        </div>
        <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '16px 20px' }}>
          <div style={{ font: 'var(--type-h4)', marginBottom: 6 }}>Clients</div>
          <div style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)' }}>We retain contact details for 6 years from the date of last activity or the end of our business relationship, whichever is later. This is to meet our legal and accounting obligations.</div>
        </div>
      </div>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)', marginTop: 20 }}>To request deletion of your information before these periods expire, please contact us using the details at the top of this notice.</p>
    </>,
  },
  {
    num: '06', title: 'Who we share information with',
    body: <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>We may share your personal information with suppliers and service providers where necessary to deliver our services.</p>,
  },
  {
    num: '07', title: 'How to complain',
    body: <>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>If you have any concerns about our use of your personal information, please contact us in the first instance:</p>
    </>,
    card: <><strong>Leftshifted Ltd</strong><br />66 Paul Street<br />London<br />EC2A 4NA</>,
    after: <>
      <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)', marginTop: 20 }}>If you remain unhappy after raising a complaint with us, you can also complain to the Information Commissioner's Office (ICO).</p>
      <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '20px 24px', marginTop: 16 }}>
        <p style={{ font: 'var(--type-body-sm)', marginBottom: 8 }}><strong>Information Commissioner's Office</strong></p>
        <p style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)', marginBottom: 8 }}>Wycliffe House, Water Lane<br />Wilmslow, Cheshire, SK9 5AF</p>
        <p style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)', marginBottom: 8 }}>Helpline: <a href="tel:03031231113">0303 123 1113</a></p>
        <p style={{ font: 'var(--type-body-sm)' }}><a href="https://www.ico.org.uk/make-a-complaint" target="_blank" rel="noopener noreferrer">ico.org.uk/make-a-complaint</a></p>
      </div>
    </>,
  },
];

const PrivacyPage = () => (
  <PageShell current="/privacy">
    <div className="page-wrap" style={{ paddingTop: 64, paddingBottom: 24 }}>
      <span style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-mono)', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>Legal</span>
      <h1 style={{ font: 'var(--type-display-2)', letterSpacing: 'var(--tracking-display)', marginTop: 12 }}>Privacy notice</h1>
      <p style={{ font: 'var(--type-body-sm)', color: 'var(--fg-subtle)', marginTop: 8 }}>Last updated: 3 August 2026</p>
    </div>
    <Section style={{ paddingTop: 24, paddingBottom: 100 }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '24px 28px', marginBottom: 48 }}>
          <span style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-mono)', textTransform: 'uppercase', color: 'var(--ls-ultramarine-blue)', display: 'block', marginBottom: 12 }}>Contents</span>
          <ol style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
            {privacySections.map((s, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, font: 'var(--type-body-sm)' }}>
                <span style={{ color: 'var(--ls-ultramarine-blue)', fontWeight: 700, flexShrink: 0 }}>{s.num}.</span>
                <a href={`#privacy-${s.num}`}>{s.title}</a>
              </li>
            ))}
          </ol>
        </div>
        {privacySections.map((s, i) => (
          <div key={i} id={`privacy-${s.num}`} style={{ paddingBottom: 40, marginBottom: 40, borderBottom: i < privacySections.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
            <span style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-mono)', color: 'var(--ls-ultramarine-blue)', display: 'block', marginBottom: 8 }}>{s.num}</span>
            <h2 style={{ font: 'var(--type-h2)', letterSpacing: 'var(--tracking-h)', marginBottom: 16 }}>{s.title}</h2>
            {s.body}
            {s.card && (
              <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '16px 20px', marginTop: 16, font: 'var(--type-body-sm)', color: 'var(--fg-muted)' }}>
                {s.card}
              </div>
            )}
            {s.after}
          </div>
        ))}
      </div>
    </Section>
  </PageShell>
);

Object.assign(window, { PrivacyPage });
