'use client';

import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { Cookie, Settings, BarChart3, Target, Shield, ToggleLeft, Mail } from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';

export default function CookiesPage() {
  const heroRef = useRef(null);
  const contentRef = useRef(null);

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

  const cookieTypes = [
    {
      icon: Shield,
      title: 'Cookies essentiels',
      description: 'Nécessaires au fonctionnement du site',
      required: true,
      cookies: [
        { name: 'session_id', purpose: 'Maintien de votre session de connexion', duration: 'Session' },
        { name: 'csrf_token', purpose: 'Protection contre les attaques CSRF', duration: 'Session' },
        { name: 'cookie_consent', purpose: 'Mémorisation de vos préférences cookies', duration: '1 an' },
      ],
    },
    {
      icon: BarChart3,
      title: 'Cookies analytiques',
      description: 'Nous aident à améliorer notre plateforme',
      required: false,
      cookies: [
        { name: '_ga', purpose: 'Google Analytics - Identification des visiteurs', duration: '2 ans' },
        { name: '_gid', purpose: 'Google Analytics - Identification des sessions', duration: '24 heures' },
        { name: '_gat', purpose: 'Google Analytics - Limitation du taux de requêtes', duration: '1 minute' },
      ],
    },
    {
      icon: Target,
      title: 'Cookies marketing',
      description: 'Permettent de personnaliser les publicités',
      required: false,
      cookies: [
        { name: '_fbp', purpose: 'Facebook Pixel - Suivi des conversions', duration: '3 mois' },
        { name: 'li_fat_id', purpose: 'LinkedIn Insight - Attribution marketing', duration: '30 jours' },
        { name: 'hubspotutk', purpose: 'HubSpot - Identification des visiteurs', duration: '13 mois' },
      ],
    },
    {
      icon: Settings,
      title: 'Cookies fonctionnels',
      description: 'Améliorent votre expérience utilisateur',
      required: false,
      cookies: [
        { name: 'language', purpose: 'Mémorisation de votre langue préférée', duration: '1 an' },
        { name: 'theme', purpose: 'Mémorisation du thème (clair/sombre)', duration: '1 an' },
        { name: 'recent_searches', purpose: 'Historique de vos recherches récentes', duration: '30 jours' },
      ],
    },
  ];

  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 },
    },
  };

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

      {/* Hero Section */}
      <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"
            >
              <Cookie className="w-5 h-5 text-brand-turquoise" />
              <span className="text-white/90 text-sm font-medium">Transparence</span>
            </motion.div>

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              Politique de
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                Cookies
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
              Découvrez comment nous utilisons les cookies pour améliorer votre expérience
              sur Xpeditis et comment vous pouvez gérer vos préférences.
            </p>

            <p className="text-white/60 text-sm">
              Dernière mise à jour : Janvier 2025
            </p>
          </motion.div>
        </div>

        {/* Wave */}
        <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>

      {/* Introduction */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
          >
            <h2 className="text-2xl font-bold text-brand-navy mb-4">Qu'est-ce qu'un cookie ?</h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              Un cookie est un petit fichier texte stocké sur votre appareil (ordinateur, tablette, smartphone)
              lorsque vous visitez un site web. Les cookies permettent au site de mémoriser vos actions et
              préférences sur une période donnée.
            </p>
            <p className="text-gray-600 leading-relaxed">
              Les cookies ne contiennent pas d'informations personnellement identifiables et ne peuvent pas
              accéder aux données stockées sur votre appareil.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Cookie Types Section */}
      <section ref={contentRef} className="py-20">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl font-bold text-brand-navy mb-4">Types de cookies utilisés</h2>
            <p className="text-gray-600">
              Nous utilisons différents types de cookies sur notre plateforme
            </p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isContentInView ? 'visible' : 'hidden'}
            className="space-y-8"
          >
            {cookieTypes.map((type, index) => {
              const IconComponent = type.icon;
              return (
                <motion.div
                  key={index}
                  variants={itemVariants}
                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
                >
                  <div className="flex items-start justify-between mb-6">
                    <div className="flex items-center space-x-4">
                      <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
                        <IconComponent className="w-6 h-6 text-brand-turquoise" />
                      </div>
                      <div>
                        <h3 className="text-xl font-bold text-brand-navy">{type.title}</h3>
                        <p className="text-gray-500 text-sm">{type.description}</p>
                      </div>
                    </div>
                    {type.required ? (
                      <span className="px-3 py-1 bg-brand-navy/10 text-brand-navy text-xs font-medium rounded-full">
                        Requis
                      </span>
                    ) : (
                      <div className="flex items-center space-x-2">
                        <ToggleLeft className="w-8 h-8 text-gray-400" />
                        <span className="text-sm text-gray-500">Optionnel</span>
                      </div>
                    )}
                  </div>

                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="border-b border-gray-200">
                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">Nom</th>
                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">Finalité</th>
                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">Durée</th>
                        </tr>
                      </thead>
                      <tbody>
                        {type.cookies.map((cookie, i) => (
                          <tr key={i} className="border-b border-gray-100 last:border-0">
                            <td className="py-3 px-4 font-mono text-brand-turquoise">{cookie.name}</td>
                            <td className="py-3 px-4 text-gray-600">{cookie.purpose}</td>
                            <td className="py-3 px-4 text-gray-500">{cookie.duration}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </motion.div>
              );
            })}
          </motion.div>

          {/* How to manage cookies */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="mt-12 bg-gradient-to-br from-gray-50 to-white p-8 rounded-2xl border border-gray-200"
          >
            <h3 className="text-2xl font-bold text-brand-navy mb-4">Comment gérer vos cookies ?</h3>
            <div className="space-y-4 text-gray-600">
              <p>
                Vous pouvez à tout moment modifier vos préférences en matière de cookies :
              </p>
              <ul className="list-disc pl-6 space-y-2">
                <li>Via notre bandeau de consentement accessible en bas de chaque page</li>
                <li>Dans les paramètres de votre navigateur (Chrome, Firefox, Safari, Edge)</li>
                <li>En utilisant des outils tiers de gestion des cookies</li>
              </ul>
              <p className="text-sm text-gray-500 mt-4">
                Note : La désactivation de certains cookies peut affecter votre expérience sur notre plateforme.
              </p>
            </div>
          </motion.div>

          {/* Contact Section */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="mt-16 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">Des questions sur les cookies ?</h3>
            <p className="text-white/80 mb-6">
              Notre équipe est disponible pour répondre à toutes vos questions
              concernant l'utilisation des cookies sur notre plateforme.
            </p>
            <a
              href="mailto:privacy@xpeditis.com"
              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>privacy@xpeditis.com</span>
            </a>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}