import Link from "next/link";
import { services } from "@/data/home";

export function Services() {
  return (
    <section
      id="services"
      className="relative border-t border-line/30 bg-[linear-gradient(180deg,#fafafa_0%,#f0f2f5_50%,#fafafa_100%)] py-14 lg:py-20"
    >
      <div className="relative mx-auto max-w-7xl px-5 lg:px-8">
        <div className="reveal mb-10 min-w-0">
          <h2 className="text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal tracking-tight text-ink">
            خدمات ما
          </h2>
          <p className="latin mt-3 text-xs uppercase tracking-[0.2em] text-muted">
            Our Solutions
          </p>
        </div>

        <ul className="grid gap-5 sm:grid-cols-2 lg:gap-6">
          {services.map((service, index) => (
            <li
              key={service.title}
              className={`reveal ${index % 2 === 1 ? "reveal-delay-1" : ""}`}
            >
              <Link
                href={service.href}
                className="group group-border-hover flex h-full flex-col rounded-2xl border border-line/70 bg-white/90 p-6 transition hover:shadow-[0_16px_40px_rgba(14,17,22,0.06)] md:p-8"
              >
                <div className="mb-5 flex items-center gap-3">
                  <img
                    src={service.icon}
                    alt=""
                    width={48}
                    height={48}
                    className="h-12 w-12 shrink-0 object-contain"
                  />
                  <div className="min-w-0">
                    <h3 className="whitespace-nowrap text-[0.95rem] font-normal text-ink md:text-base">
                      {service.title}
                    </h3>
                    <p className="latin mt-0.5 text-[10px] uppercase tracking-wider text-muted">
                      {service.titleEn}
                    </p>
                  </div>
                </div>

                <p className="text-body mt-auto text-sm leading-8 text-ink-soft">
                  {service.description}
                </p>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}