/**
 * ApkaGermanSchool - Extracted Typography & Web Fonts
 * Source: https://apkagermanschool.com/
 * 
 * Extracted Font Families:
 * - Poppins (Primary font for Navigation, Buttons, Cards, UI)
 * - Manrope (Modern geometric sans-serif for Headings, Hero titles)
 * - Inter (Clean, neutral sans-serif for body copy and forms)
 */

export interface FontFamilyDefinition {
  name: string;
  category: 'primary' | 'display' | 'body' | 'system';
  fontFamily: string;
  weights: number[];
  googleFontUrl?: string;
  usageDescription: string;
}

export interface FontSizeScale {
  label: string;
  sizePx: number;
  sizeRem: string;
  lineHeight: string;
  letterSpacing?: string;
  commonUsage: string;
}

export interface TypographyTokens {
  fontFamilies: {
    primary: FontFamilyDefinition;
    display: FontFamilyDefinition;
    body: FontFamilyDefinition;
    systemFallback: FontFamilyDefinition;
  };
  fontSizes: Record<string, FontSizeScale>;
  fontWeights: Record<string, number>;
  lineHeights: Record<string, string>;
  tailwindFontExtension: {
    fontFamily: Record<string, string[]>;
    fontSize: Record<string, [string, { lineHeight: string; letterSpacing?: string }]>;
  };
}

