'use client';

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

type Pack = {
  tokens: string;
  price: number;
  discount?: string;
  popular?: boolean;
};

const PACKS: Pack[] = [
  { tokens: '100 k tokens', price: 5 },
  { tokens: '500 k tokens', price: 22, discount: '-12%' },
  { tokens: '1 M tokens', price: 40, discount: '-20%', popular: true },
  { tokens: '5 M tokens', price: 180, discount: '-28%' },
];

export function CreditPacks() {
  return (
    <motion.section
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut', delay: 0.15 }}
      className="bg-bg-card border border-border rounded-2xl p-6"
    >
      <h2 className="text-[15px] font-semibold mb-1">Acheter des crédits supplémentaires</h2>
      <p className="text-[12.5px] text-text-dim mb-5">
        Quand tu dépasses ton quota mensuel. Pas d&apos;expiration.
      </p>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
        {PACKS.map((pack, i) => (
          <motion.div
            key={pack.tokens}
            initial={{ opacity: 0, scale: 0.96 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.35, ease: 'easeOut', delay: 0.1 + i * 0.06 }}
            className={`relative rounded-xl border p-4 flex flex-col gap-3 ${
              pack.popular
                ? 'border-accent/40 bg-accent/5 shadow-[0_0_16px_rgba(99,102,241,0.08)]'
                : 'border-border bg-bg hover:border-border-bright'
            } transition-colors`}
          >
            {pack.popular && (
              <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-gradient-to-r from-accent to-cyan-500 text-white whitespace-nowrap">
                Populaire
              </span>
            )}

            <div>
              <p className="text-[12px] font-medium text-text">{pack.tokens}</p>
              <p className="text-xl font-bold font-mono mt-0.5">{pack.price} €</p>
            </div>

            {pack.discount && (
              <span className="text-[11px] text-emerald-400 font-semibold">{pack.discount}</span>
            )}

            <button
              type="button"
              className="w-full py-1.5 rounded-lg border border-border text-[12px] font-medium text-text-dim hover:text-text hover:border-border-bright transition-colors"
            >
              Acheter
            </button>
          </motion.div>
        ))}
      </div>

      <div className="flex items-center gap-2 text-[12px] text-text-dim">
        <CreditCard className="w-3.5 h-3.5 text-text-dimmer flex-shrink-0" />
        <span>Payé par Visa •••• 4242</span>
        <button type="button" className="text-accent-light hover:underline ml-1">
          Changer
        </button>
      </div>
    </motion.section>
  );
}