import React from 'react';
import { motion } from 'motion/react';
import SEO from '../components/SEO';
import { 
  Zap, 
  ArrowRight, 
  Calendar, 
  Settings, 
  CheckCircle2, 
  Search, 
  Plus, 
  Users, 
  FileText, 
  ShieldCheck,
  LayoutDashboard
} from 'lucide-react';
import { SectionDivider, StatsBadge } from '../components/Common';
import { PricingCard, plans } from '../components/PricingSection';
import { Link, useNavigate } from 'react-router-dom';

export const Home = () => {
  const navigate = useNavigate();

  return (
    <>
      <SEO 
        title="CRM Intelligent pour la Productivité" 
        description="Agendivo est le CRM nouvelle génération conçu pour centraliser vos rendez-vous, contrats et collaborations au sein d'une interface unique et intelligente."
        url="https://agendivo.com"
      />
      {/* Hero Section */}
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        {/* Background Decorative Elements */}
        <div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-[800px] h-[800px] bg-blue-50 dark:bg-blue-900/10 rounded-full blur-3xl opacity-50 dark:opacity-20 -z-10" />
        <div className="absolute bottom-0 left-0 translate-y-1/4 -translate-x-1/4 w-[600px] h-[600px] bg-indigo-50 dark:bg-indigo-900/10 rounded-full blur-3xl opacity-50 dark:opacity-20 -z-10" />

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.7 }}
            >
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 text-blue-600 dark:text-blue-400 text-sm font-semibold mb-6">
                <Zap className="w-4 h-4 fill-current" />
                <span>Nouveau : Version 2.0 disponible</span>
              </div>
              <h1 className="text-5xl lg:text-7xl font-extrabold text-slate-900 dark:text-white tracking-tight leading-[1.1] mb-8">
                Maîtrisez votre <span className="text-blue-600">Productivité</span> sans limites.
              </h1>
              <p className="text-xl text-slate-600 dark:text-slate-400 leading-relaxed mb-10 max-w-xl">
                Agendivo est le CRM nouvelle génération conçu pour centraliser vos rendez-vous, contrats et collaborations au sein d'une interface unique et intelligente.
              </p>
              <div className="flex flex-wrap gap-4">
                <Link to="/demo" className="px-8 py-4 bg-blue-600 text-white rounded-2xl font-bold text-lg hover:bg-blue-700 transition-all shadow-xl shadow-blue-500/25 flex items-center gap-2">
                  Demander une Démo <ArrowRight className="w-5 h-5" />
                </Link>
                <Link to="/fonctionnalites" className="px-8 py-4 bg-white dark:bg-slate-900 text-slate-900 dark:text-white border border-slate-200 dark:border-slate-800 rounded-2xl font-bold text-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-all">
                  Explorer
                </Link>
              </div>
            
            </motion.div>

            <motion.div
              initial={{ opacity: 0, scale: 0.9, rotateY: -10 }}
              animate={{ opacity: 1, scale: 1, rotateY: 0 }}
              transition={{ duration: 1, delay: 0.2 }}
              className="relative hidden lg:block"
            >
              {/* Mockup Dashboard */}
              <div className="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl p-6 border border-slate-100 dark:border-slate-800 relative overflow-hidden">
                <div className="flex items-center justify-between mb-8">
                  <div className="flex gap-2" id="window-dots">
                    <div className="w-3 h-3 rounded-full bg-red-400" />
                    <div className="w-3 h-3 rounded-full bg-yellow-400" />
                    <div className="w-3 h-3 rounded-full bg-green-400" />
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="w-32 h-2 bg-slate-100 dark:bg-slate-800 rounded-full" />
                    <div className="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800" />
                  </div>
                </div>
                
                <div className="grid grid-cols-3 gap-4 mb-8">
                  <StatsBadge label="Rendez-vous" value="124" color="text-blue-600" />
                  <StatsBadge label="Contrats" value="48" color="text-indigo-600" />
                  <StatsBadge label="Conversion" value="18%" color="text-green-600" />
                </div>

                <div className="space-y-4">
                  <div className="h-40 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-800 flex items-end justify-between px-6 pb-4">
                    {[40, 70, 45, 90, 65, 80, 55].map((h, i) => (
                      <motion.div 
                        key={i}
                        initial={{ height: 0 }}
                        animate={{ height: `${h}%` }}
                        transition={{ delay: 1 + (i * 0.1), duration: 0.5 }}
                        className="w-8 bg-blue-500/20 rounded-t-lg relative group"
                      >
                        <div className="absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-lg" />
                      </motion.div>
                    ))}
                  </div>
                  <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-dashed border-slate-200 dark:border-slate-700">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center">
                        <CheckCircle2 className="text-green-600 dark:text-green-400 w-5 h-5" />
                      </div>
                      <div>
                        <p className="text-sm font-bold text-slate-900 dark:text-white">Contrat Signé</p>
                        <p className="text-xs text-slate-500 dark:text-slate-400 font-medium italic">Client: Berangaria Marier</p>
                      </div>
                    </div>
                    <span className="text-xs font-bold text-slate-400 dark:text-slate-500">Il y a 5 min</span>
                  </div>
                </div>

                {/* Floating Elements */}
                <motion.div 
                  animate={{ y: [0, -10, 0] }}
                  transition={{ repeat: Infinity, duration: 4 }}
                  className="absolute -top-6 -right-6 p-4 bg-white dark:bg-slate-800 rounded-2xl shadow-xl border border-slate-100 dark:border-slate-800"
                >
                  <Calendar className="text-blue-600 w-8 h-8" />
                </motion.div>
                <motion.div 
                  animate={{ y: [0, 10, 0] }}
                  transition={{ repeat: Infinity, duration: 5, delay: 1 }}
                  className="absolute bottom-10 -left-6 p-4 bg-white dark:bg-slate-800 rounded-2xl shadow-xl border border-slate-100 dark:border-slate-800"
                >
                  <Settings className="text-slate-400 dark:text-slate-500 w-8 h-8" />
                </motion.div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* 
      <SectionDivider />

      <section className="py-20 bg-white dark:bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <p className="text-sm font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-12">Ils nous font confiance</p>
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-12 items-center opacity-40 grayscale hover:grayscale-0 transition-all">
            {[1, 2, 3, 4, 5, 6].map(i => (
              <div key={i} className="flex justify-center">
                <div className="h-8 w-24 bg-slate-200 dark:bg-slate-800 rounded" />
              </div>
            ))}
          </div>
        </div>
      </section>
      */}

      <SectionDivider />

      {/* Pricing Section on Home */}
      <section className="py-24 bg-slate-50 dark:bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">Des tarifs adaptés à votre <span className="text-blue-600">croissance.</span></h2>
            <p className="text-lg text-slate-500 dark:text-slate-400 font-medium italic">Commencez dès aujourd'hui et boostez votre productivité.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8 items-start">
            {plans.map((plan, i) => (
              <PricingCard 
                key={i} 
                plan={plan}
                isAnnual={false}
                onSelect={() => navigate('/tarifs')} 
              />
            ))}
          </div>
        </div>
      </section>

      <SectionDivider />

      {/* Customization section */}
      <section className="py-24 bg-[#fafbfc] dark:bg-slate-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-white dark:bg-slate-800 rounded-[2.5rem] p-12 lg:p-20 shadow-xl shadow-blue-500/5 border border-slate-100 dark:border-slate-700 grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <h2 className="text-4xl font-extrabold text-slate-900 dark:text-white mb-8 tracking-tight">
                Une flexibility <span className="text-blue-600 dark:text-blue-400 italic">sans compromis.</span>
              </h2>
              <p className="text-lg text-slate-600 dark:text-slate-400 mb-10 leading-relaxed font-medium italic">
                Nous pensons que l'outil doit s'adapter à votre métier, pas l'inverse. C'est pourquoi Agendivo offre un contrôle administrateur total sur l'écosystème.
              </p>
              <ul className="space-y-5">
                {[
                  "Configuration profonde des rôles et permissions",
                  "Création de statuts personnalisés pour RDV et Contrats",
                  "Éditeur de formulaires Drag & Drop",
                  "Gestion hiérarchique des groupes et équipes",
                  "Logs d'audit et historique de modifications complet"
                ].map((item, i) => (
                  <motion.li 
                    key={i}
                    initial={{ opacity: 0, x: -10 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: i * 0.1 }}
                    className="flex items-center gap-3 text-slate-700 dark:text-slate-300 font-semibold"
                  >
                    <div className="w-6 h-6 rounded-full bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center shrink-0">
                      <CheckCircle2 className="text-blue-600 dark:text-blue-400 w-4 h-4" />
                    </div>
                    {item}
                  </motion.li>
                ))}
              </ul>
            </div>
            <div className="grid grid-cols-2 gap-6">
              <div className="space-y-6 pt-12">
                <div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-3xl border border-blue-100 dark:border-blue-800 flex flex-col items-center text-center hover:scale-105 transition-transform cursor-default">
                  <Users className="text-blue-600 dark:text-blue-400 w-10 h-10 mb-4" />
                  <span className="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-tighter">Équipes</span>
                </div>
                <div className="bg-indigo-50 dark:bg-indigo-900/20 p-6 rounded-3xl border border-indigo-100 dark:border-indigo-800 flex flex-col items-center text-center hover:scale-105 transition-transform cursor-default">
                  <Settings className="text-indigo-600 dark:text-indigo-400 w-10 h-10 mb-4" />
                  <span className="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-tighter">Paramètres</span>
                </div>
              </div>
              <div className="space-y-6">
                <div className="bg-slate-50 dark:bg-slate-800 p-6 rounded-3xl border border-slate-200 dark:border-slate-700 flex flex-col items-center text-center hover:scale-105 transition-transform cursor-default">
                  <ShieldCheck className="text-slate-600 dark:text-slate-400 w-10 h-10 mb-4" />
                  <span className="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-tighter">Permissions</span>
                </div>
                <div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-3xl border border-green-100 dark:border-green-800 flex flex-col items-center text-center hover:scale-105 transition-transform cursor-default">
                  <FileText className="text-green-600 dark:text-green-400 w-10 h-10 mb-4" />
                  <span className="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-tighter">Templates</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SectionDivider />

      {/* Final CTA */}
       <section className="py-24 bg-white dark:bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-blue-600 dark:bg-slate-900 rounded-[3rem] p-12 lg:p-24 text-center text-white relative overflow-hidden shadow-2xl shadow-blue-600/30">
            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.2),transparent)] pointer-events-none" />
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              <h2 className="text-4xl lg:text-6xl font-black mb-8 leading-tight tracking-tight">Prêt à transformer votre <br />gestion opérationnelle ?</h2>
              <p className="text-xl text-blue-100 dark:text-slate-400 mb-12 max-w-2xl mx-auto font-medium italic">Rejoignez les leaders qui font confiance à Agendivo pour structurer leur succès.</p>
              <div className="flex flex-wrap justify-center gap-6">
                <Link to="/demo" className="px-10 py-5 bg-white dark:bg-blue-600 text-blue-600 dark:text-white rounded-2xl font-black text-xl hover:bg-slate-50 dark:hover:bg-blue-700 transition-all shadow-xl">
                  Essai Gratuit 14 jours
                </Link>
                <Link to="/demo" className="px-10 py-5 bg-blue-700 dark:bg-slate-800 text-white border border-blue-500 dark:border-slate-700 rounded-2xl font-black text-xl hover:bg-blue-800 dark:hover:bg-slate-700 transition-all">
                  Parler à un expert
                </Link>
              </div>
            </motion.div>
          </div>
        </div>
      </section>
    </>
  );
};