"use client";

import Image from "next/image";
import { SymptomsAndIndicationsProps } from "@/types/hyluronic-acid";
import BookAnAppointmentModal from "@/components/CommonComponent/BookAppointmentModal";
import WhiteArrow from "../../../../../public/images/white-arrow.svg";

export default function AestheticSymptomsAndIndications({
    symptom_card,
    diagnosis_card,
    className,
}: SymptomsAndIndicationsProps) {
    if (!symptom_card && !diagnosis_card) return null;

    return (
        <section className={`${className || ""} bg-white mb-16 md:mb-24 xl:mb-32`}>
            <div className="container mx-auto px-4 max-w-7xl">
                {/* Large Banner Image */}
                {symptom_card?.image && (
                    <div className="relative hidden md:block w-full h-[280px] sm:h-[380px] md:h-[480px] rounded-[24px] md:rounded-[32px] overflow-hidden mb-12 md:mb-16 shadow-sm">
                        <Image
                            src={symptom_card.image}
                            alt="Aesthetic consultation and diagnosis banner"
                            fill
                            priority
                            className="object-cover object-[center_35%]"
                        />
                    </div>
                )}

                {/* 12-Column Responsive CSS Grid (Desktop-first approach: col-span-6 on desktop, col-span-12 on mobile/tablet) */}
                <div className="grid grid-cols-12 gap-12 max-lg:gap-8 max-md:gap-6 items-start">
                    {/* Left Column: Symptoms and Indications (col-span-6) */}
                    {symptom_card && (
                        <div className="col-span-6 max-lg:col-span-12 flex flex-col items-start">
                            {/* Subtitle */}
                            <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[0.5px] uppercase block mb-3">
                                {symptom_card.title}
                            </span>
                            {/* Heading */}
                            <h3 className="text-[32px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-tight mb-4 tracking-[-0.5px]">
                                {symptom_card.heading}
                            </h3>
                            {/* Description */}
                            <p className="text-[16px] md:text-[20px] text-[#334D72] leading-relaxed font-normal mb-6">
                                {symptom_card.description}
                            </p>
                            {symptom_card?.image && (
                                <div className="relative md:hidden w-full h-[340px] sm:h-[380px] md:h-[480px] rounded-[24px] md:rounded-[32px] overflow-hidden mb-12 md:mb-16 shadow-sm">
                                    <Image
                                        src={symptom_card.image}
                                        alt="Aesthetic consultation and diagnosis banner"
                                        fill
                                        priority
                                        className="object-cover object-[center_35%]"
                                    />
                                </div>
                            )}
                            {/* Points List */}
                            <ul className="space-y-4 mb-6 w-full">
                                {symptom_card.clinic?.[0]?.points?.map((pt, idx) => (
                                    <li key={idx} className="flex items-start gap-3">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0 mt-0.5">
                                            <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 className="text-[16px] md:text-[18px] text-[#334D72] leading-relaxed font-medium">
                                            {pt.symptoms_card_clinic_details_rep_pointss}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                            {/* Footnote text */}
                            {symptom_card.clinic?.[0]?.sub_text && (
                                <p className="text-[14px] md:text-[16px] text-[#334D72] leading-relaxed font-normal mb-8">
                                    {symptom_card.clinic[0].sub_text}
                                </p>
                            )}
                            {/* CTA Button */}
                            {symptom_card.cta_text && (
                                <BookAnAppointmentModal
                                    buttonBgClass="bg-[#1718FF]"
                                    buttonTextClass="text-[#fff] w-full justify-center md:w-auto"
                                    buttonText={symptom_card.cta_text}
                                    arrowIcon={WhiteArrow}
                                />
                            )}
                        </div>
                    )}

                    {/* Right Column: Our Diagnosis (col-span-6) */}
                    {diagnosis_card && (
                        <div className="col-span-6 max-lg:col-span-12 flex flex-col items-start">
                            {/* Subtitle */}
                            <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[0.5px] uppercase block mb-3">
                                {diagnosis_card.title}
                            </span>
                            {/* Heading */}
                            <h3 className="text-[32px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-tight mb-4 tracking-[-0.5px]">
                                {diagnosis_card.heading}
                            </h3>
                            {/* Description */}
                            <p className="text-[16px] md:text-[20px] text-[#334D72] leading-relaxed font-normal mb-6">
                                {diagnosis_card.description}
                            </p>
                            {/* Mini section header */}
                            <h4 className="text-[16px] font-bold text-[#00204F] mb-4">
                                Key steps
                            </h4>
                            {/* Points List */}
                            <ul className="space-y-4 w-full">
                                {diagnosis_card.clinic?.[0]?.points?.map((pt, idx) => (
                                    <li key={idx} className="flex items-start gap-3">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0 mt-0.5">
                                            <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 className="text-[16px] md:text-[18px] text-[#334D72] leading-relaxed font-medium">
                                            {pt.symptoms_card_clinic_details_rep_pointss}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
}