"use client";

import { motion } from "framer-motion";

type TimelineItem = {
  step: string;
  title: string;
  desc: string;
  time: string;
};

const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];

const containerVariant = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.15 } },
};

const itemVariant = {
  hidden: { opacity: 0, x: -24 },
  visible: { opacity: 1, x: 0, transition: { duration: 0.55, ease: EASE } },
};

const connectorVariant = {
  hidden: { scaleY: 0 },
  visible: { scaleY: 1, transition: { duration: 0.9, ease: EASE } },
};

export function AnimatedTimeline({ items }: { items: TimelineItem[] }) {
  return (
    <div className="relative max-w-3xl mx-auto">
      {/* Vertical connector line — animated scaleY from origin-top */}
      <motion.div
        className="absolute left-[22px] md:left-[26px] top-8 bottom-8 w-0.5 bg-gradient-to-b from-[#6330D6]/30 via-[#6330D6]/20 to-transparent hidden sm:block origin-top"
        variants={connectorVariant}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.1 }}
      />

      <motion.div
        className="space-y-6"
        variants={containerVariant}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.1 }}
      >
        {items.map((item, index) => (
          <motion.div
            key={item.step}
            className="relative flex gap-5 sm:gap-7"
            variants={itemVariant}
          >
            <div className="flex-shrink-0 w-11 h-11 md:w-12 md:h-12 rounded-full bg-[#6330D6] text-white flex items-center justify-center text-xs font-black shadow-[0_8px_20px_rgba(99,48,214,0.25)] relative z-10">
              {String(index + 1).padStart(2, "0")}
            </div>
            <div className="flex-1 pb-2 pt-1">
              <div className="flex items-center gap-3 mb-1.5">
                <h3 className="text-base font-black text-[#16001D] leading-tight">{item.title}</h3>
                <span className="px-2.5 py-0.5 rounded-full bg-[#6330D6]/8 text-[#6330D6] text-[10px] font-black uppercase tracking-wide shrink-0">
                  {item.time}
                </span>
              </div>
              <p className="text-sm text-[#5E5866] leading-relaxed">{item.desc}</p>
            </div>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}
