import React from "react";
import Image from "next/image";
import { benefitData } from "@/data/siteData";

export const Benefits: React.FC = () => {
  return (
    <section 
      style={{ fontFamily: 'var(--font-poppins), "Poppins", sans-serif' }}
      className="w-full pt-2 pb-6 sm:pt-3 sm:pb-8 lg:py-3 lg:bg-[#F0F7FD] lg:border-y lg:border-sky-100/90"
    >
      {/* Container: on desktop full-width blue spans screen, while content stays nicely centered */}
      <div className="w-full max-w-[1800px] mx-auto px-6 sm:px-10 lg:px-12">
        <div 
          className="rounded-2xl bg-[#F0F7FD] border border-sky-100/90 lg:bg-transparent lg:border-0 lg:rounded-none py-4 px-4 sm:py-5 sm:px-8 lg:px-0 lg:py-2"
        >
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 divide-y md:divide-y-0 md:divide-x divide-sky-200/60">
            {benefitData.map((benefit, index) => (
              <div
                key={benefit.id}
                className={`flex flex-col sm:flex-row md:flex-col items-center text-center sm:text-left md:text-center justify-center gap-3 ${
                  index !== 0 ? "pt-5 sm:pt-0 md:pt-0 md:pl-8" : ""
                }`}
              >
                {/* Icon from public/images/icons */}
                <div className="relative w-11 h-11 sm:w-14 sm:h-14 flex items-center justify-center shrink-0">
                  <Image
                    src={benefit.icon || `/images/icons/icon ${index + 1}.png`}
                    alt={benefit.title}
                    width={54}
                    height={54}
                    className="w-full h-full object-contain"
                  />
                </div>

                {/* Text Content */}
                <div>
                  <h3 className="text-[19px] sm:text-[21px] font-semibold text-slate-900 tracking-tight">
                    {benefit.title}
                  </h3>
                  <p className="mt-0.5 text-[15px] sm:text-[17px] text-slate-500 max-w-sm mx-auto leading-relaxed inner-section-para">
                    {benefit.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};