"use client";

import Image from "next/image";
import Link from "next/link";

const CTA_IMAGES = {
  main: "/images/cta/cta-01.webp",
  kitty: "/images/cta/cta-02.webp",
  doggy: "/images/cta/cta-03.webp",
} as const;

export function CtaSection() {
  return (
    <section
      aria-label="Promotional offers and shop by pet"
      className="w-full max-w-full min-w-0 overflow-x-hidden"
    >
      <div className="mx-auto max-w-7xl min-w-0">
        <div className="grid min-w-0 grid-cols-2 gap-4 overflow-x-hidden lg:grid-cols-3 lg:grid-rows-2 lg:gap-5">
          {/* Main CTA — Up to 45% OFF */}
          <section
            aria-labelledby="cta-main"
            className="relative col-span-2 flex min-h-[280px] flex-col justify-between overflow-hidden rounded-[var(--radius)] p-6 md:p-8 lg:row-span-2"
          >
            <div className="absolute inset-0 z-0">
              <Image
                src={CTA_IMAGES.main}
                alt=""
                fill
                className="object-cover brightness-[0.92] contrast-[1.05] saturate-[0.88]"
                sizes="(max-width: 1024px) 100vw, 66vw"
              />
            </div>
            <div
              className="absolute inset-0 z-[1] bg-gradient-to-r from-[var(--brand-mist)]/95 via-[var(--brand-mist)]/40 to-transparent"
              aria-hidden
            />
            <div className="relative z-10 flex min-h-0 flex-1 flex-col justify-center pr-4 md:max-w-[58%] md:pr-8">
              <p className="font-sans text-base font-normal text-[var(--foreground)] md:text-lg">
                Up to
              </p>
              <h2
                id="cta-main"
                className="mt-1 font-[family-name:var(--font-fraunces)] text-4xl font-bold leading-tight tracking-tight text-[var(--foreground)] drop-shadow-sm md:text-5xl lg:text-6xl lg:leading-tight"
              >
                <span className="relative inline-block border-b-4 border-[var(--warm)] pb-1">
                  25% OFF
                </span>
              </h2>
              <p className="mt-3 font-sans text-base text-[var(--foreground)] md:text-lg">
                Thousands of pet essentials
              </p>
              <Link
                href="/shop"
                className="mt-6 inline-flex min-h-[48px] w-fit items-center justify-center gap-2 rounded-full bg-[#e89120] px-6 py-3 font-sans text-base font-semibold text-white shadow-lg transition-[transform,box-shadow] duration-[var(--transition-base)] hover:scale-[1.02] hover:bg-[#d97f0f] hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-[#38a99f] focus:ring-offset-2 md:px-8 md:py-4"
              >
                Shop Pet Deals
                <span aria-hidden>→</span>
              </Link>
            </div>
            <div className="relative z-10 mt-4 flex items-center gap-1 font-sans text-[var(--muted)] text-sm" aria-hidden>

              <span>Healthy pets, happy homes.</span>
            </div>
          </section>


          {/* Doggy CTA */}
          <section
            aria-labelledby="cta-doggy"
            className="relative h-[130px] overflow-hidden rounded-[var(--radius)] p-3 md:h-[160px] md:p-6 lg:h-auto"
          >
            <div className="absolute inset-0 z-0 bg-[var(--brand-dark)]/70" aria-hidden />
            <div className="relative z-10">
              <h2
                id="cta-doggy"
                className="font-[family-name:var(--font-fraunces)] text-lg font-bold text-white md:text-2xl"
              >
                Shop Dog Essentials
              </h2>
              <Link
                href="/shop/dogs"
                className="mt-3 inline-flex min-h-[44px] w-fit items-center justify-center gap-1.5 rounded-full bg-[#f4a13a] px-4 py-2.5 font-sans text-sm font-bold text-[#1a2e2d] shadow-lg transition-[transform,box-shadow] duration-[var(--transition-base)] hover:scale-[1.02] hover:bg-[#f5ad4d] hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[var(--brand-dark)] md:mt-4 md:min-h-[48px] md:px-8 md:py-4 md:text-base"
              >
                Shop Now
                <span aria-hidden>→</span>
              </Link>
            </div>
            <div className="absolute inset-0">
              <Image
                src={CTA_IMAGES.kitty}
                alt=""
                fill
                className="object-cover"
                sizes="(max-width: 768px) 50vw, 33vw"
              />
            </div>
          </section>

          {/* Kitty CTA */}
          <section
            aria-labelledby="cta-kitty"
            className="relative h-[130px] overflow-hidden rounded-[var(--radius)] p-3 md:h-[160px] md:p-6 lg:h-auto"
          >
            <div className="absolute inset-0 z-0 bg-[var(--brand-dark)]/70" aria-hidden />
            <div className="relative z-10">
              <h2
                id="cta-kitty"
                className="font-[family-name:var(--font-fraunces)] text-lg font-bold text-white md:text-2xl"
              >
                Shop Cat Essentials
              </h2>
              <Link
                href="/shop/cats"
                className="mt-3 inline-flex min-h-[44px] w-fit items-center justify-center gap-1.5 rounded-full bg-[#f4a13a] px-4 py-2.5 font-sans text-sm font-bold text-[#1a2e2d] shadow-lg transition-[transform,box-shadow] duration-[var(--transition-base)] hover:scale-[1.02] hover:bg-[#f5ad4d] hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[var(--brand-dark)] md:mt-4 md:min-h-[48px] md:px-8 md:py-4 md:text-base"
              >
                Shop Now
                <span aria-hidden>→</span>
              </Link>
            </div>
            <div className="absolute inset-0">
              <Image
                src={CTA_IMAGES.doggy}
                alt=""
                fill
                className="object-cover"
                sizes="(max-width: 768px) 50vw, 33vw"
              />
            </div>
          </section>


        </div>
      </div>
    </section>
  );
}