'use client';

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

type ValueKey = 'excellence' | 'transparency' | 'collaboration' | 'innovation';
type TeamKey = 'ceo' | 'cto' | 'coo' | 'vpSales' | 'vpEng' | 'vpProduct';
type TimelineKey = '2023' | '2024' | '2025' | '2026';
type StatKey = 'clients' | 'carriers' | 'countries' | 'bookings';

const VALUES: { key: ValueKey; icon: LucideIcon; color: string }[] = [
  { key: 'excellence', icon: Target, color: 'from-blue-500 to-cyan-500' },
  { key: 'transparency', icon: Heart, color: 'from-pink-500 to-rose-500' },
  { key: 'collaboration', icon: Users, color: 'from-purple-500 to-indigo-500' },
  { key: 'innovation', icon: TrendingUp, color: 'from-orange-500 to-amber-500' },
];

const TEAM: { key: TeamKey; name: string; linkedin: string }[] = [
  { key: 'ceo', name: 'Jean-Pierre Durand', linkedin: '#' },
  { key: 'cto', name: 'Marie Lefebvre', linkedin: '#' },
  { key: 'coo', name: 'Thomas Martin', linkedin: '#' },
  { key: 'vpSales', name: 'Sophie Bernard', linkedin: '#' },
  { key: 'vpEng', name: 'Alexandre Petit', linkedin: '#' },
  { key: 'vpProduct', name: 'Claire Moreau', linkedin: '#' },
];

const TIMELINE_YEARS: TimelineKey[] = ['2023', '2024', '2025', '2026'];

const STATS: { key: StatKey; value: string }[] = [
  { key: 'clients', value: '500+' },
  { key: 'carriers', value: '50+' },
  { key: 'countries', value: '15' },
  { key: 'bookings', value: '100K+' },
];

export default function AboutPage() {
  const t = useTranslations('marketing.about');
  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 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">{t('badge')}</span>
            </motion.div>

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              {t('title1')}
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                {t('title2')}
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
              {t('intro')}
            </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">{t('mission.title')}</h2>
              <p className="text-gray-600 text-lg leading-relaxed">{t('mission.body')}</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">{t('vision.title')}</h2>
              <p className="text-gray-600 text-lg leading-relaxed">{t('vision.body')}</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={stat.key} 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">{t(`stats.${stat.key}`)}</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">
              {t('valuesTitle')}
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('valuesSubtitle')}</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 => {
              const IconComponent = value.icon;
              return (
                <motion.div
                  key={value.key}
                  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">
                    {t(`values.${value.key}.title`)}
                  </h3>
                  <p className="text-gray-600">{t(`values.${value.key}.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">
              {t('timelineTitle')}
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('timelineSubtitle')}</p>
          </motion.div>

          <div className="relative">
            <div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-brand-turquoise/15 overflow-hidden">
              <motion.div
                initial={{ scaleY: 0 }}
                animate={isTimelineInView ? { scaleY: 1 } : {}}
                transition={{ duration: 2.2, delay: 0.2, ease: 'easeInOut' }}
                style={{ transformOrigin: 'top' }}
                className="absolute inset-0 bg-brand-turquoise/60"
              />
            </div>

            <div className="space-y-12">
              {TIMELINE_YEARS.map((year, index) => (
                <motion.div
                  key={year}
                  initial={{ opacity: 0, x: index % 2 === 0 ? -64 : 64 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true, amount: 0.4 }}
                  transition={{ duration: 0.7, ease: 'easeOut' }}
                  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 hover:shadow-xl transition-shadow">
                      <div
                        className={`flex items-center space-x-3 mb-3 ${index % 2 === 0 ? 'lg:justify-end' : ''}`}
                      >
                        <Calendar className="w-5 h-5 text-brand-turquoise" />
                        <span className="text-2xl font-bold text-brand-turquoise">{year}</span>
                      </div>
                      <h3 className="text-xl font-bold text-brand-navy mb-2">
                        {t(`timeline.${year}.title`)}
                      </h3>
                      <p className="text-gray-600">{t(`timeline.${year}.description`)}</p>
                    </div>
                  </div>

                  <div className="hidden lg:flex items-center justify-center mx-4 flex-shrink-0">
                    <motion.div
                      initial={{ scale: 0 }}
                      whileInView={{ scale: 1 }}
                      viewport={{ once: true, amount: 0.6 }}
                      transition={{
                        duration: 0.4,
                        delay: 0.15,
                        type: 'spring',
                        stiffness: 320,
                        damping: 18,
                      }}
                      className="w-5 h-5 bg-brand-turquoise rounded-full border-4 border-white shadow-lg ring-2 ring-brand-turquoise/30"
                    />
                  </div>

                  <div className="hidden lg:block flex-1" />
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section ref={teamRef} className="py-20" style={{ display: 'none' }}>
        <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">
              {t('teamTitle')}
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('teamSubtitle')}</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 => (
              <motion.div
                key={member.key}
                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">
                    {t(`team.${member.key}.role`)}
                  </p>
                  <p className="text-gray-600 text-sm">{t(`team.${member.key}.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">{t('cta.title')}</h2>
            <p className="text-xl text-white/80 mb-10">{t('cta.body')}</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>{t('cta.createAccount')}</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"
              >
                {t('cta.viewCareers')}
              </Link>
            </div>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}