---
/**
 * Card Component
 *
 * A versatile card wrapper with predefined style variants matching
 * the WorkRoot design system.
 *
 * @prop {'feature' | 'service' | 'surface' | 'dark' | 'plain'} variant
 *   - 'feature'  → gradient bg, hover lift + border glow (benefits grid)
 *   - 'service'  → white, rounded-3xl, heavy shadow on hover (services grid)
 *   - 'surface'  → secondary-50 bg, subtle hover shadow (contact info, small cards)
 *   - 'dark'     → white/5 glassmorphism on dark backgrounds (how-it-works steps)
 *   - 'plain'    → no preset styles, just the slot (full custom)
 * @prop {string} [padding] - Override default padding (e.g. 'p-6')
 * @prop {string} [class] - Extra classes to merge in
 */

interface Props {
  variant?: 'feature' | 'service' | 'surface' | 'dark' | 'plain';
  padding?: string;
  class?: string;
}

const {
  variant = 'feature',
  padding,
  class: extraClass = '',
} = Astro.props;

const variantClasses: Record<string, string> = {
  'feature': [
    'group relative bg-gradient-to-br from-secondary-50 to-white',
    'dark:from-secondary-800 dark:to-secondary-900',
    'rounded-2xl border border-secondary-100 dark:border-secondary-700',
    'hover:border-primary/30 dark:hover:border-primary-500/40 hover:shadow-2xl',
    'transition-all duration-500 hover:-translate-y-2',
  ].join(' '),

  'service': [
    'group relative bg-white dark:bg-secondary-800 rounded-3xl shadow-lg',
    'border-2 border-secondary-100 dark:border-secondary-700',
    'hover:border-primary-400 dark:hover:border-primary-500 hover:shadow-2xl',
    'transition-all duration-500 overflow-hidden',
  ].join(' '),

  'surface': [
    'bg-secondary-50 dark:bg-secondary-800 rounded-xl',
    'border border-secondary-200 dark:border-secondary-700',
    'hover:shadow-lg transition-shadow duration-300',
  ].join(' '),

  'dark': [
    'group relative bg-white/5 backdrop-blur-sm rounded-2xl',
    'border border-white/10',
    'hover:bg-white/10 hover:border-primary-400/50',
    'transition-all duration-500',
  ].join(' '),

  'plain': '',
};

const defaultPadding: Record<string, string> = {
  'feature': 'p-8',
  'service': 'p-10',
  'surface': 'p-6',
  'dark':    'p-8',
  'plain':   '',
};

const paddingClass = padding ?? defaultPadding[variant];

const classes = [
  variantClasses[variant],
  paddingClass,
  extraClass,
].filter(Boolean).join(' ');
---

<div class={classes}>
  <slot />
</div>
