// components/sections/SectionHeading.tsx
// Reusable section header with category label, title, and subtitle
// 5 themes

type ThemeKey = 'default' | 'warm' | 'professional' | 'ocean' | 'forest';

interface ThemeStyles {
  headingColor: string;
  subtitleColor: string;
  badgeBg: string;
  badgeText: string;
  badgeBorder: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    headingColor: 'text-white',
    subtitleColor: 'text-text-light-gray',
    badgeBg: 'bg-crimson-red/10',
    badgeText: 'text-crimson-red',
    badgeBorder: 'border-crimson-red/20',
  },
  warm: {
    headingColor: 'text-slate-800',
    subtitleColor: 'text-slate-600',
    badgeBg: 'bg-orange-50',
    badgeText: 'text-orange-600',
    badgeBorder: 'border-orange-200',
  },
  professional: {
    headingColor: 'text-slate-800',
    subtitleColor: 'text-slate-500',
    badgeBg: 'bg-slate-100',
    badgeText: 'text-slate-700',
    badgeBorder: 'border-slate-200',
  },
  ocean: {
    headingColor: 'text-slate-800',
    subtitleColor: 'text-slate-600',
    badgeBg: 'bg-blue-50',
    badgeText: 'text-blue-600',
    badgeBorder: 'border-blue-200',
  },
  forest: {
    headingColor: 'text-slate-800',
    subtitleColor: 'text-slate-600',
    badgeBg: 'bg-emerald-50',
    badgeText: 'text-emerald-600',
    badgeBorder: 'border-emerald-200',
  },
};

interface SectionHeadingProps {
  categoryLabel?: string;
  title: string;
  subtitle?: string;
  align?: 'left' | 'center';
  anchorId?: string;
  buttonText?: string;
  buttonUrl?: string;
  buttonStyle?: string;
  theme?: ThemeKey;
}

export function SectionHeading({ categoryLabel, title, subtitle, align = 'left', anchorId, buttonText = '', buttonUrl = '', buttonStyle = 'filled', theme = 'default' }: SectionHeadingProps) {
  const textAlign = align === 'center' ? 'text-center' : 'text-left';
  const t = THEMES[theme] || THEMES.default;
  
  return (
    <div id={anchorId || undefined} className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 scroll-mt-24">
    <div className={`${textAlign} mb-8`}>
      {categoryLabel && (
        <span className={`inline-block px-4 py-1.5 mb-3 text-xs font-semibold tracking-wider uppercase rounded-full border ${t.badgeBg} ${t.badgeText} ${t.badgeBorder}`}>
          {categoryLabel}
        </span>
      )}
      <h2 className={`text-2xl md:text-3xl font-bold leading-tight ${t.headingColor}`}>
        {title}
      </h2>
      {subtitle && (
        <p className={`mt-3 text-base md:text-lg max-w-3xl leading-relaxed ${t.subtitleColor}`} style={align === 'center' ? { margin: '0.75rem auto 0' } : undefined}>
          {subtitle}
        </p>
      )}
    </div>
    {/* CTA Button */}
    {buttonText && (
      <div className={align === 'center' ? 'text-center mb-8' : 'mb-8'}>
        <a
          href={buttonUrl || '#'}
          className={`inline-flex items-center gap-2 px-6 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 ${
            buttonStyle === 'outlined' ? `border-2 border-current ${t.headingColor} hover:opacity-80`
            : buttonStyle === 'ghost' ? `${t.headingColor} hover:opacity-70 underline underline-offset-4`
            : `bg-crimson-red text-white hover:bg-crimson-red/90 shadow-md`
          }`}
        >
          {buttonText}
        </a>
      </div>
    )}
    </div>
  );
}