export const webFonts: TypographyTokens = {
  // 1. Extracted Font Families
  fontFamilies: {
    primary: {
      name: 'Poppins',
      category: 'primary',
      fontFamily: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      weights: [400, 500, 600, 700, 800],
      googleFontUrl: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap',
      usageDescription: 'Used for navigation bar links, CTA buttons, badges, section titles, and course cards.',
    },
    display: {
      name: 'Manrope',
      category: 'display',
      fontFamily: '"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      weights: [600, 700, 800],
      googleFontUrl: 'https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap',
      usageDescription: 'Used for large hero display titles and prominent section headlines.',
    },
    body: {
      name: 'Inter',
      category: 'body',
      fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      weights: [400, 500, 600],
      googleFontUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
      usageDescription: 'Used for continuous reading, lesson descriptions, form controls, and footer text.',
    },
    systemFallback: {
      name: 'System UI',
      category: 'system',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
      weights: [400, 500, 600, 700],
      usageDescription: 'High-performance native system fallbacks for fast initial paint.',
    },
  },

  // 2. Extracted Font Sizes Scale (from 90px display to 11px micro-copy)
  fontSizes: {
    'display-2xl': {
      label: '90px',
      sizePx: 90,
      sizeRem: '5.625rem',
      lineHeight: '1.0',
      letterSpacing: '-0.03em',
      commonUsage: 'Super hero banners and key numerical milestones',
    },
    'display-xl': {
      label: '65px',
      sizePx: 65,
      sizeRem: '4.0625rem',
      lineHeight: '1.1',
      letterSpacing: '-0.025em',
      commonUsage: 'Hero main headings on desktop (e.g., German Mastery title)',
    },
    'display-lg': {
      label: '54px',
      sizePx: 54,
      sizeRem: '3.375rem',
      lineHeight: '1.15',
      letterSpacing: '-0.02em',
      commonUsage: 'Hero secondary headings and major section titles',
    },
    'heading-1': {
      label: '48px',
      sizePx: 48,
      sizeRem: '3.0rem',
      lineHeight: '1.2',
      letterSpacing: '-0.02em',
      commonUsage: 'H1 Page headings',
    },
    'heading-2': {
      label: '38px',
      sizePx: 38,
      sizeRem: '2.375rem',
      lineHeight: '1.25',
      letterSpacing: '-0.015em',
      commonUsage: 'H2 Section titles (e.g. "Available Levels & Classes")',
    },
    'heading-3': {
      label: '28px',
      sizePx: 28,
      sizeRem: '1.75rem',
      lineHeight: '1.3',
      letterSpacing: '-0.01em',
      commonUsage: 'H3 Sub-headers and major feature callouts',
    },
    'heading-4': {
      label: '22px',
      sizePx: 22,
      sizeRem: '1.375rem',
      lineHeight: '1.35',
      letterSpacing: '-0.005em',
      commonUsage: 'H4 Course card titles, lesson chapter names',
    },
    'lead': {
      label: '19px',
      sizePx: 19,
      sizeRem: '1.1875rem',
      lineHeight: '1.4',
      commonUsage: 'Hero lead paragraphs and featured value propositions',
    },
    'body-lg': {
      label: '18px',
      sizePx: 18,
      sizeRem: '1.125rem',
      lineHeight: '1.45',
      commonUsage: 'Introduction text and prominent subtitles',
    },
    'body-base': {
      label: '16px',
      sizePx: 16,
      sizeRem: '1.0rem',
      lineHeight: '1.5',
      commonUsage: 'Standard body text, descriptions, forms, FAQs',
    },
    'body-sm': {
      label: '15px',
      sizePx: 15,
      sizeRem: '0.9375rem',
      lineHeight: '1.5',
      commonUsage: 'Navigation links, secondary metadata, table cells',
    },
    'caption': {
      label: '14px',
      sizePx: 14,
      sizeRem: '0.875rem',
      lineHeight: '1.4',
      commonUsage: 'Navigation bar items, button labels ("APPLY FOR COURSE")',
    },
    'label': {
      label: '12px',
      sizePx: 12,
      sizeRem: '0.75rem',
      lineHeight: '1.3',
      letterSpacing: '0.05em',
      commonUsage: 'Level badges (A1, A2, B1, B2), tags, pricing notes',
    },
    'micro': {
      label: '11px',
      sizePx: 11,
      sizeRem: '0.6875rem',
      lineHeight: '1.2',
      letterSpacing: '0.08em',
      commonUsage: 'Logo subtitle ("RECORDED VIDEO COURSES"), legal disclaimers',
    },
  },

  // 3. Extracted Font Weights
  fontWeights: {
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  },

  // 4. Extracted Line Heights
  lineHeights: {
    none: '1.0',
    tight: '1.22em',
    snug: '1.3em',
    normal: '1.4em',
    relaxed: '1.5em',
  },

  // 5. Pre-configured Tailwind Theme Extension Object
  tailwindFontExtension: {
    fontFamily: {
      sans: ['var(--font-poppins)', 'Poppins', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
      poppins: ['var(--font-poppins)', 'Poppins', 'sans-serif'],
      manrope: ['var(--font-manrope)', 'Manrope', 'sans-serif'],
      inter: ['var(--font-inter)', 'Inter', 'sans-serif'],
    },
    fontSize: {
      'display-2xl': ['5.625rem', { lineHeight: '1.0', letterSpacing: '-0.03em' }],
      'display-xl': ['4.0625rem', { lineHeight: '1.1', letterSpacing: '-0.025em' }],
      'display-lg': ['3.375rem', { lineHeight: '1.15', letterSpacing: '-0.02em' }],
      'heading-1': ['3.0rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
      'heading-2': ['2.375rem', { lineHeight: '1.25', letterSpacing: '-0.015em' }],
      'heading-3': ['1.75rem', { lineHeight: '1.3', letterSpacing: '-0.01em' }],
      'heading-4': ['1.375rem', { lineHeight: '1.35', letterSpacing: '-0.005em' }],
      'lead': ['1.1875rem', { lineHeight: '1.4' }],
      'body-lg': ['1.125rem', { lineHeight: '1.45' }],
      'body-base': ['1.0rem', { lineHeight: '1.5' }],
      'body-sm': ['0.9375rem', { lineHeight: '1.5' }],
      'caption': ['0.875rem', { lineHeight: '1.4' }],
      'label': ['0.75rem', { lineHeight: '1.3', letterSpacing: '0.05em' }],
      'micro': ['0.6875rem', { lineHeight: '1.2', letterSpacing: '0.08em' }],
    },
  },
};

export default webFonts;