"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
const VP = { once: true, amount: 0.25 } as const;

const stagger = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.13 } },
};
const textReveal = {
  hidden: { opacity: 0, y: 18 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.52, ease: EASE } },
};
const buttonReveal = {
  hidden: { opacity: 0, y: 12 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.42, ease: EASE } },
};
const decorReveal = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { duration: 1.1, delay: 0.38 } },
};

type CTABannerProps = {
  badge?: { icon: string; label: string };
  heading: React.ReactNode;
  body: string;
  primary: { href: string; icon: string; label: string };
  secondary: { href: string; icon: string; label: string };
  decorations?: string[];
};

export function CTABanner({ badge, heading, body, primary, secondary, decorations }: CTABannerProps) {
  return (
    <section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
      <motion.div
        className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] via-[#2B0040] to-[#0A000D] text-white"
        variants={stagger}
        initial="hidden"
        whileInView="visible"
        viewport={VP}
      >
        <div className="px-6 py-12 md:px-10 md:py-14 lg:px-14 xl:py-12 text-center relative">
          {decorations?.map((grad, i) => (
            <motion.div
              key={i}
              className="absolute inset-0 pointer-events-none"
              style={{ background: `radial-gradient(${grad})` }}
              variants={decorReveal}
            />
          ))}

          <div className="relative z-10 max-w-2xl mx-auto">
            {badge && (
              <motion.span
                className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/15 text-white/70 text-xs font-black uppercase tracking-widest mb-6"
                variants={textReveal}
              >
                <MaterialIcon icon={badge.icon} size={14} />
                {badge.label}
              </motion.span>
            )}

            <motion.h2
              className="font-display text-3xl md:text-4xl xl:text-5xl font-black mb-4 tracking-tight leading-tight"
              variants={textReveal}
            >
              {heading}
            </motion.h2>

            <motion.p
              className="text-sm md:text-base text-white/70 mb-8 leading-relaxed max-w-lg mx-auto"
              variants={textReveal}
            >
              {body}
            </motion.p>

            <motion.div className="flex flex-wrap justify-center gap-3.5" variants={buttonReveal}>
              <Link
                href={primary.href}
                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
              >
                <MaterialIcon icon={primary.icon} size={18} />
                <span>{primary.label}</span>
              </Link>
              <Link
                href={secondary.href}
                className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
              >
                <MaterialIcon icon={secondary.icon} size={18} />
                <span>{secondary.label}</span>
              </Link>
            </motion.div>
          </div>
        </div>
      </motion.div>
    </section>
  );
}
