/**
 * themes.ts
 * Visual theme definitions for carousel slides.
 * Each theme controls colors, typography, and card styles used in React templates.
 */

export interface Theme {
  name: string;
  bgColor: string;           // CSS color for slide background
  accentColor: string;       // Primary accent (borders, highlights, metrics)
  textColor: string;         // Main body text
  subtextColor: string;      // Secondary/subtitle text
  fontFamily: string;        // CSS font-family string
  cardBg: string;            // Background for card elements within slides
  metricColor: string;       // Color for hero metric numbers
  borderColor: string;       // Subtle border color
  // Tailwind class equivalents for use in React templates
  tw: {
    bg: string;
    accent: string;          // text-* for accent
    accentBg: string;        // bg-* for accent backgrounds
    text: string;
    subtext: string;
    cardBg: string;
    metric: string;
    border: string;
  };
}

// ---------------------------------------------------------------------------
// Theme definitions
// ---------------------------------------------------------------------------

/**
 * Clean Professional: White/light background, navy accent, dark text.
 * Best for LinkedIn and general corporate audiences.
 * Default theme.
 */
export const cleanProfessional: Theme = {
  name: 'clean',
  bgColor: '#FAFBFC',
  accentColor: '#1B3A6B',    // Deep navy
  textColor: '#111827',       // Near black
  subtextColor: '#4B5563',    // Gray-600
  fontFamily: '"Inter", "Helvetica Neue", Arial, sans-serif',
  cardBg: '#FFFFFF',
  metricColor: '#1B3A6B',
  borderColor: '#E5E7EB',
  tw: {
    bg: 'bg-gray-50',
    accent: 'text-blue-900',
    accentBg: 'bg-blue-900',
    text: 'text-gray-900',
    subtext: 'text-gray-500',
    cardBg: 'bg-white',
    metric: 'text-blue-900',
    border: 'border-gray-200',
  },
};

/**
 * Dark Premium: Dark background, gold accent, white text.
 * Editorial feel, high contrast. Works well for senior/executive positioning.
 */
export const darkPremium: Theme = {
  name: 'dark',
  bgColor: '#0F172A',         // Slate-900
  accentColor: '#D4A017',     // Gold
  textColor: '#F8FAFC',       // Near white
  subtextColor: '#94A3B8',    // Slate-400
  fontFamily: '"Inter", "Helvetica Neue", Arial, sans-serif',
  cardBg: '#1E293B',          // Slate-800
  metricColor: '#D4A017',
  borderColor: '#334155',     // Slate-700
  tw: {
    bg: 'bg-slate-900',
    accent: 'text-yellow-400',
    accentBg: 'bg-yellow-400',
    text: 'text-slate-50',
    subtext: 'text-slate-400',
    cardBg: 'bg-slate-800',
    metric: 'text-yellow-400',
    border: 'border-slate-700',
  },
};

/**
 * Bold Operator: Off-white background, orange/red accent, near-black text.
 * Opinionated, energetic. Good for personal-brand mode or startup roles.
 */
export const boldOperator: Theme = {
  name: 'bold',
  bgColor: '#FAF7F5',         // Warm off-white
  accentColor: '#E85D04',     // Vibrant orange
  textColor: '#1A1A1A',       // Very dark
  subtextColor: '#6B7280',    // Gray-500
  fontFamily: '"Inter", "Helvetica Neue", Arial, sans-serif',
  cardBg: '#FFFFFF',
  metricColor: '#E85D04',
  borderColor: '#FED7AA',     // Orange-200
  tw: {
    bg: 'bg-orange-50',
    accent: 'text-orange-600',
    accentBg: 'bg-orange-600',
    text: 'text-gray-900',
    subtext: 'text-gray-500',
    cardBg: 'bg-white',
    metric: 'text-orange-600',
    border: 'border-orange-200',
  },
};

// ---------------------------------------------------------------------------
// Theme registry
// ---------------------------------------------------------------------------

export const THEMES: Record<string, Theme> = {
  clean: cleanProfessional,
  dark: darkPremium,
  bold: boldOperator,
};

/**
 * Get a theme by name. Defaults to cleanProfessional if name is not found.
 */
export function getTheme(name: string): Theme {
  return THEMES[name.toLowerCase()] ?? cleanProfessional;
}