import Image from "next/image";
import Link from "next/link";
import type { Campaign } from "@/lib/campaign";
import { getCampaignHref } from "@/lib/campaign";
import { shouldSkipImageOptimization } from "@/lib/utils/image";
import type { SanityThemeOption } from "@/lib/sanity/queries";
import { PromoCodeCopy } from "./promo-code-copy";

type Props = {
  campaign: Campaign;
  themes: SanityThemeOption[];
};

export function CampaignHomeBanner({ campaign, themes }: Props) {
  const previewThemes = themes.filter((theme) => theme.imageUrl).slice(0, 4);

  return (
    <div className="reveal-soft relative overflow-hidden rounded-[2.3rem] bg-[radial-gradient(circle_at_85%_10%,#4a1f5c_0%,#241030_45%,#140a1c_100%)] px-6 py-10 text-white shadow-[0_26px_56px_rgba(20,10,28,0.35)] md:px-10 md:py-12">
      <div className="pointer-events-none absolute -left-16 -top-16 h-56 w-56 rounded-full bg-[#ff8a1f33] blur-3xl" />
      <div className="pointer-events-none absolute -bottom-20 right-1/3 h-48 w-48 rounded-full bg-[#8b3fd933] blur-3xl" />

      <div className="relative grid items-center gap-8 md:grid-cols-[1.1fr_1fr]">
        <div className="space-y-5">
          <p className="inline-flex rounded-full border border-[#ff8a1f80] bg-[#ff8a1f1a] px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-[#ffb15c]">
            🎃 {campaign.eyebrow} · {campaign.discountLabel}
          </p>
          <h2 className="whitespace-pre-line font-serif text-4xl leading-[1] md:text-5xl">{campaign.title}</h2>
          <p className="max-w-lg text-[15px] leading-relaxed text-[#e9dcf2]">{campaign.subtitle}</p>

          <div className="flex flex-wrap items-center gap-3">
            <PromoCodeCopy code={campaign.promoCode} />
            <span className="text-xs text-[#cbb8d8]">{campaign.discountLabel} {campaign.endsLabel}</span>
          </div>

          <Link
            href={getCampaignHref(campaign)}
            className="inline-flex rounded-full bg-[#ff8a1f] px-6 py-3 text-sm font-bold text-[#1b0f24] shadow-[0_12px_30px_rgba(255,138,31,0.35)] transition hover:-translate-y-[1px] hover:bg-[#ff9d42]"
          >
            {campaign.ctaLabel}
          </Link>
        </div>

        {previewThemes.length > 0 ? (
          <Link href={getCampaignHref(campaign)} className="grid grid-cols-2 gap-3" aria-label={campaign.ctaLabel}>
            {previewThemes.map((theme, index) => (
              <div
                key={theme.title}
                className={`relative aspect-square overflow-hidden rounded-[1.4rem] border border-[#ffffff26] ${index % 2 === 1 ? "translate-y-4" : ""}`}
              >
                <Image
                  src={theme.imageUrl!}
                  alt={theme.title}
                  fill
                  unoptimized={shouldSkipImageOptimization(theme.imageUrl!)}
                  sizes="(max-width: 768px) 45vw, 22vw"
                  className="object-cover transition duration-500 hover:scale-105"
                />
              </div>
            ))}
          </Link>
        ) : null}
      </div>
    </div>
  );
}