import Link from "next/link";
import { ArrowRight, Mail } from "lucide-react";
import { getWhatsAppUrl } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";

interface LuxuryCTABannerProps {
  badgeText?: string;
  title: string;
  description: string;
  primaryCtaText?: string;
  primaryCtaHref?: string;
  primaryCtaIcon?: "mail" | "arrow";
  whatsappMessage?: string;
  whatsappButtonText?: string;
  whatsappNumber?: string;
  className?: string;
  sectionPadding?: string;
  showOrbs?: boolean;
}

export default function LuxuryCTABanner({
  badgeText = "Begin Your Journey",
  title,
  description,
  primaryCtaText = "Inquire Now",
  primaryCtaHref = "/contact",
  primaryCtaIcon = "mail",
  whatsappMessage = "Hello Nhi, I would like to inquire about wedding advisory in Vietnam.",
  whatsappButtonText = "Chat on WhatsApp",
  whatsappNumber,
  className = "",
  sectionPadding = "pb-20 lg:pb-32",
  showOrbs = true,
}: LuxuryCTABannerProps) {
  return (
    <section className={`${sectionPadding} ${className}`}>
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="relative rounded-3xl bg-brand-dark text-brand-sand p-10 sm:p-14 lg:p-20 overflow-hidden border border-brand-dark/20 shadow-xl text-center">
          {/* Background decorative glow */}
          {showOrbs && (
            <>
              <div className="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-brand-gold/10 blur-3xl pointer-events-none" />
              <div className="absolute -bottom-24 -left-24 w-96 h-96 rounded-full bg-brand-gold/10 blur-3xl pointer-events-none" />
            </>
          )}

          <div className="relative z-10 max-w-2xl mx-auto text-center">
            {badgeText && (
              <div className="inline-flex items-center gap-3 justify-center mb-6">
                <span className="w-6 h-px bg-brand-gold/60" />
                <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.25em]">
                  {badgeText}
                </span>
                <span className="w-6 h-px bg-brand-gold/60" />
              </div>
            )}

            <h2 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-6">
              {title}
            </h2>

            <p className="text-brand-sand/80 text-base sm:text-lg leading-relaxed mb-10">
              {description}
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link
                href={primaryCtaHref}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 bg-brand-gold hover:bg-brand-gold-hover text-white px-8 py-3.5 rounded-full font-medium tracking-wide shadow-md transition-all duration-300"
              >
                {primaryCtaIcon === "mail" ? (
                  <Mail className="w-4 h-4" />
                ) : null}
                <span>{primaryCtaText}</span>
                {primaryCtaIcon === "arrow" ? (
                  <ArrowRight className="w-4 h-4" />
                ) : null}
              </Link>
              <a
                href={getWhatsAppUrl(whatsappMessage, whatsappNumber)}
                target="_blank"
                rel="noopener noreferrer"
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 bg-white/10 hover:bg-white/20 text-white border border-white/20 hover:border-white/40 px-8 py-3.5 rounded-full font-medium tracking-wide transition-all duration-300 shadow-sm"
              >
                <WhatsAppIcon className="w-4 h-4 fill-[#25D366] shrink-0" />
                <span>{whatsappButtonText}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}