"use client";

import Image from "next/image";
import Link from "next/link";
import { WhyChooseClinicsProps } from "@/types/aesthetic-surgery";
import BookAnAppointmentModal from "@/components/CommonComponent/BookAppointmentModal";
import WhiteArrow from "../../../../../public/images/white-arrow.svg";

export default function WhyChooseOculusSurgery({
    heading,
    description,
    image,
    cta,
    location_details,
    sub_text,
    tel,
    showDotsButton = false,
    className = "",
}: WhyChooseClinicsProps) {
    if (!heading && !location_details) return null;

    return (
        <section className={`${className}  mb-16 md:mb-20 xl:mb-30`}>
            <div className="container mx-auto px-4 max-w-7xl">
                <div className="grid grid-cols-12 rounded-[24px] md:rounded-[32px] overflow-hidden bg-gradient-to-b from-[#52A5FC] to-[#EBF3FE] lg:bg-gradient-to-r lg:from-[#EBF3FE] lg:via-[#EBF3FE_50%] lg:to-[#52A5FC] shadow-sm items-stretch">
                    {/* Image Column (Top on mobile, Right on desktop) */}
                    {image && (
                        <div className="col-span-6 max-lg:col-span-12 lg:order-2 relative min-h-[210px] sm:min-h-[320px] lg:min-h-full">
                            <Image
                                src={image}
                                alt={heading || "Why choose Oculus clinics"}
                                fill
                                priority
                                className="object-cover object-center"
                            />
                        </div>
                    )}

                    {/* Content Column (Bottom on mobile, Left on desktop) */}
                    <div className="col-span-6 max-lg:col-span-12 lg:order-1 px-4 py-6 sm:p-10 md:p-12 lg:p-16 flex flex-col justify-center bg-[#EBF3FE] lg:bg-transparent">
                        {/* Heading */}
                        <h2 className="text-[20px] md:text-[32px] text-[#00204F] font-bold leading-[1.2] mb-4">
                            {heading}
                        </h2>

                        {/* Description */}
                        <p className="text-[16px] md:text-[20px] text-[#334D72] leading-relaxed font-normal mb-8">
                            {description}
                        </p>

                        {/* CTA Button */}
                        {cta && (
                            <div className="mb-10">
                                <BookAnAppointmentModal
                                    buttonBgClass="bg-[#1718FF]"
                                    buttonTextClass="text-[#fff]"
                                    buttonText={cta}
                                    arrowIcon={WhiteArrow}
                                />
                            </div>
                        )}

                        {/* Commitments Section */}
                        <div className="flex flex-col">
                            {sub_text && (
                                <h3 className="text-[18px] md:text-[32px] text-[#00204F] font-bold mb-4">
                                    {sub_text}
                                </h3>
                            )}
                            <div className="text-[14px] md:text-[20px] text-[#334D72] leading-relaxed space-y-1 font-medium commitment-list">
                                <style>{`
                                    .commitment-list ul {
                                        list-style-type: disc;
                                        padding-left: 24px;
                                    }
                                    .commitment-list li {
                                        margin-bottom: 12px;
                                    }
                                    .commitment-list li:last-child {
                                        margin-bottom: 0;
                                    }
                                    ${showDotsButton ? `
                                        .commitment-list p:not(:last-child) {
                                            display: list-item;
                                            list-style-type: disc;
                                            margin-left: 20px;
                                        }
                                        .commitment-list p b {
                                            display: block;
                                            margin-top: 24px;
                                            color: #334D72;
                                        }
                                    ` : ''}
                                `}</style>
                                <div dangerouslySetInnerHTML={{ __html: location_details }} className="space-y-3" />
                                {tel && (
                                    <Link
                                        href={`tel:${tel.replace(/\s+/g, "")}`}
                                        className="text-[18px] md:text-[20px] text-[#334D72] font-medium inline-block mt-3"
                                    >
                                        {tel}
                                    </Link>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}