import Link from "next/link";

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

export function Services() {
  return (
    <section id="services" className="bg-paper py-16 lg:py-24">
      <div className="mx-auto max-w-[1400px] px-5 lg:px-10">
        <div className="flex flex-wrap items-end justify-between gap-8">
          <div>
            <Reveal>
              <p className="kicker mb-6">
                <span className="latin">WHAT WE DO</span>
              </p>
            </Reveal>
            <Reveal delay={90}>
              <h2 className="text-[1.625rem] leading-[1.25] font-extrabold whitespace-nowrap text-ink lg:text-[2.625rem]">
                خدمات <span className="text-gold">ما</span>
              </h2>
            </Reveal>
          </div>

          <Reveal delay={140}>
            <p className="max-w-md text-[1.02rem] leading-[2.1] text-muted">
              از تأمین زمین و سرمایه تا طراحی، اجرا و تحویل؛ تمام مراحل یک پروژه زیر یک سقف
              و با یک استاندارد واحد انجام می‌شود.
            </p>
          </Reveal>
        </div>

        <ul className="mt-16 grid gap-px border border-line bg-line sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service, i) => {
            const Icon = serviceIcons[service.slug];

            return (
              <Reveal as="li" key={service.slug} delay={(i % 3) * 90} className="bg-paper">
                <Link
                  href={`/our-services#${service.slug}`}
                  className="group relative block h-full overflow-hidden p-9 lg:p-11"
                >
                  {/* Ink panel wipes upward on hover. */}
                  <span
                    aria-hidden="true"
                    className="absolute inset-0 origin-bottom scale-y-0 bg-ink transition-transform duration-[650ms] ease-out-soft group-hover:scale-y-100"
                  />

                  <span
                    aria-hidden="true"
                    className="latin absolute top-7 left-8 text-sm text-ink/15 transition-colors duration-500 group-hover:text-white/25"
                  >
                    {String(i + 1).padStart(2, "0")}
                  </span>

                  <span className="relative block">
                    <Icon className="h-12 w-12 text-gold transition-transform duration-[650ms] ease-out-soft group-hover:-translate-y-1" />

                    <h3 className="mt-8 text-[1.35rem] font-bold text-ink transition-colors duration-500 group-hover:text-white">
                      {service.name}
                    </h3>

                    <span className="latin mt-3 block text-[0.68rem] tracking-[0.26em] text-muted transition-colors duration-500 group-hover:text-gold-soft">
                      {service.nameLatin}
                    </span>

                    <span className="mt-8 flex items-center gap-2 text-sm text-gold opacity-0 transition-opacity duration-500 group-hover:opacity-100">
                      جزئیات بیشتر
                      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5">
                        <path d="M19 12H5m0 0 6-6m-6 6 6 6" stroke="currentColor" strokeWidth="1.8" />
                      </svg>
                    </span>
                  </span>
                </Link>
              </Reveal>
            );
          })}
        </ul>
      </div>
    </section>
  );
}
