espace-paie-odentas/components/PopupAnalyticsConsent.tsx

"use client";

import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { BarChart3, Check } from "lucide-react";

export default function PopupAnalyticsConsent({
  onAccept,
  onReject,
  policyUrl = "/politique-confidentialite#salaries",
}: {
  onAccept: () => void;
  onReject: () => void;
  policyUrl?: string;
}) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    // Afficher le bandeau après un court délai
    const t = setTimeout(() => setVisible(true), 600);
    return () => clearTimeout(t);
  }, []);

  const handleAccept = () => {
    onAccept();
    setVisible(false);
  };

  const handleReject = () => {
    onReject();
    setVisible(false);
  };

  return (
    <AnimatePresence>
      {visible && (
        <motion.aside
          role="dialog"
          aria-live="polite"
          aria-label="Consentement pour l'analyse de navigation"
          initial={{ opacity: 0, y: 24, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 24, scale: 0.98 }}
          transition={{ type: "spring", stiffness: 380, damping: 28 }}
          className="fixed left-4 right-4 bottom-4 top-20 sm:left-4 sm:right-auto sm:top-auto sm:bottom-4 z-[100] sm:max-w-sm sm:w-96"
        >
          <div className="h-full sm:h-auto overflow-y-auto rounded-2xl border border-slate-200 bg-gradient-to-br from-white to-slate-50 backdrop-blur shadow-lg">
            <div className="flex items-start gap-3 p-4">
              {/* Icône */}
              <div className="mt-0.5 shrink-0 rounded-xl bg-gradient-to-br from-sky-100 to-blue-100 p-2">
                <BarChart3 className="h-5 w-5 text-sky-700" />
              </div>

              {/* Contenu principal */}
              <div className="text-sm leading-snug text-slate-700">
                <p className="font-semibold text-slate-900 mb-1.5">Améliorer votre expérience</p>
                
                <div className="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-lg mb-3">
                  <p className="text-sm text-blue-900">
                    <strong>Odentas Media SAS</strong> s'engage pour une transparence totale.
                  </p>
                </div>

                <p>
                  Pour améliorer le processus de transmission de votre état-civil et de vos justificatifs et le processus de signature électronique de votre contrat de travail, nous enregistrons votre navigation.
                </p>

                {/* Détails */}
                <div className="mt-3 pt-3 border-t border-slate-200 space-y-2 text-xs">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    <div className="flex items-start gap-2">
                      <Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
                      <span>Hébergement Union Européenne</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
                      <span>Données ne quittant jamais l'UE</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
                      <span>Uniquement pour améliorer notre service</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
                      <span>Jamais partagées ni revendues</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
                      <span>Accès limité équipe Odentas</span>
                    </div>
                    <div className="flex items-start gap-2">
                      <Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
                      <span>Suppression après 90 jours</span>
                    </div>
                  </div>
                  
                  <div className="bg-sky-50 border border-sky-100 p-3 rounded-lg">
                    <p className="text-slate-600">
                      Refuser n'affecte pas le processus de signature de votre contrat de travail.
                    </p>
                  </div>
                </div>

                {/* Boutons d'action */}
                <div className="mt-3 flex items-center gap-2">
                  <button
                    onClick={handleReject}
                    className="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium border border-slate-300 bg-white hover:bg-slate-50 text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 transition-colors"
                  >
                    Refuser
                  </button>
                  <button
                    onClick={handleAccept}
                    className="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold shadow-md border border-sky-600 bg-sky-600 hover:bg-sky-700 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-colors"
                  >
                    <Check className="h-4 w-4 mr-1.5" />
                    Accepter
                  </button>
                  <a
                    href={policyUrl}
                    className="ml-auto text-xs underline underline-offset-2 decoration-sky-400 hover:decoration-sky-600 text-sky-700 font-medium transition-colors"
                    target="_blank"
                    rel="noreferrer noopener"
                  >
                    Politique de Confidentialité
                  </a>
                </div>
              </div>
            </div>
          </div>
        </motion.aside>
      )}
    </AnimatePresence>
  );
}