import { Link } from "react-router-dom";
import { motion } from "motion/react";
import { ArrowRight, ScanSearch, Zap, Activity, DatabaseZap, UserCheck } from "lucide-react";
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08
    }
  }
};
const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
};
const serviceIcons = [ScanSearch, Zap, Activity, DatabaseZap, UserCheck];
export default function ServiceCategoryGrid({ categories }) {
  return <motion.div
    variants={containerVariants}
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true, margin: "-50px" }}
    className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"
  >
      {categories.map((s, idx) => {
    const Icon = serviceIcons[idx] || ScanSearch;
    return <motion.div key={s.id} variants={itemVariants}>
            <Link
      to={s.path}
      className="group block bg-white border border-slate-100 p-8 flex flex-col justify-between min-h-[300px] rounded-2xl transition-all duration-300 relative overflow-hidden shadow-md hover:shadow-xl hover:border-orange-500/20 hover:-translate-y-1"
    >
              {
      /* Top Accent line */
    }
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-500/20 via-orange-500 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              
              <div className="relative z-10">
                <div className="flex items-center justify-between">
                  <div className="w-12 h-12 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center shadow-sm group-hover:scale-110 group-hover:rotate-3 transition-all duration-300">
                    <Icon className="w-5 h-5" />
                  </div>
                  <p className="font-mono text-[10px] font-bold tracking-wider text-orange-500 bg-orange-500/5 px-2.5 py-1 rounded-full">{s.tag}</p>
                </div>
                
                <h3 className="font-heading text-xl font-bold mt-6 text-slate-900 group-hover:text-orange-500 transition-colors duration-300">
                  {s.title}
                </h3>
                <p className="text-sm text-slate-500 group-hover:text-slate-600 mt-3 leading-relaxed font-light transition-colors duration-300">
                  {s.summary}
                </p>
              </div>
              
              <div className="mt-8 pt-5 border-t border-slate-50 flex items-center justify-between relative z-10">
                <span className="text-xs font-bold text-slate-800 group-hover:text-orange-500 transition-colors duration-200 uppercase tracking-wider">
                  View division scope
                </span>
                <div className="w-8 h-8 rounded-full bg-slate-50 text-slate-700 flex items-center justify-center group-hover:bg-orange-500 group-hover:text-white transition-all duration-300 shadow-sm">
                  <ArrowRight className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-0.5" />
                </div>
              </div>
            </Link>
          </motion.div>;
  })}
    </motion.div>;
}
