import Image from "next/image";
import Link from "next/link";
import { banners3, banners4 } from "@/lib/data";
import { Media } from "./Media";

export function BannerGrid4() {
  return (
    <section className="container-site mt-12">
      <div className="grid grid-cols-2 gap-3 md:gap-4">
        {banners4.map((banner) => (
          <Link key={banner.href} href={banner.href} className="relative block overflow-hidden rounded-2xl">
            <div className="relative aspect-[21/9] min-h-[140px]">
              <Image src={banner.image} alt="" fill sizes="50vw" className="object-cover object-center" />
            </div>
            <div
              className="pointer-events-none absolute inset-x-0 bottom-0 h-[70%]"
              style={{
                background:
                  "linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 45%, transparent 100%)",
              }}
            />
            <div className="absolute inset-x-0 bottom-3 md:bottom-4 px-3 text-center text-white">
              <p className="text-base md:text-xl font-extrabold leading-none">{banner.title}</p>
              <p dir="ltr" className="mt-0.5 font-carter text-[9px] md:text-[10px] tracking-[0.4em] text-brand uppercase">
                {banner.english}
              </p>
              <p className="mt-0.5 text-sm md:text-base leading-tight text-white/90">{banner.subtitle}</p>
            </div>
          </Link>
        ))}
      </div>
    </section>
  );
}

export function BannerRow3() {
  return (
    <section className="container-site mt-12">
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 md:gap-4">
        {banners3.map((banner) => (
          <Link key={banner.href} href={banner.href} className="overflow-hidden rounded-2xl">
            <Media src={banner.image} alt="" className="aspect-[2.4/1]" sizes="33vw" />
          </Link>
        ))}
      </div>
    </section>
  );
}