import { motion } from "framer-motion";
import { BookOpen, GraduationCap, Train, Briefcase, HeartPulse, Clock } from "lucide-react";
import { project } from "@/data/project";
import { SectionHeading } from "./SectionHeading";

const categories = [
  {
    title: "Schools",
    icon: BookOpen,
    data: project.locationAdvantages.schools,
    color: "from-blue-500/5 to-cyan-500/5",
    iconColor: "text-blue-500 bg-blue-500/10",
    span: "md:col-span-3",
  },
  {
    title: "Colleges",
    icon: GraduationCap,
    data: project.locationAdvantages.colleges,
    color: "from-purple-500/5 to-indigo-500/5",
    iconColor: "text-purple-500 bg-purple-500/10",
    span: "md:col-span-3",
  },
  {
    title: "Connectivity",
    icon: Train,
    data: project.locationAdvantages.connectivity,
    color: "from-amber-500/5 to-orange-500/5",
    iconColor: "text-amber-500 bg-amber-500/10",
    span: "md:col-span-2",
  },
  {
    title: "IT Hubs",
    icon: Briefcase,
    data: project.locationAdvantages.itHubs,
    color: "from-emerald-500/5 to-teal-500/5",
    iconColor: "text-emerald-500 bg-emerald-500/10",
    span: "md:col-span-2",
  },
  {
    title: "Hospitals",
    icon: HeartPulse,
    data: project.locationAdvantages.hospitals,
    color: "from-rose-500/5 to-pink-500/5",
    iconColor: "text-rose-500 bg-rose-500/10",
    span: "md:col-span-2",
  },
];

export function LocationAdvantages() {
  return (
    <section id="location" className="bg-secondary/40 py-12 md:py-8">
      <div className="container-luxe">
        <SectionHeading
          eyebrow="Location Advantages"
          title="Close to Everything You Need"
          subtitle="At the centre of Chennai's fastest growing southern corridor — minutes from everything that matters."
        />

        <div className="mt-14 grid grid-cols-1 gap-6 md:grid-cols-6 max-w-6xl mx-auto">
          {categories.map((cat, idx) => {
            const Icon = cat.icon;
            return (
              <motion.div
                key={cat.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-40px" }}
                transition={{ duration: 0.5, delay: idx * 0.08 }}
                className={`group relative overflow-hidden rounded-3xl border border-border bg-white p-6 shadow-soft transition-all duration-300 hover:shadow-luxe hover:border-gold/30 flex flex-col justify-between ${
                  cat.span || ""
                }`}
              >
                {/* Asymmetric hover gradient background */}
                <div
                  className={`absolute inset-0 -z-10 bg-gradient-to-br ${cat.color} opacity-0 transition-opacity duration-500 group-hover:opacity-100`}
                />

                <div>
                  <div className="flex items-center gap-3">
                    <div className={`grid h-12 w-12 place-items-center rounded-2xl ${cat.iconColor}`}>
                      <Icon className="h-6 w-6" />
                    </div>
                    <h3 className="font-display text-lg font-bold text-brand">{cat.title}</h3>
                  </div>

                  <ul className="mt-4 space-y-2.5">
                    {cat.data.map((item, i) => (
                      <li
                        key={i}
                        className="flex items-center justify-between gap-2 border-b border-secondary/60 pb-2.5 last:border-0 last:pb-0"
                      >
                        <span className="text-sm font-semibold text-brand leading-snug">{item.name}</span>
                        <span className="inline-flex items-center gap-1 shrink-0 rounded-full bg-slate-50 px-2 py-0.5 text-[10px] font-bold text-brand border border-slate-200 shadow-sm transition-colors group-hover:bg-brand group-hover:text-white group-hover:border-brand">
                          <Clock className="h-3 w-3 text-gold group-hover:text-gold-soft" />
                          {item.time}
                        </span>
                      </li>
                    ))}
                  </ul>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}