import Image from 'next/image';
import { ClinicalExcellenceProps } from '@/types/clinics-and-doctors';

export default function ClinicalExcellence({ heading, description, cards_content, }: ClinicalExcellenceProps) {
    return (
        <section className="bg-[#F2F4F6] py-16 md:py-24 xl:py-30 mb-16 md:mb-30 overflow-hidden">
            <div className="container">
                <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.1] md:text-center mb-3">{heading}</h2>
                <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.3] md:text-center max-w-[846px] mx-auto mb-12 xl:mb-14">{description}</p>

                {/* Mobile: full-bleed horizontal scroll; Desktop: 4-column grid */}
                <div className="-mx-5 md:mx-0 overflow-x-auto md:overflow-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                    <div className="flex md:grid md:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-5 px-5 md:px-0 snap-x snap-mandatory">
                        {cards_content?.map((cardItem, index) => (
                            <div
                                key={index}
                                className="w-[calc(75vw-20px)] max-w-[260px] md:w-auto md:max-w-none shrink-0 snap-start md:h-full bg-white rounded-[16px] p-5 md:p-6"
                            >
                                {cardItem.image && (
                                    <figure className="w-16 h-16 md:w-18 md:h-18 rounded-full bg-[#E8F1FF] flex items-center justify-center mb-8 md:mb-12 shrink-0">
                                        <Image src={cardItem.image} width={40} height={40} alt={cardItem.title} />
                                    </figure>
                                )}
                                <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold md:leading-[1.3] leading-[1.4] mb-2">{cardItem.title}</h3>
                                <p className="text-[14px] md:text-[16px] text-[#334D72] font-normal">{cardItem.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    )
}