---
/**
 * SectionHeader Component
 *
 * Renders the standardized eyebrow + heading + description pattern
 * used in every section of the WorkRoot site.
 *
 * @prop {string} badge - Eyebrow label text (e.g. "Why Choose Us")
 * @prop {string} title - Section heading
 * @prop {string} [description] - Optional supporting paragraph
 * @prop {'light' | 'dark'} [theme] - 'light' for white/gray sections, 'dark' for hero-style sections
 * @prop {'primary' | 'accent'} [badgeColor] - Badge color when theme is 'light'
 * @prop {string} [maxWidth] - Max width class for the container (default 'max-w-3xl')
 * @prop {string} [class] - Extra classes
 */

interface Props {
  badge: string;
  title: string;
  description?: string;
  theme?: 'light' | 'dark';
  badgeColor?: 'primary' | 'accent';
  maxWidth?: string;
  class?: string;
}

const {
  badge,
  title,
  description,
  theme = 'light',
  badgeColor = 'primary',
  maxWidth = 'max-w-3xl',
  class: extraClass = '',
} = Astro.props;

const isLight = theme === 'light';

const badgeClasses: Record<string, string> = {
  'primary-light': 'bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
  'accent-light':  'bg-accent-50 text-accent-700 dark:bg-accent-900/40 dark:text-accent-300',
  'primary-dark':  'bg-primary-400/20 text-primary-300',
  'accent-dark':   'bg-accent-400/20 text-accent-300',
};

const badgeKey = `${badgeColor}-${theme}`;
const badgeClass = badgeClasses[badgeKey] ?? badgeClasses['primary-light'];

const titleClass = isLight
  ? 'text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-50 mb-6'
  : 'text-4xl sm:text-5xl font-bold text-white mb-6';

const descClass = isLight
  ? 'text-xl text-secondary-600 dark:text-secondary-400'
  : 'text-xl text-secondary-300';

const containerClass = [
  'text-center mx-auto mb-20',
  maxWidth,
  extraClass,
].filter(Boolean).join(' ');
---

<div class={containerClass}>
  <span class={`inline-block px-4 py-2 rounded-full text-sm font-bold uppercase tracking-wider mb-4 ${badgeClass}`}>
    {badge}
  </span>
  <h2 class={titleClass}>{title}</h2>
  {description && (
    <p class={descClass}>{description}</p>
  )}
</div>
