import Image from "next/image";
import { CardHeading, IconButton } from "@/components/shared/CardShared";
import { ChartIcon } from "@/components/shared/icons/ChartIcon";
import { RevealOnView } from "@/components/shared/RevealOnView";
import { valueProps } from "@/data/site-content";

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">
                Engineering
              </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">
                Cloud
              </span>
            </div>

            <div className="relative z-10 mt-[66px] max-w-[460px] lg:mt-[110px]">
              <CardHeading
                title="Build and modernize digital products with full-stack engineering expertise"
                titleClassName="text-white"
                wrapperClassName="mb-0"
              />

              <p className="mt-[24px] max-w-[420px] text-[16px] leading-[1.7] text-white/80">
                Architecture, development, and modernization of enterprise
                applications — engineered to scale with your business.
              </p>
            </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="Unified cloud and data platforms for smarter enterprise decisions."
                titleClassName="text-white"
                wrapperClassName="mb-[18px]"
              />

              <p className="max-w-[448px] text-[16px] leading-[1.85] text-white">
                Consolidate data across systems with secure, scalable platforms
                that turn day-to-day operations into actionable insight.
              </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]">
              <div className="relative z-10 flex flex-col items-start">
                <h4 className="font-[var(--font-sora)] text-[24px] font-bold leading-[1.25] text-white">
                  {valueProps.reliability.title}
                </h4>
                <p className="mt-[10px] text-[15px] leading-[1.6] text-white/85">
                  {valueProps.reliability.description}
                </p>
              </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="Apply AI and data science to automate and augment your operations"
                  titleClassName="text-white max-w-[80%]"
                  wrapperClassName="mb-0"
                />
              </div>

              <div className="relative z-10">
                <p className="max-w-[360px] text-[16px] leading-[1.7] text-white/80">
                  Data platforms and applied AI that turn enterprise data into
                  decision-ready insight.
                </p>
              </div>
            </div>
          </div>
        </RevealOnView>
      </div>
    </section>
  );
}