import Image from "next/image";
import { CardHeading, IconButton } from "@/components/shared/CardShared";
import { ChartIcon } from "@/components/shared/icons/ChartIcon";
import { Counter } from "@/components/shared/Counter";
import { RevealOnView } from "@/components/shared/RevealOnView";

const socialIcons = [
  {
    src: "/images/aiero/messenger-logo-1.png",
    alt: "Messenger",
    width: 57,
    height: 59,
  },
  {
    src: "/images/aiero/skype-logo.png",
    alt: "Skype",
    width: 56,
    height: 57,
  },
  {
    src: "/images/aiero/telegram-symbol-1.png",
    alt: "Telegram",
    width: 59,
    height: 58,
  },
  {
    src: "/images/aiero/discord-1.png",
    alt: "Discord",
    width: 54,
    height: 54,
  },
];

export function CardsGrid() {
  return (
    <section className="px-[20px] pb-[20px]">
      <div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 xl:grid-cols-[1fr_1fr_0.73fr]">
        
        {/* Card 1 */}
        <RevealOnView delay={0}>
        <div className="aiero-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-aiero-card-purple p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
          <Image
            src="/images/aiero/assistant-artificial-intelligence-min.png"
            alt=""
            className="pointer-events-none absolute right-[-10px] top-[-10px] h-auto w-[150px] object-contain object-right-top transition-transform duration-500 group-hover:scale-105 lg:w-[190px]"
            width={220}
            height={274}
          />
          
          <div className="relative z-10 flex gap-[6px]">
            <span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-aiero-teal hover:text-aiero-teal">
              Solutions
            </span>
            <span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-aiero-teal hover:text-aiero-teal">
              Plugins
            </span>
          </div>

          <div className="relative z-10 mt-[66px] max-w-[460px] lg:mt-[110px]">
            <CardHeading
              title="Transform customer support with intelligent AI chatbots for seamless and effortless service"
              titleClassName="text-white"
              wrapperClassName="mb-0"
            />
            
            <div className="mt-[36px] flex items-center gap-[20px]">
              {socialIcons.map((icon) => (
                <Image
                  key={icon.alt}
                  src={icon.src}
                  alt={icon.alt}
                  width={icon.width}
                  height={icon.height}
                  className="h-auto w-auto"
                />
              ))}
            </div>
          </div>
          
          <IconButton />
        </div>
        </RevealOnView>

        {/* Card 2 */}
        <RevealOnView delay={110}>
        <div className="aiero-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-aiero-card-purple-2 p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
          <div className="absolute inset-0 bg-aiero-card-purple-2" />
          <div className="absolute inset-0 bg-[url('/images/aiero/c0eb2845-min.png')] bg-[length:60%] bg-right-bottom bg-no-repeat transition-transform duration-500 group-hover:scale-105" />
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#454f88]/16" />
          
          <div className="relative z-10 mb-[54px] max-w-[515px]">
            <div className="mb-[24px] inline-flex h-[38px] w-[38px] items-center justify-center">
              <ChartIcon className="h-full w-full text-white" />
            </div>
            
            <CardHeading
              title="All-in-One AI solutions dashboard for smarter business insights & innovation."
              titleClassName="text-white"
              wrapperClassName="mb-[18px]"
            />
            
            <p className="max-w-[448px] text-[16px] leading-[1.85] text-white">
              Explore our comprehensive AI solutions dashboard designed to
              provide actionable business insights and drive innovation
            </p>
          </div>
          
          <IconButton />
        </div>
        </RevealOnView>

        {/* Card 3 (spans 2 columns) */}
        <RevealOnView className="md:col-span-2 xl:col-span-1" delay={220}>
        <div className="flex h-full flex-col gap-[20px]">
          
          {/* Card 3 - Top half */}
          <div className="aiero-card relative flex min-h-[176px] flex-col justify-center overflow-hidden rounded-[25px] bg-aiero-card-lavender p-[40px] lg:p-[45px_50px]">
            <a href="#" className="absolute inset-0 z-20" aria-label="Happy clients" />
            <div className="relative z-10 flex flex-col items-start">
              <div>
                <Counter
                  target={500}
                  suffix="K+"
                  numberClassName="font-[var(--font-manrope)] text-[82px] font-extrabold leading-none tracking-[-0.04em] text-transparent"
                  style={{
                    WebkitTextStroke: "1px rgba(255,255,255,0.16)",
                    backgroundImage:
                      "linear-gradient(180deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.06) 90%)",
                  }}
                />
              </div>
              <div className="mt-[4px]">
                <h4 className="font-[var(--font-manrope)] text-[16px] font-medium leading-[20px] text-white">
                  Happy clients
                </h4>
              </div>
            </div>
          </div>

          {/* Card 3 - Bottom half */}
          <div className="aiero-card group relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-aiero-card-dark p-[40px_35px_45px_35px] lg:p-[50px_45px_45px_45px]">
            <div
              className="absolute inset-0 bg-[url('/images/aiero/Layer_2-min.jpg')] bg-cover bg-center transition-all duration-500 group-hover:scale-105"
            />
            
            <div className="relative z-10 mb-[26px]">
              <CardHeading
                title="Unlock your full potential with effortless OpenAI integration solutions"
                titleClassName="text-white max-w-[80%]"
                wrapperClassName="mb-0"
              />
            </div>
            
            <div className="relative z-10">
              <Image
                src="/images/aiero/openai-logo-1.png"
                alt="OpenAI"
                width={272}
                height={71}
                className="h-auto w-[138px] lg:w-[152px]"
              />
            </div>
          </div>
          
        </div>
        </RevealOnView>

      </div>
    </section>
  );
}
