"use client";

const IMAGES = [
  { src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80&auto=format&fit=crop", alt: "Mountain lake with evergreen trees" },
  { src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80&auto=format&fit=crop", alt: "Misty green hills" },
  { src: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=800&q=80&auto=format&fit=crop", alt: "Lakeside cabin" },
  { src: "https://images.unsplash.com/photo-1500964757637-c85e8a162699?w=800&q=80&auto=format&fit=crop", alt: "Snowcapped peaks" },
  { src: "https://images.unsplash.com/photo-1499678329028-101435549a4e?w=800&q=80&auto=format&fit=crop", alt: "Stream winding through rocks" },
  { src: "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?w=800&q=80&auto=format&fit=crop", alt: "Pink sunrise over mountains" },
  { src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80&auto=format&fit=crop", alt: "Forest canopy from below" },
  { src: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80&auto=format&fit=crop", alt: "Foggy alpine lake at dusk" },
];

export default function GalleryGridUniform() {
  return (
    <section className="py-12 px-6 bg-background">
      <div className="container mx-auto">
        <div className="mb-8">
          <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight text-foreground">
            Gallery
          </h2>
          <p className="text-muted-foreground mt-1">
            A uniform grid — clean, predictable, works with any image set.
          </p>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {IMAGES.map((img, i) => (
            <div
              key={i}
              className="aspect-square overflow-hidden rounded-lg bg-muted"
            >
              <img
                src={img.src}
                alt={img.alt}
                loading="lazy"
                className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}