import Image from "next/image";

import { Reveal } from "@/components/Reveal";
import { aboutPage } from "@/data/site";

/** Three square plates, one per foundation named in the source text. */
export function Pillars() {
  return (
    <ul className="mx-auto grid max-w-[1400px] gap-6 px-6 pb-24 sm:grid-cols-3 lg:gap-8 lg:px-12 lg:pb-32">
      {aboutPage.pillars.items.map((item, i) => (
        <Reveal as="li" key={item.title} delay={i * 110}>
          <figure className="group">
            <div className="relative aspect-square overflow-hidden bg-ink">
              <Image
                src={item.image}
                alt=""
                fill
                quality={80}
                sizes="(max-width: 640px) 100vw, 33vw"
                placeholder="blur"
                className="object-cover transition-transform duration-[1100ms] ease-out-soft group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-ink/15 transition-colors duration-500 group-hover:bg-ink/0" />
            </div>

            <figcaption className="pt-6 text-center">
              <h3 className="text-xl font-light text-ink">{item.title}</h3>
              <span className="latin mt-2.5 block text-[0.66rem] tracking-[0.26em] text-gold">
                {item.latin}
              </span>
            </figcaption>
          </figure>
        </Reveal>
      ))}
    </ul>
  );
}
