'use client';

import { useRef, useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { motion, useInView, useScroll, useTransform } from 'framer-motion';
import {
  Ship,
  Shield,
  Zap,
  BarChart3,
  Package,
  Clock,
  CheckCircle2,
  ArrowRight,
  Search,
  Anchor,
  Container,
  FileText,
  LayoutDashboard,
  Bell,
  BookOpen,
  Users,
  Check,
  X,
} from 'lucide-react';
import { useAuth } from '@/lib/context/auth-context';
import { LandingHeader, LandingFooter } from '@/components/layout';

function AnimatedCounter({
  end,
  suffix = '',
  prefix = '',
  decimals = 0,
  isActive,
  duration = 2,
}: {
  end: number;
  suffix?: string;
  prefix?: string;
  decimals?: number;
  isActive: boolean;
  duration?: number;
}) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!isActive) return;
    let startTime: number | undefined;

    const animate = (timestamp: number) => {
      if (!startTime) startTime = timestamp;
      const progress = Math.min((timestamp - startTime) / (duration * 1000), 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setCount(eased * end);
      if (progress < 1) requestAnimationFrame(animate);
      else setCount(end);
    };

    requestAnimationFrame(animate);
  }, [end, duration, isActive]);

  const display = decimals > 0 ? count.toFixed(decimals) : Math.floor(count).toString();
  return <>{prefix}{display}{suffix}</>;
}

