import Image from "next/image";

import { Reveal } from "@/components/Reveal";
import { serviceIcons } from "@/components/ServiceIcons";
import { serviceDetails, services } from "@/data/site";

/**
 * All six disciplines at once, in the 3x2 grid the live site uses — hairline
 * cards, Persian title, tracked Latin subtitle and a short rule beneath.
 *
 * A carousel would hide half of them behind a scroll, which is the one thing
 * the source page deliberately does not do.
 */
export function ServiceGrid() {
  return (
    <ul className="mx-auto grid max-w-[1400px] gap-6 px-6 pb-24 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:px-12 lg:pb-32">
      {services.map((service, i) => {
        const detail = serviceDetails[service.slug];
        const Icon = serviceIcons[service.slug];

        return (
          <Reveal as="li" key={service.slug} delay={(i % 3) * 90}>
            <article
              id={service.slug}
              className="group flex h-full scroll-mt-28 flex-col border border-line bg-paper transition-colors duration-500 hover:border-gold/50"
            >
              <div className="relative aspect-[4/3] overflow-hidden bg-ink">
                <Image
                  src={detail.image}
                  alt=""
                  fill
                  quality={80}
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                  placeholder="blur"
                  loading={i < 3 ? "eager" : "lazy"}
                  className="object-cover transition-transform duration-[1100ms] ease-out-soft group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-ink/25 transition-colors duration-500 group-hover:bg-ink/10" />

                <span className="latin absolute top-5 right-5 text-sm text-white/70">
                  {String(i + 1).padStart(2, "0")}
                </span>

                <Icon className="absolute bottom-5 right-5 h-9 w-9 text-white" />
              </div>

              <div className="flex flex-1 flex-col p-7 lg:p-8">
                <h3 className="text-xl font-light text-ink">{service.name}</h3>

                <span className="latin mt-2.5 block text-[0.66rem] tracking-[0.26em] text-muted/70">
                  {service.nameLatin}
                </span>

                {/* The short rule that sits under each label on the live site. */}
                <span
                  aria-hidden="true"
                  className="mt-5 block h-px w-14 bg-gold/50 transition-all duration-500 ease-out-soft group-hover:w-20 group-hover:bg-gold"
                />

                <p className="mt-5 text-[0.95rem] leading-[2.1] text-muted">{detail.blurb}</p>
              </div>
            </article>
          </Reveal>
        );
      })}
    </ul>
  );
}