'use client';

import { motion } from 'framer-motion';
import { Check } from 'lucide-react';

type Plan = {
  id: string;
  name: string;
  price: string;
  badge?: string;
  badgeStyle?: string;
  features: string[];
  isCurrent?: boolean;
  buttonLabel: string;
  buttonStyle: string;
  highlight?: boolean;
};

const PLANS: Plan[] = [
  {
    id: 'starter',
    name: 'Starter',
    price: '49 € / mois',
    features: [
      '20 contenus / mois',
      '1 million de tokens inclus',
      'Dashboard simple',
      'Planning semi-automatique',
    ],
    buttonLabel: 'Passer à Starter',
    buttonStyle: 'border border-border text-text-dim hover:text-text hover:border-border-bright',
  },
  {
    id: 'pro',
    name: 'Pro',
    price: '99 € / mois',
    badge: 'Actuel',
    badgeStyle: 'bg-accent/20 text-accent-light border-accent/30',
    features: [
      'Tout Starter +',
      '60 contenus / mois',
      '2,5 millions de tokens inclus',
      'Mémoire éditoriale avancée',
      'Planning automatique complet',
      'Analytics détaillés',
    ],
    isCurrent: true,
    buttonLabel: 'Plan actuel',
    buttonStyle: 'opacity-40 cursor-not-allowed border border-border text-text-dim',
    highlight: true,
  },
  {
    id: 'enterprise',
    name: 'Enterprise',
    price: 'Sur devis',
    badge: 'Recommandé entreprise',
    badgeStyle: 'bg-purple-500/20 text-purple-300 border-purple-500/30',
    features: [
      'Contenus illimités',
      'Volume de tokens sur mesure',
      'Accès API',
      'Multi-utilisateurs',
      'Support prioritaire',
    ],
    buttonLabel: 'Nous contacter',
    buttonStyle: 'bg-gradient-to-r from-accent to-purple-500 text-white hover:opacity-90',
  },
];

export function PlanChangeGrid() {
  return (
    <section>
      <h2 className="text-[15px] font-semibold mb-4">Changer de plan</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {PLANS.map((plan, i) => (
          <motion.div
            key={plan.id}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4, ease: 'easeOut', delay: i * 0.07 }}
            whileHover={!plan.isCurrent ? { scale: 1.01 } : {}}
            className={`relative bg-bg-card rounded-2xl p-5 flex flex-col gap-4 transition-shadow ${
              plan.highlight
                ? 'border border-accent/40 shadow-[0_0_0_1px_rgba(99,102,241,0.25),0_0_24px_rgba(99,102,241,0.1)]'
                : 'border border-border hover:border-border-bright hover:shadow-[0_0_16px_rgba(99,102,241,0.08)]'
            }`}
          >
            {plan.badge && (
              <span
                className={`absolute top-4 right-4 px-2 py-0.5 rounded-full text-[10px] font-semibold border ${plan.badgeStyle}`}
              >
                {plan.badge}
              </span>
            )}

            <div>
              <p className="text-[13px] font-semibold mb-1">{plan.name}</p>
              <p className="text-xl font-bold font-mono">{plan.price}</p>
            </div>

            <ul className="flex-1 space-y-2">
              {plan.features.map((f) => (
                <li key={f} className="flex items-start gap-2 text-[12.5px] text-text-dim">
                  <Check
                    className="w-3.5 h-3.5 text-emerald-400 flex-shrink-0 mt-0.5"
                    strokeWidth={2.5}
                  />
                  <span>{f}</span>
                </li>
              ))}
            </ul>

            <button
              type="button"
              disabled={plan.isCurrent}
              className={`w-full py-2 px-4 rounded-lg text-[13px] font-medium transition-all ${plan.buttonStyle}`}
            >
              {plan.buttonLabel}
            </button>
          </motion.div>
        ))}
      </div>
    </section>
  );
}