'use client';

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

const stats = [
  {
    value: '3',
    unit: 'Months',
    label: 'Program Duration',
    description: 'Full-time intensive training from fundamentals to industry-ready skills.',
    accent: 'bg-orange-500',
  },
  {
    value: '5',
    unit: 'Tracks',
    label: 'Specialisations',
    description: 'Web Dev, Data Analytics, Product Design, Digital Marketing, or AI & Automation.',
    accent: 'bg-gray-800',
  },
  {
    value: '100%',
    unit: '',
    label: 'Hands-on Learning',
    description: 'Every lesson tied to real projects, live mentorship, and portfolio-worthy output.',
    accent: 'bg-orange-500',
  },
];

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

const cardVariants: Variants = {
  hidden: { opacity: 0, y: 40, scale: 0.95 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] },
  },
};

export default function StatsSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.25 });

  return (
    <motion.div
      ref={ref}
      className="grid grid-cols-1 sm:grid-cols-3 gap-3"
      variants={containerVariants}
      initial="hidden"
      animate={isInView ? 'visible' : 'hidden'}
    >
      {stats.map((stat) => (
        <motion.div
          key={stat.label}
          variants={cardVariants}
          className="relative overflow-hidden rounded-2xl bg-white border-10 border-gray-100 p-5 flex flex-col gap-3 shadow-sm"
        >
          {/* Top accent bar */}
          <div className={`absolute top-0 left-0 w-full h-[3px] ${stat.accent}`} />

          {/* Stat number */}
          <div className="flex items-baseline gap-1 pt-1">
            <span className="text-3xl font-black text-gray-900 tracking-tight">
              {stat.value}
            </span>
            {stat.unit && (
              <span className="text-xs font-bold text-gray-900 uppercase tracking-widest ml-1">
                {stat.unit}
              </span>
            )}
          </div>

          {/* Divider */}
          <div className="w-8 h-px bg-gray-200" />

          {/* Label + description */}
          <div>
            <p className="text-sm font-bold text-gray-900 mb-1">{stat.label}</p>
            <p className="text-md text-gray-800 leading-normal font-medium">{stat.description}</p>
          </div>
        </motion.div>
      ))}
    </motion.div>
  );
}