import React from 'react';
import { motion } from 'motion/react';
import SEO from '../components/SEO';
import {
  Users,
  Target,
  Rocket,
  ShieldCheck,
  Heart,
  Globe
} from 'lucide-react';
import { SectionDivider } from '../components/Common';

export const About = () => {
  return (
    <div className="pt-24 min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors duration-500">
      <SEO
        title="À propos de nous"
        description="Agendivo est née d'un constat simple : les entreprises passent trop de temps sur l'administratif. Notre mission est de réinventer la gestion des ressources."
        url="https://agendivo.com/about"
      />
      {/* Hero Section */}
      <section className="py-20 bg-white dark:bg-slate-900 border-b border-slate-100 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <span className="inline-block px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-sm font-bold mb-6">
              Notre Mission
            </span>
            <h1 className="text-5xl lg:text-7xl font-black text-slate-900 dark:text-white mb-8 tracking-tighter">
              Réinventer la gestion des <span className="text-blue-600">Ressources</span>
            </h1>
            <p className="text-xl text-slate-500 dark:text-slate-400 max-w-3xl mx-auto italic font-medium leading-relaxed">
              Agendivo est née d'un constat simple : les entreprises passent trop de temps sur l'administratif complexe au détriment de leur cœur de métier. Nous avons créé la plateforme ultime pour simplifier chaque aspect de votre activité.
            </p>
          </motion.div>
        </div>
      </section>

      <SectionDivider />

      {/* Values Section */}
      <section className="py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-3 gap-12">
            <motion.div
              whileHover={{ y: -5 }}
              className="p-8 bg-white dark:bg-slate-900 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-xl shadow-slate-200/50 dark:shadow-none"
            >
              <div className="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mb-6">
                <Target className="w-8 h-8 text-blue-600" />
              </div>
              <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-4">Innovation</h3>
              <p className="text-slate-500 dark:text-slate-400 font-medium leading-relaxed">
                Nous repoussons sans cesse les limites technologiques pour vous offrir les outils les plus performants et intuitifs du marché.
              </p>
            </motion.div>

            <motion.div
              whileHover={{ y: -5 }}
              className="p-8 bg-white dark:bg-slate-900 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-xl shadow-slate-200/50 dark:shadow-none"
            >
              <div className="w-14 h-14 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mb-6">
                <ShieldCheck className="w-8 h-8 text-purple-600" />
              </div>
              <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-4">Confiance</h3>
              <p className="text-slate-500 dark:text-slate-400 font-medium leading-relaxed">
                La sécurité de vos données est notre priorité absolue. Nous construisons des relations durables basées sur la transparence.
              </p>
            </motion.div>

            <motion.div
              whileHover={{ y: -5 }}
              className="p-8 bg-white dark:bg-slate-900 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-xl shadow-slate-200/50 dark:shadow-none"
            >
              <div className="w-14 h-14 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center mb-6">
                <Heart className="w-8 h-8 text-green-600" />
              </div>
              <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-4">Humain</h3>
              <p className="text-slate-500 dark:text-slate-400 font-medium leading-relaxed">
                Derrière chaque ligne de code se trouve une équipe passionnée dédiée à la réussite de nos clients.
              </p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Commercial Benefits Section */}
      <section className="py-24 bg-slate-900 text-white relative overflow-hidden">
        {/* Abstract background design */}
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-20">
          <div className="absolute -top-40 -right-40 w-96 h-96 bg-blue-500 rounded-full blur-[100px]"></div>
          <div className="absolute top-1/2 -left-20 w-72 h-72 bg-purple-500 rounded-full blur-[100px]"></div>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center mb-16">
          <span className="inline-block px-4 py-2 bg-slate-800 text-blue-400 rounded-full text-sm font-bold mb-6 tracking-widest uppercase">
            Pour les Professionnels
          </span>
          <h2 className="text-4xl lg:text-6xl font-black mb-6 tracking-tight">L'allié de votre croissance</h2>
          <p className="text-slate-400 max-w-2xl mx-auto text-lg font-medium">
            Agendivo est conçu spécifiquement pour accélérer votre développement commercial et maximiser votre rentabilité.
          </p>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-3 gap-8 relative z-10">
          {[
            {
              title: "Productivité Décuplée",
              desc: "Automatisez les tâches chronophages et concentrez-vous sur ce qui compte vraiment : le développement de votre chiffre d'affaires.",
              icon: "⚡"
            },
            {
              title: "Conversion Améliorée",
              desc: "Offrez à vos clients une expérience de prise de rendez-vous fluide et sans friction pour maximiser votre taux de conversion.",
              icon: "📈"
            },
            {
              title: "ROI Mesurable",
              desc: "Des tableaux de bord intelligents pour piloter votre activité en temps réel et prendre les meilleures décisions stratégiques.",
              icon: "🎯"
            }
          ].map((benefit, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              viewport={{ once: true }}
              className="bg-slate-800/50 backdrop-blur-xl border border-slate-700 p-8 rounded-3xl hover:bg-slate-800 transition-colors"
            >
              <div className="text-4xl mb-6 bg-slate-700/50 w-16 h-16 rounded-2xl flex items-center justify-center">
                {benefit.icon}
              </div>
              <h4 className="text-2xl font-bold mb-4 text-white">{benefit.title}</h4>
              <p className="text-slate-400 font-medium leading-relaxed">{benefit.desc}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-24 bg-white dark:bg-slate-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-4 gap-12 text-center">
          <div>
            <p className="text-5xl font-black text-blue-600 mb-2">100+</p>
            <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Entreprises</p>
          </div>
          <div>
            <p className="text-5xl font-black text-blue-600 mb-2">25k</p>
            <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Utilisateurs</p>
          </div>
          <div>
            <p className="text-5xl font-black text-blue-600 mb-2">99.9%</p>
            <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Uptime</p>
          </div>
          <div>
            <p className="text-5xl font-black text-blue-600 mb-2">24/7</p>
            <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Support</p>
          </div>
        </div>
      </section>
    </div>
  );
};