import Image from "next/image";
import { GeneralSymptomsAndIndicationsProps } from "@/types/general-landing";
import BlueCtaLink from "@/ui/Button/BlueButton";

export default function GeneralSymptomsAndIndications({
    symptom_card,
    diagnosis_card,
    med_card,
    className,
}: GeneralSymptomsAndIndicationsProps) {

    return (
        <section className={`mb-16 md:mb-20 xl:mb-30 bg-white ${className || ""}`}>
            <div className="container mx-auto px-4 max-w-7xl">
                <div className="space-y-16 md:space-y-28 xl:space-y-36">

                    {/* Card 1: Ophthalmology */}
                    {symptom_card && (
                        <article className="grid grid-cols-12 gap-y-8 md:gap-x-10 xl:gap-x-10">
                            {/* Text Column */}
                            <div className="col-span-12 md:col-span-6 flex flex-col justify-center">
                                <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium uppercase tracking-[0.5px] mb-2 md:mb-3">
                                    {symptom_card.title}
                                </span>
                                <h2 className="text-[28px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-[1.2] mb-3 md:mb-4">
                                    {symptom_card.heading}
                                </h2>
                                <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal leading-relaxed mb-6">
                                    {symptom_card.description}
                                </p>

                                {/* Mobile Image */}
                                {symptom_card.image && (
                                    <div className="block md:hidden mb-6">
                                        <figure className="relative aspect-[1.3/1] overflow-hidden rounded-[20px] shadow-sm">
                                            <Image
                                                src={symptom_card.image}
                                                alt={symptom_card.heading}
                                                fill
                                                sizes="(max-width: 767px) 100vw, 50vw"
                                                className="object-cover"
                                            />
                                        </figure>
                                    </div>
                                )}

                                {/* Sub Heading */}
                                {symptom_card.clinic?.[0]?.clinic_text && (
                                    <h4 className="text-[20px] md:text-[24px] font-bold text-[#00204F] uppercase tracking-[0.5px] mb-4">
                                        {symptom_card.clinic[0].clinic_text}
                                    </h4>
                                )}

                                {/* Bullets */}
                                <ul className="space-y-2 md:space-y-4 mb-6">
                                    {symptom_card.clinic?.[0]?.points?.map((pointItem: any, idx: number) => (
                                        <li key={idx} className="text-[16px] md:text-[18px] text-[#334D72] font-medium flex items-start gap-3 leading-relaxed">
                                            <span className="mt-[0.2em] shrink-0">
                                                <svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="10" cy="10" r="10" fill="#42D0DC" />
                                                    <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                </svg>
                                            </span>
                                            <span>{pointItem.symptoms_card_clinic_details_rep_pointss}</span>
                                        </li>
                                    ))}
                                </ul>

                                {/* CTA Link */}
                                {symptom_card.cta_text && (
                                    <div className="mt-2">
                                        <BlueCtaLink href={symptom_card.cta_link || "#"} className="w-full justify-center md:w-auto">
                                            {symptom_card.cta_text}
                                        </BlueCtaLink>
                                    </div>
                                )}
                            </div>

                            {/* Desktop Image */}
                            {symptom_card.image && (
                                <div className="hidden md:block col-span-12 md:col-span-6">
                                    <figure className="relative h-full overflow-hidden rounded-[24px] shadow-sm">
                                        <Image
                                            src={symptom_card.image}
                                            alt={symptom_card.heading}
                                            fill
                                            sizes="(max-width: 767px) 100vw, 50vw"
                                            className="object-cover"
                                        />
                                    </figure>
                                </div>
                            )}
                        </article>
                    )}

                    {/* Card 2: Cosmetic Medicine & Surgery */}
                    {diagnosis_card && (
                        <article className="grid grid-cols-12 gap-y-8 md:gap-x-10">
                            {/* Desktop Image (order-1 on desktop) */}
                            {diagnosis_card.image && (
                                <div className="hidden md:block col-span-12 md:col-span-6 md:order-1">
                                    <figure className="relative h-full overflow-hidden rounded-[24px] shadow-sm">
                                        <Image
                                            src={diagnosis_card.image}
                                            alt={diagnosis_card.heading}
                                            fill
                                            sizes="(max-width: 767px) 100vw, 50vw"
                                            className="object-cover"
                                        />
                                    </figure>
                                </div>
                            )}

                            {/* Text Column (order-2 on desktop) */}
                            <div className="col-span-12 md:col-span-6 md:order-2 flex flex-col justify-center">
                                <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium uppercase tracking-[0.5px] mb-2 md:mb-3">
                                    {diagnosis_card.title}
                                </span>
                                <h2 className="text-[28px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium tracking-[-0.5px] leading-[1.2] mb-3 md:mb-4">
                                    {diagnosis_card.heading}
                                </h2>
                                <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal leading-relaxed mb-6">
                                    {diagnosis_card.description}
                                </p>

                                {/* Mobile Image */}
                                {diagnosis_card.image && (
                                    <div className="block md:hidden mb-6">
                                        <figure className="relative aspect-[1.3/1] overflow-hidden rounded-[20px] shadow-sm">
                                            <Image
                                                src={diagnosis_card.image}
                                                alt={diagnosis_card.heading}
                                                fill
                                                sizes="(max-width: 767px) 100vw, 50vw"
                                                className="object-cover"
                                            />
                                        </figure>
                                    </div>
                                )}

                                {/* Cosmetic Medicine List */}
                                {diagnosis_card.clinic?.[0]?.points && (
                                    <>
                                        <h4 className="text-[20px] md:text-[24px] font-bold text-[#00204F] uppercase tracking-[0.5px] mb-4">
                                            {diagnosis_card.clinic[0].clinic_text || "COSMETIC MEDICINE — from CHF 110 per consultation"}
                                        </h4>
                                        <ul className="space-y-2 md:space-y-4 mb-6">
                                            {diagnosis_card.clinic[0].points.map((pointItem: any, idx: number) => (
                                                <li key={idx} className="text-[16px] md:text-[18px] text-[#334D72] font-medium flex items-start gap-3 leading-relaxed">
                                                    <span className="mt-[0.2em] shrink-0">
                                                        <svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <circle cx="10" cy="10" r="10" fill="#42D0DC" />
                                                            <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                        </svg>
                                                    </span>
                                                    <span>{pointItem.symptoms_card_clinic_details_rep_pointss}</span>
                                                </li>
                                            ))}
                                        </ul>
                                    </>
                                )}

                                {/* Cosmetic Surgery List */}
                                {diagnosis_card.clinic?.[1]?.points && (
                                    <>
                                        <h4 className="text-[20px] md:text-[24px] font-bold text-[#00204F] uppercase tracking-[0.5px] mt-2 mb-4">
                                            {diagnosis_card.clinic[1].clinic_text || "COSMETIC SURGERY — from CHF 150 per consultation"}
                                        </h4>
                                        <ul className="space-y-2 md:space-y-4 mb-6">
                                            {diagnosis_card.clinic[1].points.map((pointItem: any, idx: number) => (
                                                <li key={idx} className="text-[16px] md:text-[18px] text-[#334D72] font-medium flex items-start gap-3 leading-relaxed">
                                                    <span className="mt-[0.2em] shrink-0">
                                                        <svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <circle cx="10" cy="10" r="10" fill="#42D0DC" />
                                                            <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                        </svg>
                                                    </span>
                                                    <span>{pointItem.symptoms_card_clinic_details_rep_pointss}</span>
                                                </li>
                                            ))}
                                        </ul>
                                    </>
                                )}

                                {/* CTA Link */}
                                {diagnosis_card.cta_text && (
                                    <div className="mt-2">
                                        <BlueCtaLink href={diagnosis_card.cta_link || "#"} className="w-full justify-center md:w-auto">
                                            {diagnosis_card.cta_text}
                                        </BlueCtaLink>
                                    </div>
                                )}
                            </div>
                        </article>
                    )}

                    {/* Card 3: General Medicine & Orthopaedics */}
                    {med_card && (
                        <article className="grid grid-cols-12 gap-y-6 md:gap-x-8 xl:gap-x-10">
                            {/* Text Column */}
                            <div className="col-span-12 md:col-span-6 flex flex-col justify-center">
                                <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium uppercase tracking-[0.5px] mb-2 md:mb-3">
                                    {med_card.title}
                                </span>
                                <h2 className="text-[28px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-[1.2] mb-3 md:mb-4">
                                    {med_card.heading}
                                </h2>
                                <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal leading-relaxed mb-6">
                                    {med_card.description}
                                </p>

                                {/* Mobile Image */}
                                {med_card.image && (
                                    <div className="block md:hidden mb-6">
                                        <figure className="relative aspect-[1.3/1] overflow-hidden rounded-[20px] shadow-sm">
                                            <Image
                                                src={med_card.image}
                                                alt={med_card.heading}
                                                fill
                                                sizes="(max-width: 767px) 100vw, 50vw"
                                                className="object-cover"
                                            />
                                        </figure>
                                    </div>
                                )}

                                {/* Sub Heading */}
                                {med_card.clinic?.[0]?.clinic_text && (
                                    <h4 className="text-[20px] md:text-[24px] font-bold text-[#00204F] uppercase tracking-[0.5px] mb-4">
                                        {med_card.clinic[0].clinic_text}
                                    </h4>
                                )}

                                {/* Bullets */}
                                <ul className="space-y-2 md:space-y-4 mb-6 xl:mb-10">
                                    {/* Render sub_text as first check bullet as per design styling */}
                                    {med_card.clinic?.[0]?.sub_text && (
                                        <li className="text-[16px] md:text-[18px] text-[#334D72] font-medium flex items-start gap-3 leading-relaxed">
                                            <span className="mt-[0.2em] shrink-0">
                                                <svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="10" cy="10" r="10" fill="#42D0DC" />
                                                    <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                </svg>
                                            </span>
                                            <span>{med_card.clinic[0].sub_text}</span>
                                        </li>
                                    )}
                                    {med_card.clinic?.[0]?.points?.map((pointItem: any, idx: number) => (
                                        <li key={idx} className="text-[16px] md:text-[18px] text-[#334D72] font-medium flex items-start gap-3 leading-relaxed">
                                            <span className="mt-[0.2em] shrink-0">
                                                <svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="10" cy="10" r="10" fill="#42D0DC" />
                                                    <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                </svg>
                                            </span>
                                            <span>{pointItem.symptoms_card_clinic_details_rep_pointss}</span>
                                        </li>
                                    ))}
                                </ul>

                                {/* Location/Contact details */}
                                {med_card.location && (
                                    <p className="text-[20px] text-[#334D72] font-normal mb-4 md:mb-6 xl:mb-10">
                                        {med_card.location}
                                    </p>
                                )}

                                {/* CTA Link */}
                                {med_card.cta_text && (
                                    <div className="mt-2">
                                        <BlueCtaLink href={med_card.cta_link || "#"} className="w-full justify-center md:w-auto">
                                            {med_card.cta_text}
                                        </BlueCtaLink>
                                    </div>
                                )}
                            </div>

                            {/* Desktop Image */}
                            {med_card.image && (
                                <div className="hidden md:block col-span-12 md:col-span-6">
                                    <figure className="relative h-full overflow-hidden rounded-[24px] shadow-sm">
                                        <Image
                                            src={med_card.image}
                                            alt={med_card.heading}
                                            fill
                                            sizes="(max-width: 767px) 100vw, 50vw"
                                            className="object-cover"
                                        />
                                    </figure>
                                </div>
                            )}
                        </article>
                    )}

                </div>
            </div>
        </section>
    );
}