"use client";

import Image from "next/image";
import { AestheticSatisfactionProps } from "@/types/about-aesthetic";
import { getImageSrc } from "@/utils/image";

export default function AestheticSatisfaction({
    heading,
    description,
    image,
}: AestheticSatisfactionProps) {
    const satisfactionImgSrc = getImageSrc(image);

    // Helper to dynamically highlight "95%" in brand blue
    const formatHeadingText = (text: string) => {
        if (!text) return "";
        return text.replace(/(95%)/g, '<span class="text-[#1718F5]">$1</span>');
    };

    return (
        <section className="mb-16 md:mb-24 xl:mb-30">
            <div className="container">
                {/* Rounded card banner with responsive gradient background */}
                <div className="rounded-[16px] overflow-hidden bg-[#EBF3FF] md:bg-gradient-to-r md:from-[#EBF3FF] md:via-[#EBF3FF] md:to-[#4EA9E2]">
                    <div className="grid grid-cols-12 items-stretch">
                        {/* Left Side: Content block (Spans 12 on mobile, 7 on desktop) */}
                        <div className="col-span-12 md:col-span-6 flex flex-col justify-center p-8 md:p-12 xl:p-16 order-2 md:order-1">
                            <h2
                                className="text-[28px] md:text-[34px] xl:text-[38px] text-[#00204F] font-bold leading-tight mb-4"
                                dangerouslySetInnerHTML={{ __html: formatHeadingText(heading) }}
                            />
                            <p className="text-[18px] md:text-[20px] text-[#334D72] leading-relaxed max-w-[480px]">
                                {description}
                            </p>
                        </div>

                        {/* Right Side: Image block (Spans 12 on mobile, 5 on desktop) */}
                        <div className="col-span-12 md:col-span-6 relative min-h-[260px] md:min-h-full order-1 md:order-2">
                            <div className="absolute inset-0 w-full h-full">
                                {satisfactionImgSrc && (
                                    <Image
                                        src={satisfactionImgSrc}
                                        alt="Smiling satisfied patient"
                                        fill
                                        className="object-cover object-center"
                                        sizes="(max-width: 768px) 100vw, 40vw"
                                        priority
                                    />
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}