Featured Works Grid

// Works grid: the first project spans the full width, the rest sit in two
// columns; titles in a condensed display face fade in on hover (always shown on touch).
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Project = { title: string; category: string; image: string; href?: string };

type Props = {
  projects?: Project[];
};

const img = (id: string) => `https://images.unsplash.com/photo-${id}?w=1800&q=80&auto=format&fit=crop`;

const DEFAULT_PROJECTS: Project[] = [
  { title: "Northlight Festival", category: "Identity & campaign", image: img("1540575467063-178a50c2df87") },
  { title: "Saffron", category: "Packaging", image: img("1550259114-ad7188f0a967") },
  { title: "Metric", category: "Product", image: img("1460925895917-afdab827c52f") },
  { title: "Gallery 24", category: "Website", image: img("1515187029135-18ee286d815b") },
  { title: "Keynote 26", category: "Event", image: img("1505373877841-8d25f7d46678") },
];

export default function FeaturedWorksGrid({ projects = DEFAULT_PROJECTS }: Props) {
  return (
    <section className="bg-white py-20 font-['Inter',ui-sans-serif,system-ui,sans-serif] antialiased md:py-28">
      <ul className="mx-auto grid max-w-[90rem] gap-2.5 px-4 md:grid-cols-2 md:px-8 lg:px-9">
        {projects.map((p, i) => {
          const featured = i === 0;
          return (
            <li key={p.title} className={featured ? "md:col-span-2" : ""}>
              <a href={p.href ?? "#"} className={`group relative block overflow-hidden bg-neutral-300 ${featured ? "aspect-[4/3] md:aspect-[1358/600]" : "aspect-[676/602]"}`}>
                <img src={p.image} alt={p.title} loading="lazy" className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" />
                <div className="absolute inset-x-0 bottom-0 flex items-end justify-between gap-4 bg-gradient-to-t from-black/70 to-transparent p-5 pt-16 transition-opacity duration-500 md:p-8 md:pt-24 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100">
                  <h3 className="font-['Anton',Impact,sans-serif] text-2xl uppercase text-white md:text-4xl">{p.title}</h3>
                  <p className="text-white">{p.category}</p>
                </div>
              </a>
            </li>
          );
        })}
      </ul>
    </section>
  );
}