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

export function Amenities() {
  return (
    <section id="amenities" className="py-12 md:py-8">
      <div className="container-luxe">
        <SectionHeading eyebrow="Amenities" title="Crafted for everyday comfort" subtitle="Thoughtful infrastructure and lifestyle features designed around modern families." />
        <div className="mt-14 grid grid-cols-2 gap-6 sm:grid-cols-3 md:gap-8 lg:grid-cols-4">
          {project.amenities.map(({ title, icon: Icon, desc }, i) => (
            <motion.div
              key={title}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true, margin: "-60px" }}
              transition={{ duration: 0.45, delay: i * 0.04 }}
              className="group flex flex-col items-center text-center"
            >
              <div className="relative grid h-24 w-24 place-items-center rounded-full border border-gold/40 bg-card text-brand shadow-soft transition-all duration-500 group-hover:scale-110 group-hover:border-gold group-hover:bg-brand group-hover:text-gold md:h-28 md:w-28">
                <Icon className="h-9 w-9 md:h-10 md:w-10" />
                <span aria-hidden className="absolute inset-0 -z-10 rounded-full bg-gold/0 transition-colors group-hover:bg-gold/10" />
              </div>
              <div className="mt-4 font-display text-sm font-semibold text-brand md:text-base">{title}</div>
              {desc ? <div className="mt-1 max-w-[200px] text-xs text-muted-foreground">{desc}</div> : null}
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}