"use client";

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

export default function WhatWeOffer({
    first_image,
    second_image,
    title,
    heading,
    sub_desc,
    sub_text,
    cta_text,
    cosmetic_med_cards,
}: WhatWeOfferProps) {
    // Split the cards into Injections and Laser blocks
    const injectionCards = cosmetic_med_cards?.slice(0, 4) || [];
    const laserCards = cosmetic_med_cards?.slice(4, 8) || [];


    return (
        <section className="bg-[linear-gradient(180deg,_#FFF_0%,_#E9F1FF_100%)] pb-16 md:pb-24 xl:pb-32 mb-16 md:mb-24 xl:mb-32">
            <div className="container">
                {/* Header Section */}
                <div className="md:text-center mb-6 md:mb-10 lg:mb-20 max-w-[700px] mx-auto">
                    <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[1px] uppercase block mb-2 md:mb-3 animate-fade-in-up">
                        {title}
                    </span>
                    <h2 className="text-[32px] md:text-[42px] xl:text-[48px] text-[#00204F] font-medium leading-tight mb-3 md:mb-4 tracking-[-0.5px]">
                        {heading}
                    </h2>
                    <p className="text-[18px] md:text-[20px] text-[#334D72] leading-[1.4] font-normal">
                        {sub_desc}
                    </p>
                </div>

                {/* Main Content Blocks */}
                <div className="flex flex-col gap-16 md:gap-24 lg:gap-28">
                    {/* Block 1: Injections (Image Left, Cards Right on Desktop) */}
                    <div className="grid grid-cols-12 gap-6 md:gap-10 items-stretch">
                        {/* Big Image Card */}
                        <div className="col-span-12 md:col-span-6 flex order-1">
                            <figure className="relative w-full aspect-[1.3/1] lg:aspect-auto lg:h-full min-h-[300px] lg:min-h-[560px] rounded-[24px] md:rounded-[32px] overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
                                {first_image && (
                                    <Image
                                        src={first_image}
                                        alt="Aesthetic Injections Treatment"
                                        fill
                                        sizes="(max-width: 1024px) 100vw, 40vw"
                                        priority
                                        className="object-cover hover:scale-[1.03] transition-transform duration-500"
                                    />
                                )}
                            </figure>
                        </div>

                        {/* Cards List */}
                        <div className="col-span-12 md:col-span-6 flex flex-col justify-between gap-4 order-2">
                            {injectionCards.map((card, idx) => (
                                <article
                                    key={idx}
                                    className="bg-white rounded-[18px] md:rounded-[22px] border border-[#E5E9ED] p-5 md:p-6 flex flex-col justify-center transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 hover:border-[#1718FF]/20"
                                >
                                    <span className="text-[12px] md:text-[14px] font-bold text-[#1718FF] bg-[#ECF3FF] px-4 py-1 rounded-[100px] w-fit tracking-[0.5px] uppercase mb-2">
                                        {card.tags}
                                    </span>
                                    <h3 className="text-[20px] md:text-[24px] font-bold text-[#00204F] mb-2">
                                        {card.heading}
                                    </h3>
                                    <p className="text-[16px] md:text-[18px] text-[#334D72] font-medium leading-[1.4] ">
                                        {card.description}
                                    </p>
                                </article>
                            ))}
                        </div>
                    </div>

                    {/* Block 2: Laser (Cards Left, Image Right on Desktop) */}
                    <div className="grid grid-cols-12 gap-6 md:gap-10 items-stretch">
                        {/* Big Image Card */}
                        <div className="col-span-12 md:col-span-6 flex order-1 lg:order-2">
                            <figure className="relative w-full aspect-[1.3/1] lg:aspect-auto lg:h-full min-h-[300px] lg:min-h-[560px] rounded-[24px] md:rounded-[32px] overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
                                {second_image && (
                                    <Image
                                        src={second_image}
                                        alt="Laser and Skin Treatments"
                                        fill
                                        sizes="(max-width: 1024px) 100vw, 40vw"
                                        className="object-cover hover:scale-[1.03] transition-transform duration-500"
                                    />
                                )}
                            </figure>
                        </div>

                        {/* Cards List */}
                        <div className="col-span-12 md:col-span-6 flex flex-col justify-between gap-4 order-2 lg:order-1">
                            {laserCards.map((card, idx) => (
                                <article
                                    key={idx}
                                    className="bg-white rounded-[18px] md:rounded-[22px] border border-[#E5E9ED] p-5 md:p-6 flex flex-col justify-center transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 hover:border-[#1718FF]/20"
                                >
                                    <span className="text-[12px] md:text-[14px] font-bold text-[#1718FF] bg-[#ECF3FF] px-4 py-1 rounded-[100px] w-fit tracking-[0.5px] uppercase mb-2">
                                        {card.tags}
                                    </span>
                                    <h3 className="text-[20px] md:text-[24px] font-bold text-[#00204F] mb-2">
                                        {card.heading}
                                    </h3>
                                    <p className="text-[16px] md:text-[18px] text-[#334D72] font-medium leading-[1.4]">
                                        {card.description}
                                    </p>
                                </article>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Bottom CTA Block */}
                <div className="mt-16 md:mt-24 lg:mt-28 text-center flex flex-col items-center">
                    <h4 className="text-[24px] xl:text-[32px] font-bold text-[#00204F] mb-6 tracking-[-0.5px] max-w-[320px] md:max-w-none">
                        {sub_text}
                    </h4>

                    <BookAnAppointmentModal
                        buttonBgClass="bg-[#1718FF]"
                        buttonTextClass="text-[#fff]"
                        buttonText={cta_text}
                        arrowIcon={WhiteArrow}
                    />
                </div>
            </div>
        </section>
    );
}