import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X } from "lucide-react";
import { SectionHeading } from "./SectionHeading";
const images = [
  {
    src: "/homephase-1.webp",
    alt: "Homeland Phase IV Wide Blacktop Road Intersection & Plot Markings",
    span: "lg:col-span-2 lg:row-span-2",
  },
  {
    src: "/homephase-2.jpeg",
    alt: "Wide Internal Blacktop Roads",
    span: "",
  },
  {
    src: "/homephase-3.jpeg",
    alt: "Premium Residential Plot Layout",
    span: "",
  },
  {
    src: "/homephase-4.jpeg",
    alt: "Fully Developed Layout with Boundary Wall & Road Work",
    span: "lg:col-span-2",
  },
  {
    src: "/homephase-5.jpeg",
    alt: "Demarcated Plots with Surrounding Neighborhood",
    span: "",
  },
  {
    src: "/homephase-6.jpeg",
    alt: "Clear Yellow Plot Marker Stones",
    span: "",
  },
  {
    src: "/homephase-7.jpeg",
    alt: "Ready-to-Construct Gated Community Plots",
    span: "",
  },
  {
    src: "/homephase-8.jpeg",
    alt: "Plot Markings with Concrete Foundations",
    span: "",
  },
];

export function Gallery() {
  const [active, setActive] = useState<number | null>(null);

  return (
    <section id="gallery" className="py-12 md:py-8">
      <div className="container-luxe">
        <SectionHeading maxWidth="max-w-4xl" eyebrow="Gallery" title="A glimpse of Homeland Phase IV" subtitle="Avenue plantation, wide internal roads, and a community designed to feel like home from day one." />

        <div className="mt-12 grid auto-rows-[200px] grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {images.map((img, i) => (
            <motion.button
              key={img.src}
              type="button"
              onClick={() => setActive(i)}
              initial={{ opacity: 0, scale: 0.96 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true, margin: "-50px" }}
              transition={{ duration: 0.5, delay: i * 0.05 }}
              className={`group relative overflow-hidden rounded-2xl shadow-soft ${img.span}`}
            >
              <img
                src={img.src}
                alt={img.alt}
                loading="lazy"
                className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-brand/70 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
              {/* <div className="absolute bottom-3 left-4 right-4 translate-y-3 text-left font-display text-sm font-semibold text-white opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100">
                {img.alt}
              </div> */}
            </motion.button>
          ))}
        </div>
      </div>

      <AnimatePresence>
        {active !== null ? (
          <motion.div
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            className="fixed inset-0 z-[100] grid place-items-center bg-brand/90 p-4 backdrop-blur"
            onClick={() => setActive(null)}
          >
            <button aria-label="Close" className="absolute right-6 top-6 grid h-10 w-10 place-items-center rounded-full bg-white/10 text-white hover:bg-white/20">
              <X className="h-5 w-5" />
            </button>
            <motion.img
              key={active}
              initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}
              src={images[active].src} alt={images[active].alt}
              className="max-h-[85vh] w-auto max-w-[92vw] rounded-2xl shadow-luxe"
              onClick={(e) => e.stopPropagation()}
            />
          </motion.div>
        ) : null}
      </AnimatePresence>
    </section>
  );
}