import { Link } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import { Reveal, SectionHeader } from "@/components/Reveal";
import { galeri } from "@/lib/site-data";

export function GalleryPreview() {
  return (
    <section className="section-pad">
      <div className="container-x">
        <SectionHeader eyebrow="Galeri" title="Galeri Terbaru" subtitle="Momen kegiatan dan suasana di lingkungan madrasah." />
        <div className="mt-12 columns-2 gap-5 md:columns-3 [&>*]:mb-5">
          {galeri.map((g, i) => (
            <Reveal key={g.id} delay={i * 0.06}>
              <figure className="group relative overflow-hidden rounded-[20px] neu-sm p-2">
                <div className="overflow-hidden rounded-[16px]">
                  <img src={g.image} alt={g.judul} loading="lazy" className="w-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <figcaption className="pointer-events-none absolute inset-2 flex items-end rounded-[16px] bg-gradient-to-t from-black/60 to-transparent p-4 opacity-0 transition-opacity group-hover:opacity-100">
                  <span className="text-sm font-semibold text-white">{g.judul}</span>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
        <div className="mt-10 text-center">
          <Link to="/galeri" className="btn-neu btn-neu-primary">
            Lihat Semua Galeri <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </section>
  );
}