"use client";

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

export default function AestheticSafety({ heading, description, cards }: AestheticSafetyProps) {
    // Helper to format/capitalize the first letter of each card title
    const formatCardTitle = (title: string) => {
        if (!title) return "";
        return title.trim().charAt(0).toUpperCase() + title.trim().slice(1);
    };

    return (
        <section className="mb-16 md:mb-24 xl:mb-30">
            <div className="container">
                {/* 12-Column Responsive CSS Grid */}
                <div className="grid grid-cols-12 gap-x-5 gap-y-6 md:gap-y-8 xl:gap-y-10 items-stretch">
                    {/* Left Column: Heading and Description (Spans 12 on mobile, 4 on desktop) */}
                    <div className="col-span-12 xl:col-span-4 flex flex-col justify-center mb-6 md:mb-0 md:pr-6 ">
                        <h2 className="text-[32px] md:text-[40px] text-[#00204F] font-medium leading-[1.15] tracking-[-0.5px] mb-4">
                            {heading}
                        </h2>
                        <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-relaxed">
                            {description}
                        </p>
                    </div>

                    {/* Right Columns: Cards (Spans 12 on mobile, 6 on tablet, 4 on desktop each) */}
                    {cards?.map((card, index) => {
                        const iconSrc = getImageSrc(card.icon);
                        return (
                            <div
                                key={index}
                                className="col-span-12 md:col-span-6 xl:col-span-4"
                            >
                                <article className="bg-[#F2F4F6] rounded-[16px] md:rounded-[32px] p-4 md:p-5 xl:p-6 flex flex-col flex-1 w-full transition-shadow duration-300">
                                    {/* Figure Tag for the white circle as per Figma design */}
                                    {iconSrc && (
                                        <figure className="w-16 h-16 xl:w-18 xl:h-18 rounded-full bg-white flex items-center justify-center shadow-sm mb-6 md:mb-8 xl:mb-12 shrink-0">
                                            <Image
                                                src={iconSrc}
                                                width={40}
                                                height={40}
                                                alt={card.title || "safety icon"}
                                                className="object-contain"
                                            />
                                        </figure>
                                    )}

                                {/* Card Text Content */}
                                <h3 className="text-[18px] md:text-[20px] font-bold text-[#00204F] leading-snug mb-3">
                                    {formatCardTitle(card.title)}
                                </h3>
                                <p className="text-[14px] md:text-[15px] text-[#334D72] leading-relaxed">
                                    {card.description}
                                </p>
                            </article>
                        </div>
                    );
                })}
                </div>
            </div>
        </section>
    );
}