// POLITIQUE DE CONFIDENTIALITÉ · ACADEMY · Conforme Loi 25 (Québec) + RGPD (UE)
// Données collectées, finalités, outils tiers, durée de conservation,
// droits, moyen de les exercer.

function LegalPrivacy() {
  const tr = useTr();
  const { isMobile } = useViewport();
  const { setPage } = usePage();

  return (
    <section style={{
      position: 'relative',
      paddingTop: isMobile ? 100 : 140,
      paddingBottom: isMobile ? 80 : 140,
      background: TOK.ivory,
      minHeight: '70vh',
    }}>
      <Container narrow>
        <Reveal>
          <Kicker style={{ marginBottom: 22 }}>{tr({ fr: 'Confidentialité', en: 'Privacy' })}</Kicker>
          <h1 style={{
            margin: 0, fontFamily: TOK.sans, fontWeight: 500,
            fontSize: isMobile ? 'clamp(32px, 9vw, 44px)' : 'clamp(40px, 5vw, 64px)',
            lineHeight: 1.04, letterSpacing: '-0.025em', color: TOK.ink,
            textWrap: 'balance',
          }}>
            {tr({ fr: 'Politique de confidentialité.', en: 'Privacy policy.' })}
          </h1>
          <p style={{
            margin: '20px 0 0', fontFamily: TOK.sans,
            fontSize: isMobile ? 16 : 18, lineHeight: 1.6,
            color: TOK.inkSoft, textWrap: 'pretty', maxWidth: 640,
          }}>
            {tr({
              fr: 'Nous traitons vos données avec sobriété. Vous trouverez ci-dessous quelles informations sont collectées, pourquoi, combien de temps, et comment exercer vos droits.',
              en: 'We process your data with restraint. Below you will find which information is collected, why, for how long, and how to exercise your rights.',
            })}
          </p>
        </Reveal>

        <Reveal delay={2}>
          <div style={{ marginTop: isMobile ? 36 : 56, display: 'flex', flexDirection: 'column', gap: isMobile ? 32 : 40 }}>

            <LegalBlock label={tr({ fr: 'Données collectées', en: 'Data collected' })}>
              {tr({
                fr: "Via le formulaire newsletter mensuelle : courriel professionnel. Via l'achat d'un kit opérationnel : nom, courriel, données de paiement traitées directement par Stripe. Via votre navigation : adresse IP technique, type de navigateur, pages visitées, source de provenance (UTM).",
                en: 'Via the monthly newsletter form: business email. Via purchase of an operational kit: name, email, payment data processed directly by Stripe. Via your browsing: technical IP address, browser type, pages visited, traffic source (UTM).',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Finalités', en: 'Purposes' })}>
              {tr({
                fr: 'Vous adresser la newsletter mensuelle, livrer les kits achetés, ouvrir et suivre votre dossier client, mesurer la performance de nos campagnes, améliorer le site. Aucune revente de données. Aucun usage publicitaire tiers en dehors de la mesure mentionnée ci-dessous.',
                en: 'Send you the monthly newsletter, deliver purchased kits, open and follow your customer file, measure the performance of our campaigns, improve the site. No data resale. No third-party advertising use beyond the measurement mentioned below.',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Sous-traitants', en: 'Processors' })}>
              {tr({
                fr: 'Cloudflare (hébergement), Klaviyo (e-mail), Stripe (paiement), Meta Pixel (mesure de campagnes, sur consentement).',
                en: 'Cloudflare (hosting), Klaviyo (email), Stripe (payment), Meta Pixel (advertising measurement, subject to consent).',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Témoins (cookies)', en: 'Cookies' })}>
              {tr({
                fr: "Nous utilisons des témoins techniques (nécessaires au fonctionnement du site) et des témoins de mesure (Meta Pixel). Ces derniers ne sont activés que si vous y consentez. Vous pouvez modifier votre choix à tout moment en vidant le stockage local de votre navigateur.",
                en: 'We use technical cookies (necessary for the site to work) and measurement cookies (Meta Pixel). The latter are only activated if you consent. You can change your choice at any time by clearing your browser local storage.',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Durée de conservation', en: 'Retention period' })}>
              {tr({
                fr: 'Trente-six (36) mois à compter de notre dernier échange, sauf obligation légale supérieure (par exemple : facturation conservée sept ans).',
                en: 'Thirty-six (36) months from our last exchange, unless a longer legal obligation applies (for example: invoices kept for seven years).',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Vos droits', en: 'Your rights' })}>
              {tr({
                fr: 'Vous disposez d\'un droit d\'accès, de rectification, d\'effacement, d\'opposition au traitement, de portabilité et de retrait du consentement. Pour exercer ces droits, écrivez à',
                en: 'You have a right of access, rectification, erasure, objection to processing, portability and withdrawal of consent. To exercise these rights, write to',
              })}
              {' '}
              <a href="mailto:info@228films.com" style={{
                color: TOK.ink, borderBottom: `1px solid ${TOK.bronze}`, paddingBottom: 2,
              }}>info@228films.com</a>.
              {' '}
              {tr({
                fr: 'Nous répondons sous trente (30) jours.',
                en: 'We respond within thirty (30) days.',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Recours', en: 'Recourse' })}>
              {tr({
                fr: "En cas de désaccord, vous pouvez saisir la Commission d'accès à l'information du Québec (CAI) ou votre autorité de protection des données nationale.",
                en: 'In case of disagreement, you may contact the Commission d\'accès à l\'information du Québec (CAI) or your national data protection authority.',
              })}
            </LegalBlock>

            <LegalBlock label={tr({ fr: 'Modifications', en: 'Changes' })}>
              {tr({
                fr: 'Cette politique peut évoluer. La date de dernière mise à jour figure en bas de page.',
                en: 'This policy may evolve. The last updated date appears at the bottom of the page.',
              })}
            </LegalBlock>

          </div>
        </Reveal>

        <Reveal delay={3}>
          <div style={{
            marginTop: isMobile ? 48 : 72, paddingTop: 28,
            borderTop: `1px solid ${TOK.ink10}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            flexWrap: 'wrap', gap: 16,
            fontFamily: TOK.mono, fontSize: 10, letterSpacing: '.18em',
            color: TOK.inkMed, textTransform: 'uppercase',
          }}>
            <span>{tr({ fr: 'Dernière mise à jour · Mai 2026', en: 'Last updated · May 2026' })}</span>
            <button onClick={() => setPage('mentions')} style={{
              all: 'unset', cursor: 'pointer', color: TOK.bronze,
            }}>{tr({ fr: 'Mentions légales →', en: 'Legal notice →' })}</button>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

Object.assign(window, { LegalPrivacy });