// components/sections/BannerCTA.tsx
// Full-width promotional banner with headline, description, and CTA button
// Supports 3 design themes: gradient, solid, outlined

import Link from 'next/link';
import { getLinkAttributes, type LinkTarget, type LinkRel } from '@/lib/puck/linkHelpers';

type ThemeKey = 'gradient' | 'solid' | 'outlined' | 'ocean' | 'forest';

interface ThemeStyles {
  bg: string;
  decorCircle1: string;
  decorCircle2: string;
  headline: string;
  description: string;
  ctaBtn: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  gradient: {
    bg: 'bg-gradient-to-r from-brand-primary to-brand-action',
    decorCircle1: 'bg-white/10',
    decorCircle2: 'bg-white/5',
    headline: 'text-white',
    description: 'text-white/80',
    ctaBtn: 'bg-white text-crimson-red hover:bg-gray-50 shadow-lg hover:shadow-xl',
  },
  solid: {
    bg: 'bg-gradient-to-br from-slate-800 via-slate-900 to-slate-800',
    decorCircle1: 'bg-amber-400/10',
    decorCircle2: 'bg-amber-400/5',
    headline: 'text-white',
    description: 'text-slate-300',
    ctaBtn: 'bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 hover:from-amber-500 hover:to-amber-600 shadow-lg shadow-amber-400/20 hover:shadow-xl',
  },
  outlined: {
    bg: 'bg-gradient-to-r from-orange-500 via-red-500 to-pink-500',
    decorCircle1: 'bg-white/15',
    decorCircle2: 'bg-white/10',
    headline: 'text-white',
    description: 'text-white/85',
    ctaBtn: 'bg-white text-orange-600 hover:bg-orange-50 shadow-lg shadow-orange-900/20 hover:shadow-xl',
  },
  ocean: {
    bg: 'bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600',
    decorCircle1: 'bg-white/15',
    decorCircle2: 'bg-white/10',
    headline: 'text-white',
    description: 'text-white/85',
    ctaBtn: 'bg-white text-blue-600 hover:bg-blue-50 shadow-lg shadow-blue-900/20 hover:shadow-xl',
  },
  forest: {
    bg: 'bg-gradient-to-r from-emerald-600 via-teal-600 to-green-700',
    decorCircle1: 'bg-white/15',
    decorCircle2: 'bg-white/10',
    headline: 'text-white',
    description: 'text-white/85',
    ctaBtn: 'bg-white text-emerald-600 hover:bg-emerald-50 shadow-lg shadow-emerald-900/20 hover:shadow-xl',
  },
};

interface BannerCTAProps {
  headline: string;
  description: string;
  ctaText: string;
  ctaUrl: string;
  bgImage?: string;
  theme?: ThemeKey;
  openInNewTab?: LinkTarget;
  relAttribute?: LinkRel;
}

export function BannerCTA({ headline, description, ctaText, ctaUrl, bgImage, theme = 'gradient', openInNewTab = 'same', relAttribute = 'follow' }: BannerCTAProps) {
  const t = THEMES[theme] || THEMES.gradient;
  const linkAttrs = getLinkAttributes({ openInNewTab, relAttribute });

  return (
    <section className="w-full py-8 md:py-12">
    <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className={`relative overflow-hidden rounded-2xl ${t.bg}`}>
      {bgImage && (
        <div
          className="absolute inset-0 opacity-20 bg-cover bg-center"
          style={{ backgroundImage: `url(${bgImage})` }}
        />
      )}
      {/* Decorative circles */}
      <div className={`absolute -top-10 -right-10 w-40 h-40 rounded-full ${t.decorCircle1}`} />
      <div className={`absolute -bottom-8 -left-8 w-32 h-32 rounded-full ${t.decorCircle2}`} />

      <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6 px-8 py-10 md:px-12 md:py-14">
        <div className="text-center md:text-left max-w-xl">
          <h3 className={`text-2xl md:text-3xl font-bold leading-tight ${t.headline}`}>
            {headline}
          </h3>
          <p className={`mt-3 text-base md:text-lg leading-relaxed ${t.description}`}>
            {description}
          </p>
        </div>
        <Link
          href={ctaUrl || '#'}
          {...linkAttrs}
          className={`inline-flex items-center gap-2 px-8 py-4 font-bold rounded-xl transition-all duration-300 text-lg whitespace-nowrap ${t.ctaBtn}`}
        >
          {ctaText}
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </Link>
      </div>
    </div>
    </div>
    </section>
  );
}