export default function LandingPage() {
  const { user, isAuthenticated } = useAuth();

  const heroRef = useRef(null);
  const featuresRef = useRef(null);
  const statsRef = useRef(null);
  const toolsRef = useRef(null);
  const pricingRef = useRef(null);
  const testimonialsRef = useRef(null);
  const ctaRef = useRef(null);
  const howRef = useRef(null);

  const isHeroInView = useInView(heroRef, { once: true });
  const isFeaturesInView = useInView(featuresRef, { once: true });
  const isStatsInView = useInView(statsRef, { once: true, amount: 0.3 });
  const isToolsInView = useInView(toolsRef, { once: true });
  const isPricingInView = useInView(pricingRef, { once: true });
  const isTestimonialsInView = useInView(testimonialsRef, { once: true });
  const isCtaInView = useInView(ctaRef, { once: true });
  const isHowInView = useInView(howRef, { once: true, amount: 0.2 });

  const [billingYearly, setBillingYearly] = useState(false);

  const { scrollYProgress } = useScroll();
  const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '50%']);

  const features = [
    {
      icon: BarChart3,
      title: 'Tableau de bord',
      description:
        'Suivez tous vos KPIs en temps réel : bookings, volumes, revenus et alertes personnalisées.',
      color: 'from-blue-500 to-cyan-500',
      link: '/dashboard',
    },
    {
      icon: Package,
      title: 'Gestion des Réservations',
      description: 'Créez, gérez et suivez vos réservations maritimes LCL/FCL avec un historique complet.',
      color: 'from-purple-500 to-pink-500',
      link: '/dashboard/bookings',
    },
    {
      icon: FileText,
      title: 'Documents Maritimes',
      description: 'Centralisez tous vos documents : B/L, factures, certificats et documents douaniers.',
      color: 'from-orange-500 to-red-500',
      link: '/dashboard/documents',
    },
    {
      icon: Search,
      title: 'Suivi des expéditions',
      description:
        'Suivez vos conteneurs en temps réel auprès de 10+ transporteurs majeurs (Maersk, MSC, CMA CGM...).',
      color: 'from-green-500 to-emerald-500',
      link: '/dashboard/track-trace',
    },
    {
      icon: BookOpen,
      title: 'Wiki Maritime',
      description:
        'Base de connaissances complète : Incoterms, documents, procédures douanières et plus encore.',
      color: 'from-yellow-500 to-orange-500',
      link: '/dashboard/wiki',
    },
    {
      icon: Bell,
      title: 'Notifications Temps Réel',
      description:
        'Restez informé avec des alertes instantanées sur vos bookings, documents et mises à jour.',
      color: 'from-indigo-500 to-purple-500',
      link: '/dashboard',
    },
  ];

  const tools = [
    {
      icon: LayoutDashboard,
      title: 'Tableau de bord',
      description: 'Vue d\'ensemble de votre activité maritime',
      link: '/dashboard',
    },
    {
      icon: Package,
      title: 'Mes Réservations',
      description: 'Gérez toutes vos réservations en un seul endroit',
      link: '/dashboard/bookings',
    },
    {
      icon: FileText,
      title: 'Documents',
      description: 'Accédez à tous vos documents maritimes',
      link: '/dashboard/documents',
    },
    {
      icon: Search,
      title: 'Suivi des expéditions',
      description: 'Suivez vos conteneurs en temps réel',
      link: '/dashboard/track-trace',
    },
    {
      icon: BookOpen,
      title: 'Wiki Maritime',
      description: 'Base de connaissances du fret maritime',
      link: '/dashboard/wiki',
    },
    {
      icon: Users,
      title: 'Mon Profil',
      description: 'Gérez vos informations personnelles',
      link: '/dashboard/profile',
    },
  ];

  const stats = [
    { end: 50, prefix: '', suffix: '+', decimals: 0, label: 'Compagnies Maritimes', icon: Ship },
    { end: 10, prefix: '', suffix: 'K+', decimals: 0, label: 'Ports Mondiaux', icon: Anchor },
    { end: 2, prefix: '<', suffix: 's', decimals: 0, label: 'Temps de Réponse', icon: Zap },
    { end: 99.5, prefix: '', suffix: '%', decimals: 1, label: 'Disponibilité', icon: CheckCircle2 },
  ];

  const pricingPlans = [
    {
      key: 'bronze',
      name: 'Bronze',
      badge: null,
      monthlyPrice: 0,
      yearlyPrice: 0,
      yearlyMonthly: 0,
      description: 'Pour découvrir la plateforme',
      users: '1 utilisateur',
      shipments: '12 expéditions / an',
      commission: '5%',
      support: 'Aucun support',
      features: [
        { text: 'Réservations maritimes LCL', included: true },
        { text: 'Track & Trace conteneurs', included: true },
        { text: 'Tableau de bord', included: false },
        { text: 'Wiki maritime', included: false },
        { text: 'Gestion des utilisateurs', included: false },
        { text: 'Export CSV', included: false },
        { text: 'Accès API', included: false },
        { text: 'KAM dédié', included: false },
      ],
      cta: 'Commencer gratuitement',
      ctaLink: '/register',
      highlighted: false,
      accentColor: 'from-amber-600 to-yellow-500',
      textAccent: 'text-amber-700',
      badgeBg: 'bg-amber-100 text-amber-800',
    },
    {
      key: 'silver',
      name: 'Silver',
      badge: 'Populaire',
      monthlyPrice: 249,
      yearlyPrice: 2739,
      yearlyMonthly: 228,
      description: 'Pour les transitaires en croissance',
      users: 'Jusqu\'à 5 utilisateurs',
      shipments: 'Expéditions illimitées',
      commission: '3%',
      support: 'Support par email',
      features: [
        { text: 'Réservations maritimes LCL', included: true },
        { text: 'Track & Trace conteneurs', included: true },
        { text: 'Tableau de bord avancé', included: true },
        { text: 'Wiki maritime complet', included: true },
        { text: 'Gestion des utilisateurs', included: true },
        { text: 'Export CSV', included: true },
        { text: 'Accès API', included: false },
        { text: 'KAM dédié', included: false },
      ],
      cta: 'Essai gratuit 14 jours',
      ctaLink: '/register',
      highlighted: true,
      accentColor: 'from-slate-400 to-slate-500',
      textAccent: 'text-slate-600',
      badgeBg: 'bg-slate-100 text-slate-700',
    },
    {
      key: 'gold',
      name: 'Gold',
      badge: null,
      monthlyPrice: 899,
      yearlyPrice: 9889,
      yearlyMonthly: 824,
      description: 'Pour les équipes exigeantes',
      users: 'Jusqu\'à 20 utilisateurs',
      shipments: 'Expéditions illimitées',
      commission: '2%',
      support: 'Assistance commerciale directe',
      features: [
        { text: 'Réservations maritimes LCL', included: true },
        { text: 'Track & Trace conteneurs', included: true },
        { text: 'Tableau de bord avancé', included: true },
        { text: 'Wiki maritime complet', included: true },
        { text: 'Gestion des utilisateurs', included: true },
        { text: 'Export CSV', included: true },
        { text: 'Accès API complet', included: true },
        { text: 'KAM dédié', included: false },
      ],
      cta: 'Essai gratuit 14 jours',
      ctaLink: '/register',
      highlighted: false,
      accentColor: 'from-yellow-400 to-amber-400',
      textAccent: 'text-amber-600',
      badgeBg: 'bg-yellow-50 text-amber-700',
    },
    {
      key: 'platinium',
      name: 'Platinium',
      badge: 'Sur mesure',
      monthlyPrice: null,
      yearlyPrice: null,
      yearlyMonthly: null,
      description: 'Pour les grandes entreprises',
      users: 'Utilisateurs illimités',
      shipments: 'Expéditions illimitées',
      commission: '1%',
      support: 'Key Account Manager dédié',
      features: [
        { text: 'Réservations maritimes LCL', included: true },
        { text: 'Track & Trace conteneurs', included: true },
        { text: 'Tableau de bord avancé', included: true },
        { text: 'Wiki maritime complet', included: true },
        { text: 'Gestion des utilisateurs', included: true },
        { text: 'Export CSV', included: true },
        { text: 'Accès API complet', included: true },
        { text: 'KAM dédié + Interface personnalisée', included: true },
      ],
      cta: 'Nous contacter',
      ctaLink: '/contact',
      highlighted: false,
      accentColor: 'from-brand-navy to-brand-turquoise',
      textAccent: 'text-brand-turquoise',
      badgeBg: 'bg-brand-navy/10 text-brand-navy',
    },
  ];

  const testimonials = [
    {
      quote:
        'Xpeditis a révolutionné notre façon de gérer le fret maritime. Les tarifs sont compétitifs et la plateforme est intuitive.',
      author: 'Marie Dubois',
      role: 'Directrice Logistique',
      company: 'LogiFrance',
    },
    {
      quote:
        'Le gain de temps est considérable. Ce qui nous prenait des heures se fait maintenant en quelques minutes.',
      author: 'Thomas Martin',
      role: 'Responsable Transport',
      company: 'EuroShipping',
    },
    {
      quote:
        "L'interface est claire, les données sont précises et le support client est réactif. Un vrai partenaire de confiance.",
      author: 'Sophie Bernard',
      role: 'CEO',
      company: 'MariTime Solutions',
    },
  ];

  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 transparentOnTop={true} />

      {/* Hero Section */}
      <section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden">
        {/* Background Video */}
        <motion.div style={{ y: backgroundY }} className="absolute inset-0 z-0">
          <video
            autoPlay
            loop
            muted
            playsInline
            className="absolute inset-0 w-full h-full object-cover"
          >
            <source
              src="https://assets.mixkit.co/videos/36264/36264-720.mp4"
              type="video/mp4"
            />
            {/* Fallback image if video fails to load */}
            <div
              className="absolute inset-0"
              style={{
                backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }}
            />
          </video>
          {/* Dark overlay for text readability */}
          <div className="absolute inset-0 bg-brand-navy/65" />
          {/* Gradient overlay */}
          <div className="absolute inset-0 bg-gradient-to-br from-brand-navy/70 via-brand-navy/50 to-brand-turquoise/20" />
        </motion.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"
            >
              <Ship className="w-5 h-5 text-brand-turquoise" />
              <span className="text-white/90 text-sm font-medium">
                Plateforme B2B de Fret Maritime #1 en Europe
              </span>
            </motion.div>

            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="text-5xl lg:text-7xl font-bold text-white mb-6 leading-tight"
            >
              Réservez votre fret
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                en quelques clics
              </span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="text-xl lg:text-2xl text-white/80 mb-12 max-w-3xl mx-auto leading-relaxed"
            >
              Comparez les tarifs de 50+ compagnies maritimes, réservez en ligne et suivez vos
              envois en temps réel.
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.5 }}
              className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6 mb-12"
            >
              {isAuthenticated && user ? (
                <Link
                  href="/dashboard"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
                >
                  <span>Accéder au tableau de bord</span>
                  <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </Link>
              ) : (
                <>
                  <Link
                    href="/register"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
                  >
                    <span>Créer un compte gratuit</span>
                    <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                  </Link>
                  <Link
                    href="/login"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-50 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto"
                  >
                    Voir la démo
                  </Link>
                </>
              )}
            </motion.div>
          </motion.div>
        </div>

        {/* Animated Waves */}
        <div className="absolute bottom-0 left-0 right-0">
          <svg className="w-full h-24 lg:h-32" viewBox="0 0 1440 120" preserveAspectRatio="none">
            <motion.path
              initial={{ pathLength: 0 }}
              animate={{ pathLength: 1 }}
              transition={{ duration: 2, ease: 'easeInOut' }}
              d="M0,60 C240,90 480,30 720,60 C960,90 1200,30 1440,60 L1440,120 L0,120 Z"
              fill="white"
              opacity="0.8"
            />
            <motion.path
              initial={{ pathLength: 0 }}
              animate={{ pathLength: 1 }}
              transition={{ duration: 2.5, ease: 'easeInOut' }}
              d="M0,80 C240,50 480,110 720,80 C960,50 1200,110 1440,80 L1440,120 L0,120 Z"
              fill="white"
            />
          </svg>
        </div>
      </section>

      {/* Stats Section */}
      <section ref={statsRef} className="py-16 bg-gray-50">
        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate={isStatsInView ? 'visible' : 'hidden'}
          className="max-w-7xl mx-auto px-6 lg:px-8"
        >
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.map((stat, index) => {
              const IconComponent = stat.icon;
              return (
                <motion.div
                  key={index}
                  variants={itemVariants}
                  className="text-center group cursor-pointer"
                >
                  <div className="flex justify-center mb-3">
                    <div className="p-3 bg-brand-turquoise/10 rounded-full group-hover:bg-brand-turquoise/20 transition-colors">
                      <IconComponent className="w-8 h-8 text-brand-turquoise" />
                    </div>
                  </div>
                  <motion.div
                    initial={{ scale: 0 }}
                    animate={isStatsInView ? { scale: 1 } : {}}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                    className="text-5xl lg:text-6xl font-bold text-brand-navy mb-2 tabular-nums"
                  >
                    <AnimatedCounter
                      end={stat.end}
                      prefix={stat.prefix}
                      suffix={stat.suffix}
                      decimals={stat.decimals}
                      isActive={isStatsInView}
                      duration={2.2}
                    />
                  </motion.div>
                  <div className="text-gray-600 font-medium">{stat.label}</div>
                </motion.div>
              );
            })}
          </div>
        </motion.div>
      </section>

      {/* Features Section */}
      <section ref={featuresRef} id="features" className="py-20 lg:py-32">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isFeaturesInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
              Pourquoi choisir Xpeditis ?
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Une plateforme complète pour gérer tous vos besoins en fret maritime
            </p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isFeaturesInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
          >
            {features.map((feature, index) => {
              const IconComponent = feature.icon;
              return (
                <motion.div
                  key={index}
                  variants={itemVariants}
                  whileHover={{ y: -8 }}
                  className="h-full"
                >
                  <Link
                    href={feature.link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group flex flex-col h-full bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all border border-gray-100 hover:border-brand-turquoise/30 relative overflow-hidden"
                  >
                    {/* Gradient accent bar on top — always visible, intensifies on hover */}
                    <div
                      className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${feature.color} opacity-40 group-hover:opacity-100 transition-opacity duration-300`}
                    />
                    <div
                      className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-5 group-hover:scale-110 transition-transform flex-shrink-0`}
                    >
                      <IconComponent className="w-7 h-7 text-white" />
                    </div>
                    <h3 className="text-xl font-bold text-brand-navy mb-3 group-hover:text-brand-turquoise transition-colors">
                      {feature.title}
                    </h3>
                    <p className="text-gray-600 leading-relaxed flex-1">{feature.description}</p>
                    {/* CTA always visible */}
                    <div className="mt-5 pt-4 border-t border-gray-100 flex items-center justify-between">
                      <span className="text-brand-turquoise font-semibold text-sm">Découvrir</span>
                      <div className="w-8 h-8 rounded-full bg-brand-turquoise/10 group-hover:bg-brand-turquoise/20 flex items-center justify-center transition-colors">
                        <ArrowRight className="w-4 h-4 text-brand-turquoise group-hover:translate-x-0.5 transition-transform" />
                      </div>
                    </div>
                  </Link>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </section>

      {/* Tools & Calculators Section */}
      <section
        ref={toolsRef}
        id="tools"
        className="py-20 lg:py-32 bg-gradient-to-br from-gray-50 to-white"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isToolsInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
              Outils & Calculateurs
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Des outils puissants pour optimiser vos opérations maritimes
            </p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isToolsInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
          >
            {tools.map((tool, index) => {
              const IconComponent = tool.icon;
              return (
                <motion.div
                  key={index}
                  variants={itemVariants}
                  whileHover={{ y: -5 }}
                  className="group"
                >
                  <Link
                    href={tool.link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="block bg-white p-6 rounded-xl border-2 border-gray-200 hover:border-brand-turquoise transition-all hover:shadow-lg"
                  >
                    <div className="flex items-start space-x-4">
                      <div className="flex-shrink-0 w-12 h-12 bg-brand-turquoise/10 rounded-lg flex items-center justify-center group-hover:bg-brand-turquoise/20 transition-colors">
                        <IconComponent className="w-6 h-6 text-brand-turquoise" />
                      </div>
                      <div className="flex-1">
                        <h3 className="text-lg font-bold text-brand-navy mb-1 group-hover:text-brand-turquoise transition-colors">
                          {tool.title}
                        </h3>
                        <p className="text-sm text-gray-600">{tool.description}</p>
                      </div>
                      <ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-brand-turquoise group-hover:translate-x-1 transition-all" />
                    </div>
                  </Link>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </section>

      {/* Partner Logos Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            <h3 className="text-2xl font-bold text-brand-navy mb-2">
              En partenariat avec les plus grandes compagnies maritimes
            </h3>
            <p className="text-gray-600">Accédez aux tarifs de 50+ transporteurs mondiaux</p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center"
          >
            {[
              'ECU Line 2.png',
              'ICL 1.png',
              'NVO Consolidation 1.png',
              'TCC LOG 1.png',
              'VANGUARD 1.png',
              'image 1.png',
            ].map((logo, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, scale: 0.8 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                whileHover={{ scale: 1.1 }}
                className="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all cursor-pointer"
              >
                <Image
                  src={`/assets/logos/partner/${logo}`}
                  alt={`Partner ${index + 1}`}
                  width={120}
                  height={60}
                  className="object-contain h-12 w-auto"
                />
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Pricing Section */}
      <section
        ref={pricingRef}
        id="pricing"
        className="py-20 lg:py-32 bg-gradient-to-b from-white to-gray-50"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-12"
          >
            <span className="inline-block bg-brand-turquoise/10 text-brand-turquoise text-sm font-semibold px-4 py-1.5 rounded-full mb-4 uppercase tracking-wide">
              Tarifs
            </span>
            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
              Des plans adaptés à votre activité
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              De l'accès découverte au partenariat sur mesure — évoluez à tout moment.
            </p>
          </motion.div>

          {/* Billing Toggle */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="flex items-center justify-center gap-4 mb-12"
          >
            <span className={`text-sm font-medium ${!billingYearly ? 'text-brand-navy' : 'text-gray-400'}`}>
              Mensuel
            </span>
            <button
              onClick={() => setBillingYearly(v => !v)}
              className={`relative inline-flex h-7 w-14 items-center rounded-full transition-colors focus:outline-none ${
                billingYearly ? 'bg-brand-turquoise' : 'bg-gray-300'
              }`}
            >
              <span
                className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${
                  billingYearly ? 'translate-x-8' : 'translate-x-1'
                }`}
              />
            </button>
            <span className={`text-sm font-medium ${billingYearly ? 'text-brand-navy' : 'text-gray-400'}`}>
              Annuel
            </span>
            {billingYearly && (
              <span className="bg-brand-green/10 text-brand-green text-xs font-bold px-2.5 py-1 rounded-full">
                1 mois offert
              </span>
            )}
          </motion.div>

          {/* Plans Grid */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isPricingInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-stretch"
          >
            {pricingPlans.map((plan, index) => (
              <motion.div
                key={plan.key}
                variants={itemVariants}
                whileHover={{ y: -6 }}
                className={`relative flex flex-col rounded-2xl transition-all overflow-hidden ${
                  plan.highlighted
                    ? 'bg-brand-navy shadow-2xl ring-2 ring-brand-turquoise'
                    : 'bg-white shadow-lg border border-gray-100 hover:shadow-xl hover:border-brand-turquoise/30'
                }`}
              >
                {/* Top gradient bar */}
                <div className={`h-1.5 w-full bg-gradient-to-r ${plan.accentColor}`} />

                {/* Popular badge */}
                {plan.badge && plan.key === 'silver' && (
                  <div className="absolute top-4 right-4">
                    <span className="bg-brand-turquoise text-white text-xs font-bold px-2.5 py-1 rounded-full">
                      {plan.badge}
                    </span>
                  </div>
                )}
                {plan.badge && plan.key === 'platinium' && (
                  <div className="absolute top-4 right-4">
                    <span className="bg-gradient-to-r from-brand-navy to-brand-turquoise text-white text-xs font-bold px-2.5 py-1 rounded-full">
                      {plan.badge}
                    </span>
                  </div>
                )}

                <div className="flex flex-col flex-1 p-6">
                  {/* Plan name */}
                  <div className="mb-4">
                    <div className={`inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider px-2.5 py-1 rounded-full mb-3 ${plan.highlighted ? 'bg-white/10 text-white/70' : plan.badgeBg}`}>
                      <div className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${plan.accentColor}`} />
                      {plan.name}
                    </div>
                    <h3 className={`text-xl font-bold mb-1 ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
                      {plan.description}
                    </h3>
                  </div>

                  {/* Price */}
                  <div className="mb-6">
                    {plan.monthlyPrice === null ? (
                      <div>
                        <span className={`text-3xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
                          Sur mesure
                        </span>
                        <p className={`text-sm mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
                          Tarification personnalisée
                        </p>
                      </div>
                    ) : plan.monthlyPrice === 0 ? (
                      <div>
                        <span className={`text-4xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
                          Gratuit
                        </span>
                        <p className={`text-sm mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
                          Pour toujours
                        </p>
                      </div>
                    ) : (
                      <div>
                        <div className="flex items-end gap-1">
                          <span className={`text-4xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
                            {billingYearly ? plan.yearlyMonthly : plan.monthlyPrice}€
                          </span>
                          <span className={`text-sm pb-1.5 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
                            /mois
                          </span>
                        </div>
                        {billingYearly ? (
                          <p className={`text-xs mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
                            Facturé {plan.yearlyPrice?.toLocaleString('fr-FR')}€/an
                          </p>
                        ) : (
                          <p className={`text-xs mt-1 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`}>
                            Économisez 1 mois avec l'annuel
                          </p>
                        )}
                      </div>
                    )}
                  </div>

                  {/* Key stats */}
                  <div className={`rounded-xl p-3 mb-5 space-y-2 ${plan.highlighted ? 'bg-white/10' : 'bg-gray-50'}`}>
                    <div className="flex items-center gap-2">
                      <Users className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
                      <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>{plan.users}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Ship className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
                      <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>{plan.shipments}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <BarChart3 className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
                      <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>
                        Commission {plan.commission}
                      </span>
                    </div>
                  </div>

                  {/* Features */}
                  <ul className="space-y-2.5 mb-6 flex-1">
                    {plan.features.map((feature, featureIndex) => (
                      <li key={featureIndex} className="flex items-start gap-2.5">
                        {feature.included ? (
                          <Check className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-green'}`} />
                        ) : (
                          <X className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? 'text-white/20' : 'text-gray-300'}`} />
                        )}
                        <span className={`text-sm ${
                          feature.included
                            ? plan.highlighted ? 'text-white/90' : 'text-gray-700'
                            : plan.highlighted ? 'text-white/30' : 'text-gray-400'
                        }`}>
                          {feature.text}
                        </span>
                      </li>
                    ))}
                  </ul>

                  {/* CTA */}
                  <Link
                    href={plan.ctaLink}
                    className={`block w-full text-center py-3 px-6 rounded-xl font-semibold text-sm transition-all ${
                      plan.highlighted
                        ? 'bg-brand-turquoise text-white hover:bg-brand-turquoise/90 shadow-lg shadow-brand-turquoise/30 hover:shadow-xl'
                        : plan.key === 'bronze'
                        ? 'bg-gray-100 text-brand-navy hover:bg-gray-200'
                        : 'bg-brand-navy text-white hover:bg-brand-navy/90 shadow-md hover:shadow-lg'
                    }`}
                  >
                    {plan.cta}
                  </Link>
                </div>
              </motion.div>
            ))}
          </motion.div>

          {/* Bottom note */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.5 }}
            className="mt-12 text-center space-y-2"
          >
            <p className="text-gray-600 text-sm">
              Plans Silver et Gold : essai gratuit 14 jours inclus · Aucune carte bancaire requise
            </p>
            <p className="text-sm text-gray-500">
              Des questions ?{' '}
              <Link href="/contact" className="text-brand-turquoise font-medium hover:underline">
                Contactez notre équipe commerciale
              </Link>
            </p>
          </motion.div>
        </div>
      </section>

      {/* How It Works Section */}
      <section
        ref={howRef}
        className="py-20 lg:py-32 bg-gradient-to-br from-brand-navy to-brand-navy/95 relative overflow-hidden"
      >
        <div className="absolute inset-0 opacity-10 pointer-events-none">
          <div className="absolute top-10 left-10 w-72 h-72 bg-brand-turquoise rounded-full blur-3xl" />
          <div className="absolute bottom-10 right-10 w-72 h-72 bg-brand-green rounded-full blur-3xl" />
        </div>

        <div className="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isHowInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">Comment ça marche ?</h2>
            <p className="text-xl text-white/80 max-w-2xl mx-auto">
              Réservez votre fret maritime en 4 étapes simples
            </p>
          </motion.div>

          {/* Steps grid with animated connecting line */}
          <div className="relative">
            {/* Animated progress line — desktop only */}
            <div className="hidden lg:block absolute top-10 left-[12.5%] right-[12.5%] h-px bg-white/15">
              <motion.div
                initial={{ scaleX: 0 }}
                animate={isHowInView ? { scaleX: 1 } : {}}
                transition={{ duration: 1.6, delay: 0.5, ease: 'easeInOut' }}
                style={{ transformOrigin: 'left' }}
                className="absolute inset-0 bg-brand-turquoise"
              />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {[
                {
                  step: '01',
                  title: 'Recherchez',
                  description: "Entrez vos ports de départ et d'arrivée",
                  icon: Search,
                },
                {
                  step: '02',
                  title: 'Comparez',
                  description: 'Analysez les tarifs de 50+ compagnies',
                  icon: BarChart3,
                },
                {
                  step: '03',
                  title: 'Réservez',
                  description: 'Confirmez votre réservation en un clic',
                  icon: CheckCircle2,
                },
                {
                  step: '04',
                  title: 'Suivez',
                  description: 'Suivez votre envoi en temps réel',
                  icon: Container,
                },
              ].map((step, index) => {
                const IconComponent = step.icon;
                return (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 30 }}
                    animate={isHowInView ? { opacity: 1, y: 0 } : {}}
                    transition={{ duration: 0.6, delay: 0.3 + index * 0.15 }}
                    className="text-center relative z-10"
                  >
                    {/* Clean number circle — no icon overlay */}
                    <div className="mb-5">
                      <div className="w-20 h-20 bg-brand-turquoise rounded-full flex items-center justify-center text-3xl font-bold text-white mx-auto shadow-xl ring-4 ring-brand-turquoise/20">
                        {step.step}
                      </div>
                    </div>
                    {/* Icon badge — separate from the number */}
                    <div className="flex justify-center mb-3">
                      <div className="p-2 bg-white/10 rounded-lg">
                        <IconComponent className="w-5 h-5 text-brand-turquoise" />
                      </div>
                    </div>
                    <h3 className="text-xl font-bold text-white mb-2">{step.title}</h3>
                    <p className="text-white/70 text-sm leading-relaxed">{step.description}</p>
                  </motion.div>
                );
              })}
            </div>
          </div>

          {/* CTA after last step */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isHowInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 1.4 }}
            className="mt-16 text-center"
          >
            <Link
              href="/register"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-turquoise text-white rounded-xl font-semibold text-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 group"
            >
              <span>Essayer maintenant</span>
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </Link>
            <p className="mt-3 text-white/50 text-sm">
              Inscription gratuite · Aucune carte bancaire requise
            </p>
          </motion.div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section
        ref={testimonialsRef}
        className="py-20 lg:py-32 bg-gradient-to-br from-gray-50 to-white"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isTestimonialsInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
              Ils nous font confiance
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Découvrez les témoignages de nos clients satisfaits
            </p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isTestimonialsInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 md:grid-cols-3 gap-8"
          >
            {testimonials.map((testimonial, index) => (
              <motion.div
                key={index}
                variants={itemVariants}
                whileHover={{ y: -10 }}
                className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
              >
                <div className="flex mb-4">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      className="w-5 h-5 text-yellow-400 fill-current"
                      viewBox="0 0 20 20"
                    >
                      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                    </svg>
                  ))}
                </div>
                <p className="text-gray-700 mb-6 leading-relaxed italic">"{testimonial.quote}"</p>
                <div className="border-t pt-4">
                  <div className="font-bold text-brand-navy">{testimonial.author}</div>
                  <div className="text-sm text-gray-600">
                    {testimonial.role} - {testimonial.company}
                  </div>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section ref={ctaRef} className="py-20 lg:py-32">
        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate={isCtaInView ? 'visible' : 'hidden'}
          className="max-w-4xl mx-auto px-6 lg:px-8 text-center"
        >
          <motion.div variants={itemVariants}>
            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-6">
              Prêt à simplifier votre fret maritime ?
            </h2>
            <p className="text-xl text-gray-600 mb-10">
              Rejoignez des centaines de transitaires qui font confiance à Xpeditis pour leurs
              expéditions maritimes.
            </p>
          </motion.div>

          <motion.div
            variants={itemVariants}
            className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6"
          >
            {isAuthenticated && user ? (
              <Link
                href="/dashboard"
                target="_blank"
                rel="noopener noreferrer"
                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
              >
                <span>Accéder au tableau de bord</span>
                <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </Link>
            ) : (
              <>
                <Link
                  href="/register"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
                >
                  <span>Créer un compte gratuit</span>
                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </Link>
                <Link
                  href="/login"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all hover:shadow-xl font-semibold text-lg w-full sm:w-auto"
                >
                  Se connecter
                </Link>
              </>
            )}
          </motion.div>

          <motion.div
            variants={itemVariants}
            className="flex items-center justify-center space-x-6 mt-8 text-sm text-gray-500"
          >
            <div className="flex items-center space-x-2">
              <CheckCircle2 className="w-4 h-4 text-brand-green" />
              <span>Sans carte bancaire</span>
            </div>
            <div className="flex items-center space-x-2">
              <Clock className="w-4 h-4 text-brand-green" />
              <span>Configuration en 2 min</span>
            </div>
            <div className="flex items-center space-x-2">
              <Shield className="w-4 h-4 text-brand-green" />
              <span>Données sécurisées</span>
            </div>
          </motion.div>
        </motion.div>
      </section>

      <LandingFooter />
    </div>
  );
}