/**
 * Brandbook Constants - Color palettes, typography, spacing, voice & tone
 */

export interface ColorShade {
  name: string
  value: string
  text: 'dark' | 'light'
}

export interface ColorPalette {
  name: string
  description: string
  shades: ColorShade[]
}

export interface CategoryColor {
  id: string
  name: string
  description: string
  main: string
  shades: ColorShade[]
}

// Primary brand color (Sky Blue)
export const PRIMARY_COLORS: ColorPalette = {
  name: 'Primary (Sky Blue)',
  description: 'Haupt-Markenfarbe fuer Buttons, Links und Akzente',
  shades: [
    { name: '50', value: '#f0f9ff', text: 'dark' },
    { name: '100', value: '#e0f2fe', text: 'dark' },
    { name: '200', value: '#bae6fd', text: 'dark' },
    { name: '300', value: '#7dd3fc', text: 'dark' },
    { name: '400', value: '#38bdf8', text: 'dark' },
    { name: '500', value: '#0ea5e9', text: 'light' },
    { name: '600', value: '#0284c7', text: 'light' },
    { name: '700', value: '#0369a1', text: 'light' },
    { name: '800', value: '#075985', text: 'light' },
    { name: '900', value: '#0c4a6e', text: 'light' },
  ],
}

// Accent brand color (Fuchsia) - for logo gradient and highlights
export const ACCENT_COLORS: ColorPalette = {
  name: 'Accent (Fuchsia)',
  description: 'Akzentfarbe fuer Logo-Gradient und besondere Highlights',
  shades: [
    { name: '50', value: '#fdf4ff', text: 'dark' },
    { name: '100', value: '#fae8ff', text: 'dark' },
    { name: '200', value: '#f5d0fe', text: 'dark' },
    { name: '300', value: '#f0abfc', text: 'dark' },
    { name: '400', value: '#e879f9', text: 'dark' },
    { name: '500', value: '#d946ef', text: 'light' },
    { name: '600', value: '#c026d3', text: 'light' },
    { name: '700', value: '#a21caf', text: 'light' },
    { name: '800', value: '#86198f', text: 'light' },
    { name: '900', value: '#701a75', text: 'light' },
  ],
}

// Category colors for navigation and modules
export const CATEGORY_COLORS: CategoryColor[] = [
  {
    id: 'dsgvo',
    name: 'DSGVO (Violet)',
    description: 'Datenschutz & Betroffenenrechte',
    main: '#7c3aed',
    shades: [
      { name: '100', value: '#ede9fe', text: 'dark' },
      { name: '500', value: '#8b5cf6', text: 'light' },
      { name: '600', value: '#7c3aed', text: 'light' },
      { name: '700', value: '#6d28d9', text: 'light' },
    ],
  },
  {
    id: 'compliance',
    name: 'Compliance (Purple)',
    description: 'Audit, Controls & Regulierung',
    main: '#9333ea',
    shades: [
      { name: '100', value: '#f3e8ff', text: 'dark' },
      { name: '500', value: '#a855f7', text: 'light' },
      { name: '600', value: '#9333ea', text: 'light' },
      { name: '700', value: '#7e22ce', text: 'light' },
    ],
  },
  {
    id: 'ai',
    name: 'KI & Automatisierung (Teal)',
    description: 'LLM, OCR, RAG & Machine Learning',
    main: '#14b8a6',
    shades: [
      { name: '100', value: '#ccfbf1', text: 'dark' },
      { name: '500', value: '#14b8a6', text: 'light' },
      { name: '600', value: '#0d9488', text: 'light' },
      { name: '700', value: '#0f766e', text: 'light' },
    ],
  },
  {
    id: 'infrastructure',
    name: 'Infrastruktur (Orange)',
    description: 'GPU, Security, CI/CD & Monitoring',
    main: '#f97316',
    shades: [
      { name: '100', value: '#ffedd5', text: 'dark' },
      { name: '500', value: '#f97316', text: 'light' },
      { name: '600', value: '#ea580c', text: 'light' },
      { name: '700', value: '#c2410c', text: 'light' },
    ],
  },
  {
    id: 'education',
    name: 'Bildung & Schule (Blue)',
    description: 'Bildungsquellen & Lehrplaene',
    main: '#3b82f6',
    shades: [
      { name: '100', value: '#dbeafe', text: 'dark' },
      { name: '500', value: '#3b82f6', text: 'light' },
      { name: '600', value: '#2563eb', text: 'light' },
      { name: '700', value: '#1d4ed8', text: 'light' },
    ],
  },
  {
    id: 'communication',
    name: 'Kommunikation (Green)',
    description: 'Matrix, E-Mail & Benachrichtigungen',
    main: '#22c55e',
    shades: [
      { name: '100', value: '#dcfce7', text: 'dark' },
      { name: '500', value: '#22c55e', text: 'light' },
      { name: '600', value: '#16a34a', text: 'light' },
      { name: '700', value: '#15803d', text: 'light' },
    ],
  },
  {
    id: 'development',
    name: 'Entwicklung (Slate)',
    description: 'Workflow, Game, Docs & Brandbook',
    main: '#64748b',
    shades: [
      { name: '100', value: '#f1f5f9', text: 'dark' },
      { name: '500', value: '#64748b', text: 'light' },
      { name: '600', value: '#475569', text: 'light' },
      { name: '700', value: '#334155', text: 'light' },
    ],
  },
]

