"use client";

import { SafetyProps } from "@/types/aesthetic-medicine";

export default function Safety({
    heading,
    description,
    risk_factors = [],
}: SafetyProps) {
    if (!heading && (!risk_factors || risk_factors.length === 0)) return null;

    // Separate the cards: Card 1 (Common side effects), Card 2 (Rare risks), Card 3 (Safety guarantees)
    const commonCard = risk_factors?.[0];
    const rareCard = risk_factors?.[1];
    const guaranteeCard = risk_factors?.[2];

    return (
        <section className="bg-[#F8FAFC] py-16 md:py-24 mb-16 md:mb-24 xl:mb-32">
            <div className="container mx-auto px-4 max-w-7xl">
                {/* Header Grid: 12-column CSS Grid desktop-first */}
                <div className="grid grid-cols-12 gap-8 max-lg:gap-6 mb-12 items-start">
                    {/* Left/Top: Subtitle and Title */}
                    <div className="col-span-6 max-lg:col-span-12">
                        <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[0.5px] uppercase block mb-3">
                            SAFETY & SIDE EFFECTS
                        </span>
                        <h2 className="text-[32px] xl:text-[40px] text-[#00204F] font-medium leading-[1.15] tracking-[-0.5px]">
                            {heading}
                        </h2>
                    </div>

                    {/* Right/Bottom: Description Text */}
                    <div className="col-span-6 max-lg:col-span-12">
                        {description && (
                            <div
                                className="text-[18px] md:text-[20px] text-[#334D72] leading-relaxed font-normal"
                                dangerouslySetInnerHTML={{ __html: description }}
                            />
                        )}
                    </div>
                </div>

                {/* Cards Grid: 12-column CSS Grid desktop-first */}
                <div className="grid grid-cols-12 gap-8 max-lg:gap-6">
                    {/* Card 1: Common side effects (col-span-6) */}
                    {commonCard && (
                        <div 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-md transition-shadow duration-300">
                            {commonCard.title && (
                                <div className="mb-4">
                                    <span className="inline-block text-[14px] font-bold text-[#1718FF] bg-[#E8F1FF] px-3 py-1 rounded-[100px]  uppercase">
                                        {commonCard.title}
                                    </span>
                                </div>
                            )}
                            <h3 className="text-[18px] md:text-[20px] font-bold text-[#00204F] mb-6 leading-tight">
                                {commonCard.heading}
                            </h3>
                            <ul className="space-y-4">
                                {commonCard.points?.map((pt, idx) => (
                                    <li key={idx} className="flex items-start gap-3">
                                        <span className="flex items-center justify-center w-5 h-5 rounded-full border border-[#10B981] bg-white shrink-0 mt-0.5">
                                            <svg className="w-3 h-3 text-[#10B981]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3.5}>
                                                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                                            </svg>
                                        </span>
                                        <span className="text-[16px] text-[#334D72] leading-relaxed font-medium">
                                            {pt.point}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}

                    {/* Card 2: Rare risks (col-span-6) */}
                    {rareCard && (
                        <div 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-md transition-shadow duration-300">
                            {rareCard.title && (
                                <div className="mb-4">
                                    <span className="inline-block text-[14px] font-bold text-[#1718FF] bg-[#E8F1FF] px-3 py-1 rounded-[100px]  uppercase">
                                        {rareCard.title}
                                    </span>
                                </div>
                            )}
                            <h3 className="text-[18px] md:text-[20px] font-bold text-[#00204F] mb-6 leading-tight">
                                {rareCard.heading}
                            </h3>
                            <ul className="space-y-4">
                                {rareCard.points?.map((pt, idx) => (
                                    <li key={idx} className="flex items-start gap-3">
                                        <span className="flex items-center justify-center w-5 h-5 rounded-full border border-[#10B981] bg-white shrink-0 mt-0.5">
                                            <svg className="w-3 h-3 text-[#10B981]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3.5}>
                                                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                                            </svg>
                                        </span>
                                        <span className="text-[16px] text-[#334D72] font-medium leading-relaxed ">
                                            {pt.point}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}

                    {/* Card 3: Our safety guarantees (col-span-12, full width, blue bg) */}
                    {guaranteeCard && (
                        <div className="col-span-12 bg-[#1718FF] rounded-[24px] p-8 max-md:p-6 shadow-sm hover:shadow-lg transition-all duration-300 text-white">
                            <h3 className="text-[24px] max-md:text-[20px] font-bold mb-6 leading-tight">
                                {guaranteeCard.heading}
                            </h3>
                            <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
                                {guaranteeCard.points?.map((pt, idx) => (
                                    <li key={idx} className="flex items-start gap-3">
                                        <span className="flex items-center justify-center w-5 h-5 rounded-full border border-white/50 bg-[#1718FF] shrink-0 mt-0.5">
                                            <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3.5}>
                                                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                                            </svg>
                                        </span>
                                        <span className="text-[15px] max-md:text-[14px] text-white/90 leading-relaxed font-normal">
                                            {pt.point}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
}