import { motion } from "framer-motion";
import { project } from "@/data/project";
import { SectionHeading } from "./SectionHeading";

export function Highlights() {
  return (
    <section id="highlights" className="bg-secondary py-12 md:py-8">
      <div className="container-luxe">
        <SectionHeading eyebrow="What sets us apart" title="Project Highlights" subtitle="Every detail at Homeland Phase IV is engineered for premium urban living and long-term value." />
        <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {project.highlights.map(({ title, icon: Icon, desc }, i) => (
            <motion.div
              key={title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-60px" }}
              transition={{ duration: 0.5, delay: i * 0.05 }}
              className="group relative overflow-hidden rounded-2xl border border-border bg-card p-6 transition-all hover:-translate-y-1 hover:shadow-luxe"
            >
              <div className="mb-4 inline-grid h-12 w-12 place-items-center rounded-xl bg-brand text-gold transition-colors group-hover:bg-gold group-hover:text-brand">
                <Icon className="h-6 w-6" />
              </div>
              <h3 className="font-display text-lg font-semibold text-brand">{title}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{desc}</p>
              <div aria-hidden className="pointer-events-none absolute -bottom-10 -right-10 h-28 w-28 rounded-full bg-gold/10 transition-transform group-hover:scale-150" />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}