import { Link } from "@inertiajs/react";



export default function ServicesSection({ data, products }: { data: any, products: any }) {
  return (
    <section id="products" className="w-full bg-white py-12">
      <div className="mx-auto w-full max-w-[1400px] px-6">
        <div className="flex flex-col gap-4 pb-6 sm:flex-row sm:items-center sm:justify-between">
          <h2 className="text-xl font-semibold text-slate-900 md:text-3xl">{data.sec_4_title}</h2>
          <Link
            href={data.sec_4_button_url}
            className="inline-flex text-base items-center justify-center rounded-full border border-slate-200 px-4 py-2  font-semibold text-slate-700 transition hover:border-[#0B4B2A] hover:text-[#0B4B2A]"
          >
            {data.sec_4_button_text}
          </Link>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {products.map((product:any) => (
            <a 
              href={product.url}
              key={product.id}
              className="h-full overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
            >
              <img src={product.image} alt={product.image_alt} className="h-40 w-full object-cover md:h-44" />
              <div className="space-y-2 px-4 py-5">
                <h3 className="text-lg font-semibold text-slate-900">{product.title}</h3>
                <p className="text-base leading-relaxed text-slate-500">{product.short_description}</p>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}