'use client';

import { useRef } from 'react';
import Link from 'next/link';
import { motion, useInView } from 'framer-motion';
import {
  Ship,
  Target,
  Eye,
  Heart,
  Users,
  TrendingUp,
  Linkedin,
  Calendar,
  ArrowRight,
} from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';

export default function AboutPage() {
  const heroRef = useRef(null);
  const missionRef = useRef(null);
  const valuesRef = useRef(null);
  const teamRef = useRef(null);
  const timelineRef = useRef(null);
  const statsRef = useRef(null);

  const isHeroInView = useInView(heroRef, { once: true });
  const isMissionInView = useInView(missionRef, { once: true });
  const isValuesInView = useInView(valuesRef, { once: true });
  const isTeamInView = useInView(teamRef, { once: true });
  const isTimelineInView = useInView(timelineRef, { once: true });
  const isStatsInView = useInView(statsRef, { once: true });

  const values = [
    {
      icon: Target,
      title: 'Excellence',
      description:
        'Nous visons l\'excellence dans chaque aspect de notre plateforme, en offrant une expérience utilisateur de premier ordre.',
      color: 'from-blue-500 to-cyan-500',
    },
    {
      icon: Heart,
      title: 'Transparence',
      description:
        'Nous croyons en une communication ouverte et honnête avec nos clients, partenaires et employés.',
      color: 'from-pink-500 to-rose-500',
    },
    {
      icon: Users,
      title: 'Collaboration',
      description:
        'Le succès se construit ensemble. Nous travaillons main dans la main avec nos clients pour atteindre leurs objectifs.',
      color: 'from-purple-500 to-indigo-500',
    },
    {
      icon: TrendingUp,
      title: 'Innovation',
      description:
        'Nous repoussons constamment les limites de la technologie pour révolutionner le fret maritime.',
      color: 'from-orange-500 to-amber-500',
    },
  ];

  const team = [
    {
      name: 'Jean-Pierre Durand',
      role: 'CEO & Co-fondateur',
      bio: 'Ex-directeur chez Maersk, 20 ans d\'expérience dans le shipping',
      image: '/assets/images/team/ceo.jpg',
      linkedin: '#',
    },
    {
      name: 'Marie Lefebvre',
      role: 'CTO & Co-fondatrice',
      bio: 'Ex-Google, experte en plateformes B2B et systèmes distribués',
      image: '/assets/images/team/cto.jpg',
      linkedin: '#',
    },
    {
      name: 'Thomas Martin',
      role: 'COO',
      bio: 'Ex-CMA CGM, spécialiste des opérations maritimes internationales',
      image: '/assets/images/team/coo.jpg',
      linkedin: '#',
    },
    {
      name: 'Sophie Bernard',
      role: 'VP Sales',
      bio: '15 ans d\'expérience commerciale dans le secteur logistique',
      image: '/assets/images/team/vp-sales.jpg',
      linkedin: '#',
    },
    {
      name: 'Alexandre Petit',
      role: 'VP Engineering',
      bio: 'Ex-Uber Freight, expert en systèmes de réservation temps réel',
      image: '/assets/images/team/vp-eng.jpg',
      linkedin: '#',
    },
    {
      name: 'Claire Moreau',
      role: 'VP Product',
      bio: 'Ex-Flexport, passionnée par l\'UX et l\'innovation produit',
      image: '/assets/images/team/vp-product.jpg',
      linkedin: '#',
    },
  ];

  const timeline = [
    {
      year: '2021',
      title: 'Fondation',
      description: 'Création de Xpeditis avec une vision claire : simplifier le fret maritime pour tous.',
    },
    {
      year: '2022',
      title: 'Première version',
      description: 'Lancement de la plateforme beta avec 10 compagnies maritimes partenaires.',
    },
    {
      year: '2023',
      title: 'Série A',
      description: 'Levée de fonds de 15M€ pour accélérer notre expansion européenne.',
    },
    {
      year: '2024',
      title: 'Expansion',
      description: '50+ compagnies maritimes, présence dans 15 pays européens.',
    },
    {
      year: '2025',
      title: 'Leader européen',
      description: 'Plateforme #1 du fret maritime B2B en Europe avec 500+ clients actifs.',
    },
  ];

  const stats = [
    { value: '500+', label: 'Clients actifs' },
    { value: '50+', label: 'Compagnies maritimes' },
    { value: '15', label: 'Pays couverts' },
    { value: '100K+', label: 'Réservations/an' },
  ];

  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 activePage="about" />

      {/* 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"
            >
              <Ship className="w-5 h-5 text-brand-turquoise" />
              <span className="text-white/90 text-sm font-medium">Notre histoire</span>
            </motion.div>

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              Révolutionner le fret maritime,
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                une réservation à la fois
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
              Fondée en 2021, Xpeditis est née d'une vision simple : rendre le fret maritime aussi simple
              qu'une réservation de vol. Nous connectons les transitaires du monde entier avec les plus
              grandes compagnies maritimes.
            </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>

      {/* Mission & Vision Section */}
      <section ref={missionRef} className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isMissionInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 lg:grid-cols-2 gap-12"
          >
            <motion.div
              variants={itemVariants}
              className="bg-gradient-to-br from-brand-turquoise/10 to-brand-turquoise/5 p-10 rounded-3xl border border-brand-turquoise/20"
            >
              <div className="w-16 h-16 bg-brand-turquoise rounded-2xl flex items-center justify-center mb-6">
                <Target className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-3xl font-bold text-brand-navy mb-4">Notre Mission</h2>
              <p className="text-gray-600 text-lg leading-relaxed">
                Démocratiser l'accès au fret maritime en offrant une plateforme technologique de pointe
                qui simplifie la recherche, la comparaison et la réservation de transport maritime pour
                tous les professionnels de la logistique.
              </p>
            </motion.div>

            <motion.div
              variants={itemVariants}
              className="bg-gradient-to-br from-brand-green/10 to-brand-green/5 p-10 rounded-3xl border border-brand-green/20"
            >
              <div className="w-16 h-16 bg-brand-green rounded-2xl flex items-center justify-center mb-6">
                <Eye className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-3xl font-bold text-brand-navy mb-4">Notre Vision</h2>
              <p className="text-gray-600 text-lg leading-relaxed">
                Devenir la référence mondiale du fret maritime digital, en connectant chaque transitaire
                à chaque compagnie maritime, partout dans le monde, avec la transparence et l'efficacité
                que mérite le commerce international.
              </p>
            </motion.div>
          </motion.div>
        </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) => (
              <motion.div
                key={index}
                variants={itemVariants}
                className="text-center"
              >
                <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-turquoise mb-2"
                >
                  {stat.value}
                </motion.div>
                <div className="text-gray-600 font-medium">{stat.label}</div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </section>

      {/* Values Section */}
      <section ref={valuesRef} className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isValuesInView ? { 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">Nos Valeurs</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Les principes qui guident chacune de nos décisions
            </p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isValuesInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
          >
            {values.map((value, index) => {
              const IconComponent = value.icon;
              return (
                <motion.div
                  key={index}
                  variants={itemVariants}
                  whileHover={{ y: -10 }}
                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
                >
                  <div
                    className={`w-14 h-14 rounded-xl bg-gradient-to-br ${value.color} flex items-center justify-center mb-4`}
                  >
                    <IconComponent className="w-7 h-7 text-white" />
                  </div>
                  <h3 className="text-xl font-bold text-brand-navy mb-3">{value.title}</h3>
                  <p className="text-gray-600">{value.description}</p>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </section>

      {/* Timeline Section */}
      <section ref={timelineRef} className="py-20 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={isTimelineInView ? { 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">Notre Parcours</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              De la startup au leader européen du fret maritime digital
            </p>
          </motion.div>

          <div className="relative">
            {/* Timeline line */}
            <div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-brand-turquoise/20" />

            <div className="space-y-12">
              {timeline.map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
                  animate={isTimelineInView ? { opacity: 1, x: 0 } : {}}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  className={`flex items-center ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'}`}
                >
                  <div className={`flex-1 ${index % 2 === 0 ? 'lg:pr-12 lg:text-right' : 'lg:pl-12'}`}>
                    <div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 inline-block">
                      <div className="flex items-center space-x-3 mb-3">
                        <Calendar className="w-5 h-5 text-brand-turquoise" />
                        <span className="text-2xl font-bold text-brand-turquoise">{item.year}</span>
                      </div>
                      <h3 className="text-xl font-bold text-brand-navy mb-2">{item.title}</h3>
                      <p className="text-gray-600">{item.description}</p>
                    </div>
                  </div>
                  <div className="hidden lg:flex items-center justify-center">
                    <div className="w-6 h-6 bg-brand-turquoise rounded-full border-4 border-white shadow-lg" />
                  </div>
                  <div className="hidden lg:block flex-1" />
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section ref={teamRef} className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isTeamInView ? { 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">Notre Équipe</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Des experts passionnés par le maritime et la technologie
            </p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isTeamInView ? 'visible' : 'hidden'}
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
          >
            {team.map((member, index) => (
              <motion.div
                key={index}
                variants={itemVariants}
                whileHover={{ y: -10 }}
                className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden group"
              >
                <div className="aspect-[4/3] bg-gradient-to-br from-brand-navy to-brand-navy/80 flex items-center justify-center relative overflow-hidden">
                  <div className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center">
                    <Users className="w-12 h-12 text-white/80" />
                  </div>
                  <div className="absolute inset-0 bg-brand-turquoise/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <a
                      href={member.linkedin}
                      className="w-12 h-12 bg-white rounded-full flex items-center justify-center hover:scale-110 transition-transform"
                    >
                      <Linkedin className="w-6 h-6 text-brand-navy" />
                    </a>
                  </div>
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-bold text-brand-navy mb-1">{member.name}</h3>
                  <p className="text-brand-turquoise font-medium mb-3">{member.role}</p>
                  <p className="text-gray-600 text-sm">{member.bio}</p>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
              Rejoignez l'aventure Xpeditis
            </h2>
            <p className="text-xl text-white/80 mb-10">
              Que vous soyez transitaire à la recherche d'une solution moderne ou talent souhaitant
              rejoindre une équipe passionnée, nous avons hâte de vous rencontrer.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
              <Link
                href="/register"
                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
              >
                <span>Créer un compte</span>
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </Link>
              <Link
                href="/careers"
                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
              >
                Voir les offres d'emploi
              </Link>
            </div>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}