import Link from "next/link";
import { home } from "@/lib/content";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { ServiceIcon } from "@/components/ui/ServiceIcon";

export function Services() {
  const { services } = home;
  if (!services.visible) return null;
  return (
    <section aria-labelledby="services-title" className="section-y bg-ivory-50">
      <div className="container-site">
        <SectionTitle id="services-title">{services.title}</SectionTitle>
        <ul className="mt-10 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 md:mt-14 lg:grid-cols-4">
          {services.items.map((s) => (
            <li key={s.slug} className="flex flex-col items-center text-center">
              <span className="bg-pale-200 text-navy-800 flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-full">
                <ServiceIcon name={s.icon} className="h-8 w-8" />
              </span>
              <h3 className="text-h4 mt-6 max-w-[14rem]">
                <Link
                  href={`/services#${s.slug}`}
                  className="decoration-gold-500 rounded-sm underline-offset-4 hover:underline"
                >
                  {s.title}
                </Link>
              </h3>
              <p className="text-ink-700 mt-3 max-w-[15rem] text-[0.95rem]">{s.summary}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}