'use client';

import { useState, useRef } from 'react';
import Link from 'next/link';
import { motion, useInView, AnimatePresence } from 'framer-motion';
import {
  Briefcase,
  MapPin,
  Clock,
  Users,
  Heart,
  Zap,
  Coffee,
  GraduationCap,
  Plane,
  Building2,
  ChevronDown,
  ChevronRight,
  ArrowRight,
  Search,
  Code,
  LineChart,
  Headphones,
  Megaphone,
} from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';

export default function CareersPage() {
  const [selectedDepartment, setSelectedDepartment] = useState('all');
  const [selectedLocation, setSelectedLocation] = useState('all');
  const [expandedJob, setExpandedJob] = useState<number | null>(null);

  const heroRef = useRef(null);
  const benefitsRef = useRef(null);
  const jobsRef = useRef(null);
  const cultureRef = useRef(null);

  const isHeroInView = useInView(heroRef, { once: true });
  const isBenefitsInView = useInView(benefitsRef, { once: true });
  const isJobsInView = useInView(jobsRef, { once: true });
  const isCultureInView = useInView(cultureRef, { once: true });

  const benefits = [
    {
      icon: Heart,
      title: 'Mutuelle Premium',
      description: 'Couverture santé complète pour vous et votre famille',
    },
    {
      icon: Plane,
      title: 'Télétravail Flexible',
      description: 'Travaillez d\'où vous voulez, jusqu\'à 3 jours par semaine',
    },
    {
      icon: Coffee,
      title: 'Bien-être au Travail',
      description: 'Salle de sport, fruits frais, et événements d\'équipe',
    },
    {
      icon: GraduationCap,
      title: 'Formation Continue',
      description: '2 000€/an de budget formation et conférences',
    },
    {
      icon: Users,
      title: 'Équipe Internationale',
      description: 'Travaillez avec des talents de 15 nationalités',
    },
    {
      icon: Zap,
      title: 'Stock Options',
      description: 'Participez à la croissance de l\'entreprise',
    },
  ];

  const jobs = [
    {
      id: 1,
      title: 'Senior Frontend Engineer',
      department: 'Engineering',
      location: 'Paris',
      type: 'CDI',
      remote: true,
      salary: '65K - 85K €',
      description: 'Rejoignez notre équipe frontend pour développer la prochaine génération de notre plateforme.',
      requirements: [
        '5+ ans d\'expérience en développement frontend',
        'Maîtrise de React, TypeScript et Next.js',
        'Expérience avec les design systems',
        'Capacité à mentorer des développeurs juniors',
      ],
      icon: Code,
    },
    {
      id: 2,
      title: 'Backend Engineer (Node.js)',
      department: 'Engineering',
      location: 'Paris',
      type: 'CDI',
      remote: true,
      salary: '55K - 75K €',
      description: 'Construisez des APIs scalables pour connecter les transitaires aux compagnies maritimes.',
      requirements: [
        '3+ ans d\'expérience en Node.js/NestJS',
        'Maîtrise de PostgreSQL et Redis',
        'Connaissance des architectures microservices',
        'Expérience avec Docker et Kubernetes appréciée',
      ],
      icon: Code,
    },
    {
      id: 3,
      title: 'Product Manager',
      department: 'Product',
      location: 'Paris',
      type: 'CDI',
      remote: true,
      salary: '60K - 80K €',
      description: 'Définissez la vision produit et priorisez les fonctionnalités avec notre équipe.',
      requirements: [
        '4+ ans d\'expérience en product management B2B',
        'Expérience dans la logistique ou le shipping appréciée',
        'Capacité à analyser les données et définir les KPIs',
        'Excellentes compétences en communication',
      ],
      icon: LineChart,
    },
    {
      id: 4,
      title: 'Account Executive',
      department: 'Sales',
      location: 'Rotterdam',
      type: 'CDI',
      remote: false,
      salary: '50K - 70K € + variable',
      description: 'Développez notre portefeuille clients aux Pays-Bas et en Belgique.',
      requirements: [
        '3+ ans d\'expérience en vente B2B',
        'Connaissance du secteur maritime/logistique',
        'Maîtrise du néerlandais et de l\'anglais',
        'Capacité à gérer des cycles de vente longs',
      ],
      icon: Megaphone,
    },
    {
      id: 5,
      title: 'Customer Success Manager',
      department: 'Customer Success',
      location: 'Paris',
      type: 'CDI',
      remote: true,
      salary: '45K - 60K €',
      description: 'Accompagnez nos clients dans l\'utilisation de la plateforme et maximisez leur satisfaction.',
      requirements: [
        '2+ ans d\'expérience en customer success',
        'Expérience avec les outils CRM (HubSpot, Salesforce)',
        'Excellent relationnel et sens du service',
        'Capacité à former et accompagner les utilisateurs',
      ],
      icon: Headphones,
    },
    {
      id: 6,
      title: 'Data Analyst',
      department: 'Data',
      location: 'Hambourg',
      type: 'CDI',
      remote: true,
      salary: '50K - 65K €',
      description: 'Analysez les données de shipping pour optimiser notre plateforme et nos processus.',
      requirements: [
        '3+ ans d\'expérience en data analysis',
        'Maîtrise de SQL, Python et des outils BI',
        'Expérience avec le shipping/logistics appréciée',
        'Capacité à communiquer les insights aux équipes',
      ],
      icon: LineChart,
    },
  ];

  const departments = [
    { value: 'all', label: 'Tous les départements' },
    { value: 'Engineering', label: 'Engineering' },
    { value: 'Product', label: 'Product' },
    { value: 'Sales', label: 'Sales' },
    { value: 'Customer Success', label: 'Customer Success' },
    { value: 'Data', label: 'Data' },
  ];

  const locations = [
    { value: 'all', label: 'Toutes les villes' },
    { value: 'Paris', label: 'Paris' },
    { value: 'Rotterdam', label: 'Rotterdam' },
    { value: 'Hambourg', label: 'Hambourg' },
  ];

  const filteredJobs = jobs.filter((job) => {
    const departmentMatch = selectedDepartment === 'all' || job.department === selectedDepartment;
    const locationMatch = selectedLocation === 'all' || job.location === selectedLocation;
    return departmentMatch && locationMatch;
  });

  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="careers" />

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

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              Construisons ensemble
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                le futur du maritime
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
              Rejoignez une équipe passionnée qui révolutionne le fret maritime. Des défis stimulants,
              une culture bienveillante et des opportunités de croissance uniques vous attendent.
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
              <a
                href="#jobs"
                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>Voir les offres</span>
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </a>
              <Link
                href="/about"
                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
              >
                En savoir plus
              </Link>
            </div>
          </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>

      {/* Stats Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              { value: '50+', label: 'Employés' },
              { value: '15', label: 'Nationalités' },
              { value: '3', label: 'Bureaux en Europe' },
              { value: '40%', label: 'Femmes dans la tech' },
            ].map((stat, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="text-center"
              >
                <div className="text-5xl font-bold text-brand-turquoise mb-2">{stat.value}</div>
                <div className="text-gray-600 font-medium">{stat.label}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section ref={benefitsRef} className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isBenefitsInView ? { 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 nous rejoindre ?
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Nous investissons dans le bien-être et le développement de nos équipes
            </p>
          </motion.div>

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

      {/* Culture Section */}
      <section ref={cultureRef} className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.8 }}
            >
              <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
                Notre culture
              </h2>
              <p className="text-xl text-white/80 mb-8">
                Chez Xpeditis, nous croyons que les meilleures idées viennent d'équipes diverses
                et inclusives. Nous valorisons l'autonomie, la créativité et le feedback constructif.
              </p>
              <ul className="space-y-4">
                {[
                  'Transparence totale sur les décisions et les résultats',
                  'Feedback continu et culture de l\'amélioration',
                  'Équilibre vie pro/perso respecté',
                  'Célébration des succès collectifs',
                ].map((item, index) => (
                  <motion.li
                    key={index}
                    initial={{ opacity: 0, x: -20 }}
                    animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                    className="flex items-center space-x-3 text-white/90"
                  >
                    <div className="w-6 h-6 bg-brand-turquoise rounded-full flex items-center justify-center flex-shrink-0">
                      <ChevronRight className="w-4 h-4 text-white" />
                    </div>
                    <span>{item}</span>
                  </motion.li>
                ))}
              </ul>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="grid grid-cols-2 gap-4"
            >
              {[1, 2, 3, 4].map((i) => (
                <div
                  key={i}
                  className="aspect-square bg-white/10 rounded-2xl flex items-center justify-center"
                >
                  <Users className="w-12 h-12 text-white/40" />
                </div>
              ))}
            </motion.div>
          </div>
        </div>
      </section>

      {/* Jobs Section */}
      <section ref={jobsRef} id="jobs" className="py-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center mb-12"
          >
            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
              Nos offres d'emploi
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Trouvez le poste qui correspond à vos ambitions
            </p>
          </motion.div>

          {/* Filters */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4 mb-12"
          >
            <div className="relative">
              <select
                value={selectedDepartment}
                onChange={(e) => setSelectedDepartment(e.target.value)}
                className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
              >
                {departments.map((dept) => (
                  <option key={dept.value} value={dept.value}>
                    {dept.label}
                  </option>
                ))}
              </select>
              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
            </div>
            <div className="relative">
              <select
                value={selectedLocation}
                onChange={(e) => setSelectedLocation(e.target.value)}
                className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
              >
                {locations.map((loc) => (
                  <option key={loc.value} value={loc.value}>
                    {loc.label}
                  </option>
                ))}
              </select>
              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
            </div>
          </motion.div>

          {/* Job Listings */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isJobsInView ? 'visible' : 'hidden'}
            className="space-y-4"
          >
            {filteredJobs.length === 0 ? (
              <div className="text-center py-12">
                <Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                <h3 className="text-xl font-medium text-gray-600">Aucune offre trouvée</h3>
                <p className="text-gray-500">Essayez de modifier vos filtres</p>
              </div>
            ) : (
              filteredJobs.map((job) => {
                const IconComponent = job.icon;
                const isExpanded = expandedJob === job.id;

                return (
                  <motion.div
                    key={job.id}
                    variants={itemVariants}
                    className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden"
                  >
                    <div
                      className="p-6 cursor-pointer hover:bg-gray-50 transition-colors"
                      onClick={() => setExpandedJob(isExpanded ? null : job.id)}
                    >
                      <div className="flex items-center justify-between">
                        <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">{job.title}</h3>
                            <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
                              <span className="flex items-center space-x-1">
                                <Building2 className="w-4 h-4" />
                                <span>{job.department}</span>
                              </span>
                              <span className="flex items-center space-x-1">
                                <MapPin className="w-4 h-4" />
                                <span>{job.location}</span>
                              </span>
                              <span className="flex items-center space-x-1">
                                <Clock className="w-4 h-4" />
                                <span>{job.type}</span>
                              </span>
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center space-x-4">
                          <div className="hidden md:flex items-center space-x-2">
                            {job.remote && (
                              <span className="px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
                                Remote OK
                              </span>
                            )}
                            <span className="px-3 py-1 bg-brand-turquoise/10 text-brand-turquoise text-sm font-medium rounded-full">
                              {job.salary}
                            </span>
                          </div>
                          <ChevronDown
                            className={`w-6 h-6 text-gray-400 transition-transform ${
                              isExpanded ? 'transform rotate-180' : ''
                            }`}
                          />
                        </div>
                      </div>
                    </div>

                    <AnimatePresence>
                      {isExpanded && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: 'auto', opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          transition={{ duration: 0.3 }}
                          className="border-t border-gray-100"
                        >
                          <div className="p-6 bg-gray-50">
                            <p className="text-gray-600 mb-6">{job.description}</p>
                            <h4 className="font-bold text-brand-navy mb-3">Profil recherché :</h4>
                            <ul className="space-y-2 mb-6">
                              {job.requirements.map((req, index) => (
                                <li key={index} className="flex items-start space-x-2 text-gray-600">
                                  <ChevronRight className="w-5 h-5 text-brand-turquoise flex-shrink-0 mt-0.5" />
                                  <span>{req}</span>
                                </li>
                              ))}
                            </ul>
                            <div className="flex items-center space-x-4">
                              <Link
                                href={`/careers/${job.id}`}
                                className="px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-medium flex items-center space-x-2"
                              >
                                <span>Postuler</span>
                                <ArrowRight className="w-4 h-4" />
                              </Link>
                              <button className="px-6 py-3 border border-gray-300 rounded-lg hover:border-brand-turquoise transition-all font-medium text-gray-700">
                                En savoir plus
                              </button>
                            </div>
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </motion.div>
                );
              })
            )}
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gray-50">
        <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 font-bold text-brand-navy mb-6">
              Pas de poste correspondant ?
            </h2>
            <p className="text-xl text-gray-600 mb-10">
              Envoyez-nous une candidature spontanée ! Nous sommes toujours à la recherche de
              talents passionnés pour rejoindre notre aventure.
            </p>
            <Link
              href="/contact"
              className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all font-semibold text-lg"
            >
              <span>Candidature spontanée</span>
              <ArrowRight className="w-5 h-5" />
            </Link>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}