"use client";

import { AestheticSupportProps } from "@/types/hyluronic-acid";

export default function AestheticProducts({
    title,
    heading,
    description,
    cards_content,
    className,
    columns,
}: AestheticSupportProps) {

    return (
        <section className={`${className} bg-[#F2F4F6] py-16 md:py-24 mb-16 md:mb-24 xl:mb-32`}>
            <div className="container mx-auto px-4 max-w-7xl">
                {/* Header Grid Section */}
                <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-12 mb-8 md:mb-16 items-end">
                    {/* Left side: Subtitle and Main Heading */}
                    <div className="col-span-1 md:col-span-6">
                        {title && (
                            <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[0.5px] uppercase block mb-3">
                                {title}
                            </span>
                        )}
                        <h2 className="text-[32px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-tight tracking-[-0.5px]">
                            {heading}
                        </h2>
                    </div>

                    {/* Right side: Top Section Description */}
                    <div className="col-span-1 md:col-span-6 md:pb-1">
                        <p className="text-[16px] md:text-[18px] text-[#334D72] leading-relaxed font-normal">
                            {description}
                        </p>
                    </div>
                </div>

                {/* 4-Card Responsive Grid Layout (Desktop-first approach) */}
                <div className="grid grid-cols-12 gap-6 max-md:gap-4">
                    {cards_content?.map((card, index) => (
                        <div
                            key={index}
                            className={` col-span-12 md:col-span-${columns} flex`}
                        >
                            <article className="w-full bg-white p-6 rounded-[16px] shadow-sm border border-[#E9EFF6] flex flex-col h-full transition-transform duration-300">
                                {/* Tag Pill */}
                                {card.tag && (
                                    <span className="inline-block text-[12px] md:text-[14px] font-bold text-[#1718FF] bg-[#E8F1FF] border border-[#B3CCFF] rounded-[100px] px-3 py-1 mb-4 uppercase w-fit">
                                        {card.tag}
                                    </span>
                                )}

                                {/* Card Title */}
                                <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold leading-snug mb-3">
                                    {card.title}
                                </h3>

                                {/* Divider Line */}
                                <div className="border-b border-[#E8EEF5] mb-4"></div>

                                {/* Card Description */}
                                <p className="text-[14px] md:text-[16px] text-[#334D72] font-medium leading-relaxed mt-1">
                                    {card.description}
                                </p>
                            </article>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}