Awards Checkerboard

// Awards as a checkerboard of grey and white tiles (year top, title bottom)
// that turn black on hover, beside a short intro.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Award = { year: string; title: string };

type Props = {
  heading?: string;
  intro?: string;
  awards?: Award[];
};

const DEFAULT_AWARDS: Award[] = [
  { year: "2025", title: "Awwwards — Site of the Day" },
  { year: "2025", title: "CSS Design Awards — UI" },
  { year: "2024", title: "FWA — Site of the Month" },
  { year: "2024", title: "Webby — Honoree" },
  { year: "2023", title: "Red Dot — Brand Design" },
  { year: "2023", title: "Awwwards — Developer Award" },
  { year: "2022", title: "D&AD — Wood Pencil" },
  { year: "2021", title: "ADC — Merit" },
];

// Grey when (row + column) is even, so 2- and 4-column layouts both form a checkerboard
const grey = (i: number, cols: number) => (Math.floor(i / cols) + (i % cols)) % 2 === 0;

export default function AwardsCheckerboard({
  heading = "Recognition",
  intro = "A decade of work for brands and studios, noticed by the people who judge it.",
  awards = DEFAULT_AWARDS,
}: Props) {
  return (
    <section className="bg-white px-4 py-20 font-['Inter',ui-sans-serif,system-ui,sans-serif] text-black antialiased md:px-8 md:py-28">
      <div className="mx-auto max-w-7xl">
        <h2 className="mb-12 text-[clamp(2.5rem,6vw,5rem)] font-semibold leading-none tracking-[-0.04em]">{heading}</h2>
        <div className="grid grid-cols-1 gap-10 lg:grid-cols-3 lg:gap-8">
          <p className="max-w-[21rem] text-xl font-semibold">{intro}</p>
          <ul className="grid grid-cols-2 gap-2.5 sm:grid-cols-4 lg:col-span-2">
            {awards.map((a, i) => (
              <li
                key={a.title}
                className={`flex aspect-[212/198] flex-col justify-between p-5 text-sm font-semibold transition-colors duration-300 hover:!bg-black hover:text-white ${grey(i, 2) ? "bg-[#F9F9F9]" : "bg-white"} ${grey(i, 4) ? "sm:bg-[#F9F9F9]" : "sm:bg-white"}`}
              >
                <span>{a.year}</span>
                <span className="max-w-[11rem]">{a.title}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}