import Image from "next/image";
import { clients } from "@/data/home";

export function Clients() {
  return (
    <section className="section section-gray">
      <div className="container-page">
        <div className="section-head">
          <h2>رضایتمندی ها</h2>
          <p>Satisfied</p>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {clients.map((client) => (
            <figure key={client.name} className="card-shadow overflow-hidden bg-white">
              <div className="relative aspect-[16/10]">
                <Image
                  src={client.image}
                  alt={client.name}
                  fill
                  className="object-cover"
                  sizes="(max-width: 768px) 100vw, 33vw"
                />
              </div>
              <figcaption className="px-3 py-3 text-center text-sm font-bold text-[#333]">
                {client.name}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}
