'use client';

import { motion, type Variants } from 'framer-motion';

const benefits = [
  {
    emoji: '🎓',
    title: 'Live Mentorship Sessions',
    description: 'Weekly live sessions with experienced industry professionals who guide your learning journey.',
    accent: 'from-orange-400 to-amber-300',
    bg: 'bg-orange-50',
    border: 'border-orange-100',
    iconBg: 'bg-orange-100',
  },
  {
    emoji: '🛠️',
    title: 'Real-World Projects',
    description: 'Build portfolio-worthy projects using industry tools and workflows — not toy examples.',
    accent: 'from-blue-400 to-cyan-300',
    bg: 'bg-blue-50',
    border: 'border-blue-100',
    iconBg: 'bg-blue-100',
  },
  {
    emoji: '🚀',
    title: 'Career Support',
    description: 'CV reviews, mock interviews, and job placement guidance to launch your tech career.',
    accent: 'from-emerald-400 to-teal-300',
    bg: 'bg-emerald-50',
    border: 'border-emerald-100',
    iconBg: 'bg-emerald-100',
  },
  {
    emoji: '📜',
    title: 'Certified Completion',
    description: 'Receive an industry-recognised TechTan certificate to showcase your new skills.',
    accent: 'from-purple-400 to-violet-300',
    bg: 'bg-purple-50',
    border: 'border-purple-100',
    iconBg: 'bg-purple-100',
  },
  {
    emoji: '🤝',
    title: 'Alumni Network',
    description: 'Lifetime access to the TechTan alumni community — connections that last a career.',
    accent: 'from-rose-400 to-pink-300',
    bg: 'bg-rose-50',
    border: 'border-rose-100',
    iconBg: 'bg-rose-100',
  },
];

const containerVariants: Variants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.1 } },
};

const cardVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.45, ease: 'easeOut' as const },
  },
};

export default function BenefitsSection() {
  return (
    <div className="space-y-4">
      {/* Section header */}
      <motion.div
        className="flex items-center gap-3"
        initial={{ opacity: 0, x: -12 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.4 }}
      >
        <div className="w-8 h-0.5 bg-orange-400 rounded-full" />
        <p className="text-xs font-bold text-gray-400 uppercase tracking-widest">
          What you'll get
        </p>
      </motion.div>

      {/* Cards grid: 1 col mobile, 2 col on sm+ but keep last item centered if odd */}
      <motion.div
        className="grid grid-cols-1 sm:grid-cols-2 gap-3"
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.1 }}
      >
        {benefits.map((benefit, idx) => (
          <motion.div
            key={benefit.title}
            variants={cardVariants}
            whileHover={{ y: -2, transition: { duration: 0.15 } }}
            className={`relative overflow-hidden rounded-2xl border ${benefit.border} ${benefit.bg} p-5 flex gap-4 items-start group cursor-default
              ${idx === benefits.length - 1 && benefits.length % 2 !== 0 ? 'sm:col-span-2 sm:max-w-sm sm:mx-auto sm:w-full' : ''}
            `}
          >
            {/* Top gradient accent */}
            <div className={`absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r ${benefit.accent}`} />

            {/* Icon */}
            <div className={`w-11 h-11 ${benefit.iconBg} rounded-xl flex items-center justify-center flex-shrink-0 text-xl shadow-sm group-hover:scale-105 transition-transform duration-200`}>
              {benefit.emoji}
            </div>

            {/* Text */}
            <div className="flex-1 min-w-0">
              <p className="text-sm font-bold text-gray-900 mb-1 leading-snug">{benefit.title}</p>
              <p className="text-xs text-gray-500 leading-relaxed">{benefit.description}</p>
            </div>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}