"use client";

import Image from "next/image";
import { AestheticSkinConcernProps } from "@/types/aesthetic-medicine";

export default function Technologies({
    title,
    heading,
    desc,
    monitor_cards,
}: AestheticSkinConcernProps) {
    return (
        <section className="bg-[linear-gradient(180deg,_#FFF_0%,_#F2F7FF_100%)] pt-16 md:pt-24 pb-20 md:pb-28 mb-16 md:mb-24 xl:mb-32">
            <div className="container mx-auto px-4 max-w-7xl">
                {/* Header Section */}
                <div className="text-center mb-12 md:mb-16 max-w-[800px] mx-auto">
                    <span className="text-[12px] md:text-[14px] text-[#334D72] font-semibold tracking-[2px] uppercase block mb-3">
                        {title}
                    </span>
                    <h2 className="text-[32px] md:text-[42px] xl:text-[48px] text-[#00204F] font-bold leading-tight mb-4 tracking-[-0.5px]">
                        {heading}
                    </h2>
                    {desc && (
                        <p className="text-[15px] md:text-[16px] text-[#334D72] leading-relaxed font-normal max-w-[650px] mx-auto">
                            {desc}
                        </p>
                    )}
                </div>

                {/* Cards Section using 12-column grid desktop-first approach */}
                <div className="grid grid-cols-12 gap-8 max-lg:gap-6">
                    {monitor_cards?.map((cardItem, index) => {
                        // Fix the swapped images in the CMS response dynamically
                        let displayImage = cardItem.image;
                        if (cardItem.title.toLowerCase().includes("laser") && cardItem.image.includes("injectable-prod")) {
                            displayImage = cardItem.image.replace("injectable-prod.svg", "picolaser.svg");
                        } else if (cardItem.title.toLowerCase().includes("injectable") && cardItem.image.includes("picolaser")) {
                            displayImage = cardItem.image.replace("picolaser.svg", "injectable-prod.svg");
                        }

                        return (
                            <div
                                key={index}
                                className="col-span-6 max-lg:col-span-12 bg-white rounded-[24px] border border-[#E5E9ED] p-8 max-md:p-6 shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col items-start"
                            >
                                {/* Circle icon wrapper */}
                                <div className="w-16 h-16 max-md:w-14 max-md:h-14 rounded-full bg-[#E8EEFF] flex items-center justify-center mb-6">
                                    <div className="relative w-8 h-8 max-md:w-7 max-md:h-7">
                                        {displayImage && (
                                            <Image
                                                src={displayImage}
                                                alt={cardItem.title}
                                                fill
                                                sizes="32px"
                                                className="object-contain"
                                            />
                                        )}
                                    </div>
                                </div>

                                {/* Pill badge for tags */}
                                {cardItem.description && (
                                    <div className="mb-4">
                                        <span className="inline-block text-[10px] md:text-[11px] font-bold text-[#1718FF] bg-[#E8EEFF] px-4 py-1.5 rounded-full tracking-[1px] uppercase">
                                            {cardItem.description}
                                        </span>
                                    </div>
                                )}

                                {/* Heading */}
                                <h3 className="text-[24px] max-md:text-[20px] font-bold text-[#00204F] mb-3 leading-tight">
                                    {cardItem.title}
                                </h3>

                                {/* Description Paragraph */}
                                {cardItem.tags && (
                                    <p className="text-[15px] max-md:text-[14px] text-[#334D72] leading-relaxed font-normal">
                                        {cardItem.tags}
                                    </p>
                                )}
                            </div>
                        );
                    })}
                </div>
            </div>
        </section>
    );
}