Photo Bento Grid Portfolio Layout

// Photo portfolio bento for a ceramics studio. Spans on a four-column grid with fixed row heights,
// so every photo has a set box before it loads. Two columns on phones.
const shots = [
  { src: "https://images.pexels.com/photos/3094036/pexels-photo-3094036.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Shelves and tables stacked with white handmade bowls and plates in a brick workshop", label: "The studio, Bermondsey", span: "col-span-2 row-span-2" },
  { src: "https://images.pexels.com/photos/8063822/pexels-photo-8063822.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Glazed ceramic vases in rust, brown and cream on a wooden shelf", label: "Iron glaze vases", span: "col-span-1 row-span-2" },
  { src: "https://images.pexels.com/photos/6693557/pexels-photo-6693557.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Hands shaping clay on a wooden table among pottery tools, seen from above", label: "Hand building", span: "col-span-1 row-span-1" },
  { src: "https://images.pexels.com/photos/6611415/pexels-photo-6611415.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Pale handmade cups and planters lined up on a sunny window sill", label: "Window sill set", span: "col-span-1 row-span-1" },
  { src: "https://images.pexels.com/photos/5642023/pexels-photo-5642023.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "A potter rolling out a slab of clay beside wooden tools and a sponge", label: "Slab rolling class", span: "col-span-2 row-span-1" },
  { src: "https://images.pexels.com/photos/32877675/pexels-photo-32877675.jpeg?auto=compress&cs=tinysrgb&w=1200", alt: "Rows of unglazed cream vases waiting to be fired", label: "Before the kiln", span: "col-span-2 row-span-1" },
];

export default function PhotoBentoGridPortfolioLayout() {
  return (
    <section className="bg-[#efe9e1] px-5 py-16 sm:py-24">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
          <div>
            <p className="font-serif text-sm italic text-stone-600">Selected work, 2024 to 2026</p>
            <h2 className="mt-1 font-serif text-3xl tracking-tight text-stone-900 sm:text-4xl">Kiln &amp; Clay Studio</h2>
          </div>
          <a href="#" className="inline-flex h-10 w-fit items-center rounded-full border border-stone-900 px-5 text-sm font-medium text-stone-900 hover:bg-stone-900 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2">Book a class</a>
        </div>
        <ul className="mt-10 grid auto-rows-[140px] grid-cols-2 gap-3 sm:auto-rows-[180px] md:grid-cols-4">
          {shots.map((s) => (
            <li key={s.src} className={`group relative overflow-hidden rounded-2xl bg-stone-300 ${s.span}`}>
              <img src={s.src} alt={s.alt} loading="lazy" className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03] motion-reduce:transition-none" />
              <span className="absolute bottom-3 left-3 rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-900">{s.label}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}