// Semantic colors
export const SEMANTIC_COLORS: Record<string, { name: string; shades: ColorShade[] }> = {
  success: {
    name: 'Success (Emerald)',
    shades: [
      { name: '100', value: '#d1fae5', text: 'dark' },
      { name: '500', value: '#10b981', text: 'light' },
      { name: '600', value: '#059669', text: 'light' },
    ],
  },
  warning: {
    name: 'Warning (Amber)',
    shades: [
      { name: '100', value: '#fef3c7', text: 'dark' },
      { name: '500', value: '#f59e0b', text: 'dark' },
      { name: '600', value: '#d97706', text: 'light' },
    ],
  },
  danger: {
    name: 'Danger (Red)',
    shades: [
      { name: '100', value: '#fee2e2', text: 'dark' },
      { name: '500', value: '#ef4444', text: 'light' },
      { name: '600', value: '#dc2626', text: 'light' },
    ],
  },
  neutral: {
    name: 'Neutral (Slate)',
    shades: [
      { name: '50', value: '#f8fafc', text: 'dark' },
      { name: '100', value: '#f1f5f9', text: 'dark' },
      { name: '200', value: '#e2e8f0', text: 'dark' },
      { name: '300', value: '#cbd5e1', text: 'dark' },
      { name: '400', value: '#94a3b8', text: 'dark' },
      { name: '500', value: '#64748b', text: 'light' },
      { name: '600', value: '#475569', text: 'light' },
      { name: '700', value: '#334155', text: 'light' },
      { name: '800', value: '#1e293b', text: 'light' },
      { name: '900', value: '#0f172a', text: 'light' },
    ],
  },
}

export const TYPOGRAPHY = {
  fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
  weights: [
    { weight: 400, name: 'Regular', usage: 'Fliesstext, Beschreibungen' },
    { weight: 500, name: 'Medium', usage: 'Labels, Buttons, Navigation' },
    { weight: 600, name: 'Semi-Bold', usage: 'Ueberschriften H3-H6, Card-Titel' },
    { weight: 700, name: 'Bold', usage: 'Ueberschriften H1-H2, CTAs' },
  ],
  sizes: [
    { name: 'xs', size: '0.75rem (12px)', usage: 'Footnotes, Badges' },
    { name: 'sm', size: '0.875rem (14px)', usage: 'Nebentext, Labels' },
    { name: 'base', size: '1rem (16px)', usage: 'Fliesstext, Body' },
    { name: 'lg', size: '1.125rem (18px)', usage: 'Lead Text' },
    { name: 'xl', size: '1.25rem (20px)', usage: 'H4, Card Titles' },
    { name: '2xl', size: '1.5rem (24px)', usage: 'H3' },
    { name: '3xl', size: '1.875rem (30px)', usage: 'H2' },
    { name: '4xl', size: '2.25rem (36px)', usage: 'H1, Hero' },
  ],
}

export const SPACING = [
  { name: '1', value: '0.25rem (4px)', usage: 'Minimaler Abstand' },
  { name: '2', value: '0.5rem (8px)', usage: 'Kompakter Abstand' },
  { name: '3', value: '0.75rem (12px)', usage: 'Standard klein' },
  { name: '4', value: '1rem (16px)', usage: 'Standard' },
  { name: '6', value: '1.5rem (24px)', usage: 'Card Padding' },
  { name: '8', value: '2rem (32px)', usage: 'Section Spacing' },
]

export const VOICE_TONE = {
  attributes: [
    'Professionell & Vertrauenswuerdig',
    'Klar & Direkt',
    'Hilfreich & Unterstuetzend',
    'Modern & Innovativ',
    'DSGVO-konform & Sicher',
  ],
  doList: [
    'Einfache, klare Sprache verwenden',
    'Aktiv formulieren',
    'Nutzenorientiert schreiben',
    'Konkrete Beispiele geben',
    'Technische Begriffe erklaeren',
  ],
  dontList: [
    'Fachjargon ohne Erklaerung',
    'Passive Formulierungen',
    'Uebertriebene Versprechen',
    'Marketing-Floskeln',
    'Unpersoenliche Ansprache',
  ],
}

export type BrandbookTab = 'colors' | 'typography' | 'components' | 'logo' | 'voice'

export const TABS: { id: BrandbookTab; label: string }[] = [
  { id: 'colors', label: 'Farben' },
  { id: 'typography', label: 'Typografie' },
  { id: 'components', label: 'Komponenten' },
  { id: 'logo', label: 'Logo' },
  { id: 'voice', label: 'Tonalitaet' },
]