xpeditis2.0/apps/frontend/app/[locale]/privacy/page.tsx

'use client';

import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { useTranslations } from 'next-intl';
import {
  Shield,
  Eye,
  Lock,
  UserCheck,
  Database,
  Globe,
  Mail,
  Calendar,
  Building2,
  Sparkles,
  Share2,
  Scale,
  type LucideIcon,
} from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';
import { CONTROLLER, SUBPROCESSORS, SUPERVISORY_AUTHORITY } from '@/lib/legal/processing';

/**
 * Politique de confidentialite.
 *
 * La version precedente citait le Privacy Shield comme garantie de transfert —
 * un mecanisme invalide par la CJUE en juillet 2020 — ne nommait aucun
 * sous-traitant, ne donnait aucune base legale et passait sous silence le
 * traitement par un modele de langage. Le texte vit dans les messages ; la
 * liste des destinataires vient de `lib/legal/processing`, la meme source que
 * la page de conformite de l'administration, pour que les deux ne puissent pas
 * diverger.
 */

const SECTION_KEYS = [
  'controller',
  'data',
  'purposes',
  'ai',
  'recipients',
  'transfers',
  'retention',
  'rights',
  'security',
] as const;

type SectionKey = (typeof SECTION_KEYS)[number];

const ICONS: Record<SectionKey, LucideIcon> = {
  controller: Building2,
  data: Database,
  purposes: Eye,
  ai: Sparkles,
  recipients: Share2,
  transfers: Globe,
  retention: Calendar,
  rights: UserCheck,
  security: Lock,
};

function renderInlineBold(content: string) {
  return content
    .split('**')
    .map((part, i) => (i % 2 === 1 ? <strong key={i}>{part}</strong> : part));
}

