import Image from "next/image";
import { PatientCareTreatmentProps } from "@/types/about-us";

export default function PatientCareTreatment({ heading, description, cards }: PatientCareTreatmentProps) {
    return (
        <section className="mb-16 md:mb-30">
            <div className="container">
                <div className="max-w-[1064px] mx-auto">
                    {/* Heading */}
                    <div className="text-center   mb-16 md:mb-24">
                        <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] mb-5 max-w-[560px] md:mx-auto">
                            {heading}
                        </h2>
                        <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal leading-[1.4]">
                            {description}
                        </p>
                    </div>

                    {/* Alternating Steps Grid */}
                    <div className="grid grid-cols-1 gap-16 md:gap-24 lg:gap-30">
                        {cards.map((careItem, index) => {
                            const isReverse = careItem.reverseOnDesktop !== undefined
                                ? careItem.reverseOnDesktop
                                : index % 2 !== 0;

                            return (
                                <div key={index} className="grid grid-cols-12 gap-6 md:gap-12 lg:gap-20 items-center">
                                    {/* Image Container: Always first in source order for mobile view */}
                                    <div className={`col-span-12 md:col-span-6 ${isReverse ? "md:order-2" : "md:order-1"}`}>
                                        {careItem.image && (
                                            <figure className="relative w-full h-[240px] sm:h-[320px] md:h-[380px] lg:h-[420px] rounded-[16px] md:rounded-[24px] overflow-hidden">
                                                <Image
                                                    src={careItem.image}
                                                    alt={careItem.alt || ""}
                                                    className="w-full h-full object-cover"
                                                    width={630}
                                                    height={420}
                                                    priority={index === 0}
                                                />
                                            </figure>
                                        )}
                                    </div>

                                    {/* Content Container */}
                                    <div className={`col-span-12 md:col-span-6 ${isReverse ? "md:order-1" : "md:order-2"}`}>
                                        <div className="max-w-[480px] mx-auto md:mx-0">
                                            {/* Icon Backdrop */}
                                            {careItem.icon && (
                                                <div className="mb-5 md:mb-10">
                                                    <Image src={careItem.icon} alt="" width={72} height={72} className=" object-contain" />
                                                </div>
                                            )}
                                            <h3 className="text-[24px] text-[#00204F] font-bold mb-3 md:mb-4">
                                                {careItem.title}
                                            </h3>
                                            <p className="text-[14px] md:text-[16px] text-[#334D72] font-normal leading-[1.5]">
                                                {careItem.description}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </section>
    );
}