import React from 'react';
import { Check, ArrowLeft } from 'lucide-react';
import { PlanType } from '../types';

interface PricingProps {
  currentPlan: PlanType;
  onBack: () => void;
  onSelectPlan: (plan: PlanType) => void;
}

const Pricing: React.FC<PricingProps> = ({ currentPlan, onBack, onSelectPlan }) => {
  const plans = [
    { id: 'free', name: 'Gratuit', price: '0€', desc: 'Idéal pour découvrir PlumeIA.', features: ['10 actions IA / mois', '1 projet actif', 'Bible du monde simple'] },
    { id: 'pro', name: 'Auteur Pro', price: '12€', desc: 'Pour les écrivains sérieux.', features: ['500 actions IA / mois', 'Projets illimités', 'Export Word & EPUB', 'Support prioritaire'], popular: true },
    { id: 'master', name: 'Maître Plume', price: '29€', desc: 'Le summum de l\'écriture IA.', features: ['Actions IA illimitées', 'Accès Gemini 3 Pro', 'Bible du monde avancée', 'Outils de révision avancés'] },
  ];

  return (
    <div className="min-h-screen bg-[#eef2ff] py-20 px-8">
      <div className="max-w-6xl mx-auto">
        <button onClick={onBack} className="flex items-center gap-2 text-slate-500 hover:text-blue-600 mb-12 font-bold transition-colors">
            <ArrowLeft size={20} /> Retour
        </button>
        <div className="text-center mb-16">
            <h2 className="text-4xl font-black text-slate-900 mb-4">Choisissez votre destin d'écrivain.</h2>
            <p className="text-slate-500">Passez au plan supérieur pour libérer toute la puissance de l'IA.</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {plans.map((p) => (
                <div key={p.id} className={`bg-white rounded-3xl p-8 border transition-all ${p.popular ? 'border-blue-500 shadow-2xl scale-105 z-10' : 'border-indigo-100 shadow-xl'}`}>
                    <div className="mb-8">
                        <h4 className="text-xl font-bold text-slate-900 mb-2">{p.name}</h4>
                        <div className="text-4xl font-black text-slate-900 mb-2">{p.price}<span className="text-sm font-normal text-slate-400">/mois</span></div>
                        <p className="text-sm text-slate-500">{p.desc}</p>
                    </div>
                    <ul className="space-y-4 mb-10">
                        {p.features.map((f, i) => (
                            <li key={i} className="flex items-center gap-3 text-sm text-slate-700">
                                <div className="text-blue-500 bg-blue-50 p-0.5 rounded-full"><Check size={14} /></div>
                                {f}
                            </li>
                        ))}
                    </ul>
                    <button 
                        onClick={() => onSelectPlan(p.id as PlanType)}
                        className={`w-full py-4 rounded-2xl font-black transition-all ${p.id === currentPlan ? 'bg-slate-100 text-slate-400 cursor-default' : p.popular ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-slate-900 text-white hover:bg-slate-800'}`}
                    >
                        {p.id === currentPlan ? 'Plan Actuel' : 'Sélectionner'}
                    </button>
                </div>
            ))}
        </div>
      </div>
    </div>
  );
};

export default Pricing;