import { useNavigate } from 'react-router-dom';

const RIGHTS = [
  { right: 'Right of access', desc: 'You can request a copy of all personal data we hold about you at any time.' },
  { right: 'Right to rectification', desc: 'You can ask us to correct inaccurate data or complete incomplete data.' },
  { right: 'Right to erasure', desc: 'You can request deletion of your personal data ("right to be forgotten"). We will comply within 30 days, subject to legal retention requirements.' },
  { right: 'Right to restriction', desc: 'You can ask us to pause processing of your data in certain circumstances.' },
  { right: 'Right to data portability', desc: 'You can request your data in a structured, machine-readable format (JSON) for transfer to another service.' },
  { right: 'Right to object', desc: 'You can object to processing of your data based on legitimate interests.' },
  { right: 'Right to withdraw consent', desc: 'Where processing is based on consent, you can withdraw it at any time without affecting the lawfulness of prior processing.' },
];

export default function GdprPage() {
  const navigate = useNavigate();

  return (
    <div className="page-enter" style={{ maxWidth: '760px', margin: '0 auto', padding: 'clamp(64px, 10vh, 100px) 24px 80px' }}>
      <div style={{ marginBottom: '48px' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginBottom: '20px' }}>
          <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
          <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Legal</span>
        </div>
        <h1 className="heading-lg" style={{ marginBottom: '12px' }}>GDPR Compliance</h1>
        <p style={{ color: 'var(--text-muted)', fontSize: '0.875rem' }}>Last updated: May 28, 2026</p>
      </div>

      {/* Intro */}
      <div style={{ color: 'var(--text-secondary)', fontSize: '0.9375rem', lineHeight: 1.85, marginBottom: '48px' }}>
        <p style={{ marginBottom: '16px' }}>The General Data Protection Regulation (GDPR) applies to all EU residents who use CShare, regardless of where CShare's infrastructure is located. We take our obligations under GDPR seriously and have designed our data practices around it from the start.</p>
        <p>Our Privacy Policy is the primary document describing how we process data. This page summarises your rights and our legal basis for processing specifically under GDPR.</p>
      </div>

      {/* Legal basis */}
      <section style={{ marginBottom: '48px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '24px' }}>
          <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
          <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Legal Basis for Processing</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
          {[
            ['Contract performance', 'Processing your uploaded files and generating share links is necessary to perform the service you signed up for.'],
            ['Legitimate interests', 'IP-based abuse prevention and security logging serve our legitimate interest in protecting the platform and other users.'],
            ['Consent', 'Optional communications (product updates, newsletters) are only sent with explicit consent, which you can withdraw at any time.'],
            ['Legal obligation', 'We may retain certain data where required by applicable law.'],
          ].map(([basis, desc]) => (
            <div key={basis} style={{ padding: '18px 20px', background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.9375rem', marginBottom: '6px' }}>{basis}</div>
              <p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem', lineHeight: 1.7, margin: 0 }}>{desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Rights */}
      <section style={{ marginBottom: '48px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '24px' }}>
          <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
          <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Your Rights Under GDPR</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
          {RIGHTS.map((r, i) => (
            <div key={r.right} style={{ display: 'flex', gap: '16px', padding: '18px 20px', background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
              <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 800, fontSize: '0.6875rem', color: 'var(--accent)', minWidth: '24px', marginTop: '2px' }}>{String(i + 1).padStart(2, '0')}</span>
              <div>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.9375rem', marginBottom: '4px' }}>{r.right}</div>
                <p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem', lineHeight: 1.7, margin: 0 }}>{r.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* DPA + contact */}
      <section>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '24px' }}>
          <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
          <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Exercising Your Rights</span>
        </div>
        <p style={{ color: 'var(--text-secondary)', fontSize: '0.9375rem', lineHeight: 1.85, marginBottom: '24px' }}>
          To exercise any of the rights above, email <strong style={{ color: 'var(--accent)' }}>privacy@cshare.app</strong> with the subject line "GDPR Request: [right you are exercising]". We will acknowledge within 72 hours and fulfil the request within 30 days.
        </p>
        <p style={{ color: 'var(--text-secondary)', fontSize: '0.9375rem', lineHeight: 1.85, marginBottom: '32px' }}>
          If you are unsatisfied with our response, you have the right to lodge a complaint with your national Data Protection Authority (DPA). A list of EU DPAs is available at <strong style={{ color: 'var(--accent)' }}>edpb.europa.eu</strong>.
        </p>
        <button className="btn btn-secondary" onClick={() => navigate('/contact')}>
          Contact us about GDPR
        </button>
      </section>
    </div>
  );
}