export default function PrivacyPage() {
  const t = useTranslations('marketing.privacy');
  const tCommon = useTranslations('marketing.common');
  const heroRef = useRef(null);
  const contentRef = useRef(null);

  const isHeroInView = useInView(heroRef, { once: true });
  const isContentInView = useInView(contentRef, { once: true });

  const containerVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6, staggerChildren: 0.1 } },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
  };

  // Seuls les champs renseignes sont publies : mieux vaut une mention
  // manquante, que la console d'administration signale, qu'une mention fausse.
  const identityRows = [
    ['tradingName', CONTROLLER.tradingName],
    ['legalName', CONTROLLER.legalName],
    ['registrationNumber', CONTROLLER.registrationNumber],
    ['address', CONTROLLER.address],
    ['contact', CONTROLLER.privacyContact],
    ['dpo', CONTROLLER.dpo],
  ].filter(([, value]) => Boolean(value)) as [string, string][];

  return (
    <div className="min-h-screen bg-white">
      <LandingHeader />

      <section
        ref={heroRef}
        className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden"
      >
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center"
          >
            <motion.div
              initial={{ scale: 0.8, opacity: 0 }}
              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
            >
              <Shield className="w-5 h-5 text-brand-turquoise" />
              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
            </motion.div>

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              {t('title1')}
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                {t('title2')}
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
              {t('intro')}
            </p>

            <p className="text-white/60 text-sm">{tCommon('lastUpdated')}</p>
          </motion.div>
        </div>

        <div className="absolute bottom-0 left-0 right-0">
          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
            <path
              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
              fill="white"
            />
          </svg>
        </div>
      </section>

      <section ref={contentRef} className="py-20">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          {/* Identite du responsable : la premiere chose que doit trouver
              quelqu'un qui veut savoir a qui s'adresser (art. 13.1.a). */}
          {identityRows.length > 0 && (
            <motion.dl
              initial={{ opacity: 0, y: 20 }}
              animate={isContentInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5 }}
              className="mb-12 grid gap-x-8 gap-y-4 rounded-2xl border border-border bg-neutral-50 p-8 sm:grid-cols-2"
            >
              {identityRows.map(([key, value]) => (
                <div key={key}>
                  <dt className="text-sm text-neutral-500">{t(`identity.${key}`)}</dt>
                  <dd className="mt-1 font-medium text-brand-navy">
                    {key === 'contact' ? (
                      <a className="hover:text-brand-turquoise" href={`mailto:${value}`}>
                        {value}
                      </a>
                    ) : (
                      value
                    )}
                  </dd>
                </div>
              ))}
            </motion.dl>
          )}

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isContentInView ? 'visible' : 'hidden'}
            className="space-y-12"
          >
            {SECTION_KEYS.map(key => {
              const IconComponent = ICONS[key];
              return (
                <motion.div
                  key={key}
                  variants={itemVariants}
                  className="bg-white p-8 rounded-2xl shadow-lg border border-border"
                >
                  <div className="flex items-start space-x-4">
                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
                      <IconComponent className="w-6 h-6 text-brand-turquoise" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <h2 className="text-2xl font-bold text-brand-navy mb-4">
                        {t(`sections.${key}.title`)}
                      </h2>
                      <div className="text-neutral-600 leading-relaxed whitespace-pre-line prose prose-sm max-w-none">
                        {renderInlineBold(t(`sections.${key}.content`))}
                      </div>
                      {key === 'recipients' && <SubprocessorTable />}
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </motion.div>

          {/* Droit de reclamation (art. 13.2.d) : absent de la version
              precedente, alors qu'il doit etre porte a la connaissance. */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="mt-12 flex flex-col gap-4 rounded-2xl border border-border bg-neutral-50 p-8 sm:flex-row sm:items-center sm:justify-between"
          >
            <div>
              <h3 className="flex items-center gap-2 text-lg font-bold text-brand-navy">
                <Scale className="h-5 w-5 text-brand-turquoise" />
                {t('complaint.title')}
              </h3>
              <p className="mt-2 text-neutral-600">{t('complaint.body')}</p>
            </div>
            <a
              href={SUPERVISORY_AUTHORITY.url}
              target="_blank"
              rel="noopener noreferrer"
              className="shrink-0 rounded-lg border border-brand-navy px-5 py-3 text-center font-medium text-brand-navy transition-colors hover:bg-brand-navy hover:text-white"
            >
              {t('complaint.cta')}
            </a>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="mt-8 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
          >
            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
            <h3 className="text-2xl font-bold text-white mb-4">{t('contact.title')}</h3>
            <p className="text-white/80 mb-6">{t('contact.body')}</p>
            <a
              href={`mailto:${CONTROLLER.privacyContact}`}
              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
            >
              <Mail className="w-5 h-5" />
              <span>{CONTROLLER.privacyContact}</span>
            </a>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}

/**
 * Registre des sous-traitants.
 *
 * Un tableau plutot qu'une liste a puces : la question qu'on se pose devant
 * cette section est « qui recoit quoi, et ou », et elle se lit en colonnes.
 */
function SubprocessorTable() {
  const t = useTranslations('marketing.privacy.recipientsTable');
  const tProcessor = useTranslations('marketing.privacy.processors');

  return (
    <div className="mt-6 -mx-2 overflow-x-auto px-2">
      <table className="w-full min-w-[42rem] border-collapse text-left text-sm">
        <caption className="sr-only">{t('caption')}</caption>
        <thead>
          <tr className="border-b border-border">
            {(['name', 'role', 'data', 'location', 'basis'] as const).map(column => (
              <th key={column} scope="col" className="py-3 pr-4 font-semibold text-brand-navy">
                {t(column)}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {SUBPROCESSORS.map(processor => (
            <tr key={processor.key} className="border-b border-border/60 align-top">
              <th scope="row" className="py-4 pr-4 font-medium text-brand-navy">
                {processor.name}
              </th>
              <td className="py-4 pr-4 text-neutral-600">
                {tProcessor(`${processor.key}.role`)}
                {processor.conditional && (
                  <span className="mt-1 block text-xs text-neutral-500">
                    {tProcessor(`${processor.key}.conditional`)}
                  </span>
                )}
              </td>
              <td className="py-4 pr-4 text-neutral-600">{tProcessor(`${processor.key}.data`)}</td>
              <td className="py-4 pr-4 text-neutral-600">
                {tProcessor(`${processor.key}.location`)}
              </td>
              <td className="py-4 pr-4 text-neutral-600">
                {t(`bases.${processor.transferBasis}`)}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}