"use client";

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

export default function CausesAndRiskFactor({
    risk_factors,
    className,
}: CausesAndRiskProps) {
    const symptomsCard = risk_factors?.[0];
    const diagnosisCard = risk_factors?.[1];

    return (
        <section className={`${className} bg-white py-16 md:py-24 mb-16 md:mb-24 xl:mb-32`}>
            <div className="container mx-auto px-4 max-w-7xl">
                {/* Large Banner Image */}
                <div className="relative 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={ActionConsultationImage}
                        alt="Aesthetic consultation and morphological examination"
                        fill
                        priority
                        className="object-cover object-[center_35%]"
                    />
                </div>

                {/* 12-Column Responsive CSS Grid (Desktop-first approach) */}
                <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) */}
                    {symptomsCard && (
                        <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-semibold tracking-[2px] uppercase block mb-3">
                                {symptomsCard.title}
                            </span>
                            {/* Heading */}
                            <h3 className="text-[32px] md:text-[36px] xl:text-[40px] text-[#00204F] font-bold leading-tight mb-4 tracking-[-0.5px]">
                                {symptomsCard.heading}
                            </h3>
                            {/* Description */}
                            <p className="text-[15px] md:text-[16px] text-[#334D72] leading-relaxed font-normal mb-6">
                                {symptomsCard.description}
                            </p>
                            {/* Points List */}
                            <ul className="space-y-4 mb-8 w-full">
                                {symptomsCard.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 bg-[#38BDF8] 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] md:text-[16px] text-[#334D72] leading-relaxed font-normal">
                                            {pt.point}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                            {/* Footnote text */}
                            <p className="text-[14px] md:text-[15px] text-[#334D72] leading-relaxed font-normal mb-8 italic">
                                The session lasts an average of 15 minutes. You can resume your normal activities immediately.
                            </p>
                            {/* CTA Button */}
                            <BookAnAppointmentModal
                                buttonBgClass="bg-[#1718FF]"
                                buttonTextClass="text-[#fff]"
                                buttonText="Book my aesthetic consultation"
                                arrowIcon={WhiteArrow}
                            />
                        </div>
                    )}

                    {/* Right Column: Our Diagnosis (col-span-6) */}
                    {diagnosisCard && (
                        <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-semibold tracking-[2px] uppercase block mb-3">
                                {diagnosisCard.title}
                            </span>
                            {/* Heading */}
                            <h3 className="text-[32px] md:text-[36px] xl:text-[40px] text-[#00204F] font-bold leading-tight mb-4 tracking-[-0.5px]">
                                {diagnosisCard.heading}
                            </h3>
                            {/* Description */}
                            <p className="text-[15px] md:text-[16px] text-[#334D72] leading-relaxed font-normal mb-6">
                                {diagnosisCard.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">
                                {diagnosisCard.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 bg-[#38BDF8] 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] md:text-[16px] text-[#334D72] leading-relaxed font-normal">
                                            {pt.point}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
}