import { motion } from "framer-motion";
import { Sparkles, ArrowRight } from "lucide-react";
import { project } from "@/data/project";
import { SectionHeading } from "./SectionHeading";

export function PlotSizes() {
  return (
    <section id="plots" className="bg-brand py-12 text-white md:py-8">
      <div className="container-luxe">
        <SectionHeading invert eyebrow="Choose your plot" title="Plot Sizes & Pricing" subtitle="Flexible plot configurations tailored for villas and premium residential developments." />
        <div className="mt-12 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
          {project.plotSizesList.map((p, i) => (
            <motion.div
              key={p.size}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-60px" }}
              transition={{ duration: 0.5, delay: i * 0.06 }}
              className="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] p-6 backdrop-blur transition-all hover:-translate-y-1 hover:border-gold/60 hover:bg-white/[0.07]"
            >
              <div className="flex items-center justify-between">
                <span className="inline-flex items-center gap-1 rounded-full border border-gold/40 bg-gold/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-gold">
                  <Sparkles className="h-3 w-3" /> {p.badge}
                </span>
              </div>
              <div className="mt-6 font-display text-3xl font-semibold">{p.size}</div>
              <div className="mt-1 text-xs uppercase tracking-[0.18em] text-white/55">Approx. price</div>
              <div className="mt-2 font-display text-xl font-semibold text-gold">{p.price}</div>
              <a
                href="#contact"
                onClick={(e) => { e.preventDefault(); document.querySelector("#contact")?.scrollIntoView({ behavior: "smooth" }); }}
                className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-white transition-colors hover:text-gold"
              >
                Book this plot <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
              </a>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}