"use client";

import Image from "next/image";
import BlueBorderLink from "@/ui/Button/BlueBorderButton";
import { ClinicalServicesProps } from "@/types/homepage";

export default function OurClinicalServices({ title, description, service_cards = [] }: ClinicalServicesProps) {
  return (
    <section className=" bg-[linear-gradient(180deg,rgba(217,217,217,0)_0%,#E9F1FF_100%)] py-16 md:pb-20 xl:pb-30 bg-white scroll-mt-16" id="services">
      <div className="container">

        {/* Section Header */}
        <div className="mb-10 md:mb-20 w-full max-w-[846px] mx-auto">
          <span className="text-[12px] md:text-[14px] font-medium text-[#334D72] tracking-[0.5px] uppercase mb-2 md:mb-3 block">
            {title}
          </span>
          <h2 className="text-[32px] md:text-[40px] xl:text-[48px] text-[#00204F] font-medium leading-[1.2] tracking-[-0.5px] ">
            {description}
          </h2>
        </div>

        {/* Services Responsive Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-10">
          {service_cards?.map((serviceItem, index) => (
            <div
              key={index}
              className="bg-white rounded-[16px] border border-[#E5E9F0] overflow-hidden flex flex-col"
            >
              {/* Service Card Image */}
              <div>
                {serviceItem.image && (
                  <Image
                    src={serviceItem.image}
                    alt={serviceItem.title}
                    width={620}
                    height={305}
                    // sizes="(max-width: 768px) 100vw, 50vw"
                    className="w-full"
                    priority
                  />
                )}
              </div>

              {/* Service Card Body */}
              <div className=" p-5 sm:p-6 md:p-6 lg:p-8 xl:p-10 ">
                <div>
                  <h3 className="text-[20px] sm:text-[22px] xl:text-[24px] text-[#00204F] font-bold mb-4 tracking-tight">
                    {serviceItem.title}
                  </h3>

                  {/* <div className="flex items-end justify-between"> */}
                  {/* Bullet features list */}
                  <ul className="space-y-3 mb-8">
                    {
                      serviceItem?.diseases?.map((listItem, idx) => (
                        <li
                          key={idx}
                          className="flex items-start gap-2.5 text-[15px] sm:text-[16px] xl:text-[18px] text-[#334D72] font-medium leading-relaxed pl-4 relative after:content-[''] after:absolute md:after:top-1/2 after:top-[12px] after:-translate-y-1/2 after:left-0 after:w-[6px] after:h-[6px] after:bg-[#1718FF] after:rounded-[50px] after:z-[1]"
                        >
                          <span> {listItem.title}</span>
                        </li>
                      ))}
                  </ul>

                  {/* Direct Action Link Button */}
                  {
                    serviceItem.cta_link && serviceItem.cta_text && serviceItem.cta_text.trim() !== "" && (
                      <BlueBorderLink href={serviceItem.cta_link} className="w-full text-center">{serviceItem.cta_text}</BlueBorderLink>
                    )
                  }

                  {/* </div> */}
                </div>


              </div>
            </div >
          ))
          }
        </div >

      </div >
    </section >
  );
}