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/tenext/messenger-logo-1.png",
    alt: "Messenger",
    width: 57,
    height: 59,
  },
  {
    src: "/images/tenext/skype-logo.png",
    alt: "Skype",
    width: 56,
    height: 57,
  },
  {
    src: "/images/tenext/telegram-symbol-1.png",
    alt: "Telegram",
    width: 59,
    height: 58,
  },
  {
    src: "/images/tenext/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="tenext-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-purple p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
            <Image
              src="/images/tenext/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-tenext-teal hover:text-tenext-teal">
                Solutions
              </span>
              <span className="rounded-[15px] border border-white px-[20px] py-[5px] text-[12px] text-white transition-colors hover:border-tenext-teal hover:text-tenext-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="tenext-card group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-purple-2 p-[40px_35px_45px_35px] lg:p-[50px_45px_50px_45px]">
            <div className="absolute inset-0 bg-tenext-card-purple-2" />
            <div className="absolute inset-0 bg-[url('/images/tenext/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="tenext-card relative flex min-h-[176px] flex-col justify-center overflow-hidden rounded-[25px] bg-tenext-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="tenext-card group relative flex flex-col justify-between overflow-hidden rounded-[25px] bg-tenext-card-dark p-[40px_35px_45px_35px] lg:p-[50px_45px_45px_45px]">
              <div className="absolute inset-0 bg-[url('/images/tenext/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/tenext/openai-logo-1.png"
                  alt="OpenAI"
                  width={272}
                  height={71}
                  className="h-auto w-[138px] lg:w-[152px]"
                />
              </div>
            </div>
          </div>
        </RevealOnView>
      </div>
    </section>
  );
}