import React from 'react';
import { motion } from 'motion/react';
import { 
  Calendar, 
  Users, 
  FileText, 
  ShieldCheck, 
  Zap, 
  MessageSquare,
  CheckCircle2,
  LayoutDashboard,
  Clock,
  BarChart3,
  Bell,
  Search,
  Plus
} from 'lucide-react';
import { SectionDivider, StatsBadge } from '../components/Common';
import { Link } from 'react-router-dom';

export const Features = () => {
  return (
    <div className="pt-24 min-h-screen bg-white dark:bg-slate-950 transition-colors duration-500">
      {/* Header */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mt-10">
          <motion.h1 
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-5xl lg:text-7xl font-black text-slate-900 dark:text-white mb-8 tracking-tighter"
          >
            Nos <span className="text-blue-600">Fonctionnalités</span>
          </motion.h1>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="text-xl text-slate-500 dark:text-slate-400 max-w-2xl mx-auto italic font-medium"
          >
            Découvrez comment Agendivo centralise et optimise chaque aspect de votre gestion opérationnelle.
          </motion.p>
        </div>
      </section>

      <SectionDivider />

      {/* Detail Sections */}
      <section className="py-24 space-y-32">
        {/* Agenda */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-20 items-center">
            <motion.div 
              initial={{ opacity: 0, x: -30 }} 
              whileInView={{ opacity: 1, x: 0 }} 
              viewport={{ once: true }}
            >
              <div className="w-16 h-16 bg-blue-600 rounded-3xl flex items-center justify-center mb-8 shadow-xl shadow-blue-500/20">
                <Calendar className="text-white w-8 h-8" />
              </div>
              <h3 className="text-4xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">Agenda Intelligent & Multi-Vues</h3>
              <p className="text-lg text-slate-600 dark:text-slate-400 mb-8 leading-relaxed font-medium">
                Notre système de calendrier s'adapte dynamiquement selon le rôle de l'utilisateur. Gérez vos rendez-vous avec une fluidité sans précédent grâce aux vues hebdomadaire, quotidienne et agenda.
              </p>
              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {[
                  "Vues par rôle (Commercial, Admin)",
                  "Filtres avancés par statut",
                  "Assignation rapide intuitive",
                  "Synchronisation temps réel"
                ].map((it, idx) => (
                  <li key={idx} className="flex items-center gap-3 text-slate-700 dark:text-slate-300 font-bold text-sm bg-slate-50 dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 italic group hover:border-blue-200 transition-colors">
                    <CheckCircle2 className="text-blue-600 dark:text-blue-400 w-4 h-4 shrink-0" />
                    {it}
                  </li>
                ))}
              </ul>
            </motion.div>
            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-[3rem] shadow-2xl border border-slate-100 dark:border-slate-800 relative group overflow-hidden">
               <div className="aspect-video bg-white dark:bg-slate-800 rounded-[2rem] flex items-center justify-center shadow-inner overflow-hidden relative">
                  <img 
                    src="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&q=80&w=1200" 
                    alt="Agenda Intelligent interface"
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                    referrerPolicy="no-referrer"
                  />
                  <div className="absolute inset-0 bg-blue-600/10 mix-blend-overlay" />
               </div>
               <div className="absolute -bottom-6 -left-6 bg-blue-600 text-white p-6 rounded-3xl shadow-xl z-20">
                <span className="text-xs font-bold uppercase tracking-widest opacity-70 block mb-1">Efficacité</span>
                <span className="text-2xl font-black">+45%</span>
              </div>
            </div>
          </div>
        </div>

        {/* CRM */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-20 items-center">
            <div className="order-2 lg:order-1 bg-slate-900 dark:bg-blue-600 p-4 rounded-[3rem] shadow-2xl relative group transition-colors overflow-hidden">
              <div className="aspect-video bg-slate-800 dark:bg-slate-900 rounded-[2rem] flex items-center justify-center border border-slate-700 dark:border-slate-800 overflow-hidden relative">
                 <img 
                    src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=1200" 
                    alt="CRM Client & Historique interface"
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                    referrerPolicy="no-referrer"
                  />
                  <div className="absolute inset-0 bg-blue-600/10 mix-blend-overlay" />
              </div>
              <div className="absolute -top-6 -right-6 bg-white dark:bg-slate-800 text-slate-900 dark:text-white p-6 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-700 z-20">
                <span className="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 block mb-1">FIDÉLITÉ</span>
                <span className="text-2xl font-black text-blue-600 dark:text-blue-400">99.2%</span>
              </div>
            </div>
            <motion.div 
              initial={{ opacity: 0, x: 30 }} 
              whileInView={{ opacity: 1, x: 0 }} 
              viewport={{ once: true }}
              className="order-1 lg:order-2"
            >
              <div className="w-16 h-16 bg-blue-600 rounded-3xl flex items-center justify-center mb-8 shadow-xl shadow-blue-500/20">
                <Users className="text-white w-8 h-8" />
              </div>
              <h3 className="text-4xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">CRM Client & Historique</h3>
              <p className="text-lg text-slate-600 dark:text-slate-400 mb-8 leading-relaxed font-medium italic">
                Ne perdez jamais le fil d'un client. Agendivo trace l'intégralité du parcours client, avec un historique chronologique précis de chaque modification.
              </p>
              <ul className="space-y-4">
                {[
                  "Recherche multicritères avancée",
                  "Formulaires clients personnalisables",
                  "Tracking des assignations",
                  "Historique complet des statuts"
                ].map((it, idx) => (
                  <li key={idx} className="flex items-center gap-4 text-slate-800 dark:text-slate-200 font-bold bg-slate-50 dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 group hover:border-blue-200 transition-colors">
                    <div className="w-8 h-8 bg-blue-50 dark:bg-blue-900/20 rounded-lg flex items-center justify-center shrink-0">
                      <CheckCircle2 className="text-blue-600 dark:text-blue-400 w-5 h-5" />
                    </div>
                    {it}
                  </li>
                ))}
              </ul>
            </motion.div>
          </div>
        </div>

        {/* Dashboard Section */}
        <div className="bg-slate-900 dark:bg-slate-950 py-24 text-white overflow-hidden relative">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex flex-col lg:flex-row gap-16 items-center">
            <div className="lg:w-1/2">
              <h2 className="text-4xl lg:text-5xl font-extrabold mb-8 tracking-tight leading-tight">
                Tableau de Bord <span className="text-blue-500 italic block">en temps réel.</span>
              </h2>
              <div className="space-y-8">
                {[
                  { icon: BarChart3, title: "Graphiques Détaillés", desc: "Visualisez la répartition de vos rendez-vous." },
                  { icon: Clock, title: "Taux de Conversion", desc: "Suivez le passage des dossiers en signatures." },
                  { icon: Bell, title: "Alertes d'Activité", desc: "Soyez notifié de chaque événement majeur." }
                ].map((feature, i) => (
                  <div key={i} className="flex gap-4">
                    <div className="shrink-0 w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center group hover:bg-blue-600 transition-colors">
                      <feature.icon className="text-blue-500 group-hover:text-white w-6 h-6 transition-colors" />
                    </div>
                    <div>
                      <h4 className="text-lg font-bold mb-1">{feature.title}</h4>
                      <p className="text-slate-400 font-medium italic">{feature.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="lg:w-1/2 bg-slate-800 dark:bg-slate-900 p-4 rounded-[3rem] border border-slate-700 dark:border-slate-800 shadow-2xl overflow-hidden relative group">
               <div className="grid grid-cols-2 gap-4 relative z-10">
                  <div className="col-span-2 bg-slate-900/50 rounded-2xl border border-slate-700/50 overflow-hidden aspect-[2/1] relative">
                    <img 
                      src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=1200" 
                      alt="Real-time dashboard interface"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000"
                      referrerPolicy="no-referrer"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent" />
                  </div>
                  <div className="relative z-20">
                    <StatsBadge label="Rendez-vous" value="124" color="text-blue-500" />
                  </div>
                  <div className="relative z-20">
                    <StatsBadge label="Conversion" value="18%" color="text-green-500" />
                  </div>
               </div>
            </div>
          </div>
        </div>

        {/* Other Features Grid */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
             <div className="bg-slate-50 dark:bg-slate-900 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-xl transition-all">
                <FileText className="text-blue-600 dark:text-blue-400 w-12 h-12 mb-8" />
                <h4 className="text-xl font-black dark:text-white mb-4">Contrats 360°</h4>
                <p className="text-slate-500 dark:text-slate-400 font-medium italic">Upload, suivi rigoureux et notifications automatique.</p>
             </div>
             <div className="bg-slate-50 dark:bg-slate-900 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-xl transition-all">
                <MessageSquare className="text-blue-600 dark:text-blue-400 w-12 h-12 mb-8" />
                <h4 className="text-xl font-black dark:text-white mb-4">Collaboration</h4>
                <p className="text-slate-500 dark:text-slate-400 font-medium italic">Commentaires, messagerie interne et gestion agile.</p>
             </div>
             <div className="bg-slate-50 dark:bg-slate-900 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-xl transition-all">
                <ShieldCheck className="text-blue-600 dark:text-blue-400 w-12 h-12 mb-8" />
                <h4 className="text-xl font-black dark:text-white mb-4">Sécurité Pro</h4>
                <p className="text-slate-500 dark:text-slate-400 font-medium italic">Audit logs, droits d'accès fins et hiérarchie structurée.</p>
             </div>
             <div className="bg-slate-50 dark:bg-slate-900 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-xl transition-all">
                <Zap className="text-blue-600 dark:text-blue-400 w-12 h-12 mb-8" />
                <h4 className="text-xl font-black dark:text-white mb-4">Omni-Accès</h4>
                <p className="text-slate-500 dark:text-slate-400 font-medium italic">Création rapide et recherche partout dans l'app.</p>
             </div>
          </div>
        </div>

        {/* Final CTA on Features */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="bg-blue-600 dark:bg-blue-700 rounded-[3rem] p-12 lg:p-20 text-center text-white shadow-2xl">
            <h2 className="text-4xl font-black mb-6">Prêt à voir ça en action ?</h2>
            <p className="text-xl mb-10 opacity-90 italic">Nos experts sont prêts à vous montrer comment Agendivo peut transformer votre business.</p>
            <div className="flex justify-center">
               <Link to="/demo" className="px-10 py-5 bg-white text-blue-600 rounded-2xl font-black text-xl hover:scale-105 transition-transform shadow-xl">
                  Réserver ma Démo
               </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};