import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ShieldCheck, FileText, Globe, Zap, ArrowRight, CheckCircle2, ChevronRight, HelpCircle } from 'lucide-react';

const STEPS = [
  {
    id: 'identity',
    title: 'Identité de l\'Entreprise',
    description: 'Meta doit vérifier que votre école est une entité réelle.',
    icon: <FileText className="w-6 h-6" />,
    color: 'from-blue-500 to-indigo-600',
    details: [
      'Extrait Kbis ou Registre du Commerce',
      'Facture d\'électricité ou téléphone au nom de l\'école',
      'Le nom doit correspondre EXACTEMENT à celui sur Facebook'
    ]
  },
  {
    id: 'domain',
    title: 'Vérification du Domaine',
    description: 'Prouvez que vous êtes propriétaire de votre site web.',
    icon: <Globe className="w-6 h-6" />,
    color: 'from-purple-500 to-pink-600',
    details: [
      'Ajout d\'un code TXT sur votre DNS (ex: Namecheap, LWS)',
      'Ou ajout d\'un fichier HTML sur votre serveur',
      'Indispensable pour la confiance des élèves'
    ]
  },
  {
    id: 'approval',
    title: 'Explosion des Limites',
    description: 'Passez de 250 à 1000+ conversations par jour.',
    icon: <Zap className="w-6 h-6" />,
    color: 'from-amber-400 to-orange-500',
    details: [
      'Accès aux statistiques avancées de Meta',
      'Possibilité de diffuser des notifications massives',
      'Validation par Meta sous 48h à 7 jours'
    ]
  }
];

export default function MetaVerificationGuide() {
  const [activeStep, setActiveStep] = useState(0);

  return (
    <div className="bg-white rounded-[2.5rem] p-10 border border-slate-100 shadow-2xl shadow-indigo-100/50">
      <div className="flex items-center gap-4 mb-10">
        <div className="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600">
          <ShieldCheck className="w-8 h-8" />
        </div>
        <div>
          <h2 className="text-3xl font-black text-slate-900 tracking-tight">Accélérateur de Croissance</h2>
          <p className="text-slate-500 font-medium">Guide interactif pour débloquer toute la puissance de WhatsApp</p>
        </div>
      </div>

      <div className="grid md:grid-cols-[1fr_1.5fr] gap-12">
        {/* Sidebar Steps */}
        <div className="space-y-4">
          {STEPS.map((step, idx) => (
            <button
              key={step.id}
              onClick={() => setActiveStep(idx)}
              className={`w-full text-left p-6 rounded-3xl transition-all duration-300 relative overflow-hidden group ${
                activeStep === idx 
                  ? 'bg-slate-900 text-white shadow-xl translate-x-2' 
                  : 'bg-slate-50 text-slate-400 hover:bg-slate-100'
              }`}
            >
              <div className="flex items-center gap-4 relative z-10">
                <div className={`p-2 rounded-xl ${activeStep === idx ? 'bg-white/10' : 'bg-white shadow-sm'}`}>
                  {step.icon}
                </div>
                <div className="flex-1">
                  <h4 className="font-bold text-sm">{step.title}</h4>
                  {activeStep === idx && (
                    <motion.p 
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: 'auto' }}
                      className="text-xs text-slate-300 mt-1 font-medium"
                    >
                      {step.description}
                    </motion.p>
                  )}
                </div>
                <ChevronRight className={`w-5 h-5 transition-transform ${activeStep === idx ? 'rotate-90' : ''}`} />
              </div>
            </button>
          ))}
        </div>

        {/* Content Area */}
        <div className="relative min-h-[400px]">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeStep}
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -20 }}
              className="bg-slate-50/50 rounded-[3rem] p-12 border border-white h-full"
            >
              <div className={`w-20 h-20 bg-gradient-to-br ${STEPS[activeStep].color} rounded-3xl mb-8 flex items-center justify-center text-white shadow-lg`}>
                {STEPS[activeStep].icon}
              </div>
              
              <h3 className="text-2xl font-black text-slate-900 mb-6">{STEPS[activeStep].title}</h3>
              
              <div className="space-y-6">
                {STEPS[activeStep].details.map((detail, i) => (
                  <motion.div 
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: i * 0.1 }}
                    key={i} 
                    className="flex items-start gap-4"
                  >
                    <div className="mt-1 bg-white p-1 rounded-full shadow-sm text-emerald-500">
                      <CheckCircle2 className="w-4 h-4" />
                    </div>
                    <p className="text-slate-600 font-medium leading-relaxed">{detail}</p>
                  </motion.div>
                ))}
              </div>

              <div className="mt-12 pt-8 border-t border-slate-200/50 flex items-center justify-between">
                <div className="flex items-center gap-2 text-indigo-600 font-bold text-sm">
                  <HelpCircle className="w-4 h-4" />
                  Besoin d'aide ?
                </div>
                <a 
                  href="https://business.facebook.com/settings/security"
                  target="_blank"
                  className={`flex items-center gap-2 bg-gradient-to-r ${STEPS[activeStep].color} text-white px-8 py-4 rounded-2xl font-bold hover:scale-105 transition shadow-lg`}
                >
                  Ouvrir Meta Manager <ArrowRight className="w-4 h-4" />
                </a>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>
      </div>
    </div>
  );
}