import { StyleOption } from '../types';

export const editorialStyles: StyleOption[] = [
  {
    id: 'ny-editor',
    name: 'The Editorial',
    category: 'Editorial',
    description: 'High-contrast serifs, centered headers, delicate borders. Feels like a premium magazine feature.',
    vibe: 'Luxury, Fashion, Literature',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;1,400&display=swap',
    wordConfig: {
      heading1: { 
        font: "Playfair Display", size: 36, color: "111111", bold: true, italic: true, align: 'center',
        spacing: { before: 600, after: 400, line: 240 }
      },
      heading2: { 
        font: "Playfair Display", size: 14, color: "444444", bold: true, allCaps: true, tracking: 100, align: 'center',
        spacing: { before: 400, after: 200, line: 240 },
        border: { bottom: { color: "DDDDDD", space: 8, style: "single", size: 4 } }
      },
      body: { 
        font: "Lora", size: 11, color: "333333", align: 'both',
        spacing: { before: 0, after: 200, line: 320 } 
      },
      accentColor: "000000"
    },
    previewCss: `
      font-family: 'Lora', serif;
      h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 700; font-style: italic; text-align: center; margin-bottom: 30px; }
      h2 { font-family: 'Playfair Display', serif; font-size: 14pt; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 40px; color: #444; }
      p { font-size: 11pt; line-height: 1.8; text-align: justify; margin-bottom: 20px; }
      blockquote { font-family: 'Playfair Display', serif; font-size: 18pt; font-style: italic; text-align: center; color: #555; margin: 40px 20px; border: none; }
    `
  },
  {
    id: 'luxury-editorial',
    name: 'Luxury Editorial',
    category: 'Editorial',
    description: 'High-fashion magazine inspired design. Elegant serifs with sophisticated spacing and premium feel for upscale content.',
    vibe: 'Fashion, Premium, Sophisticated',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;700&family=Montserrat:wght@300;400;500&display=swap',
    wordConfig: {
      heading1: { 
        font: "Cormorant", size: 36, color: "1C1C1C", bold: false, align: 'center',
        spacing: { before: 480, after: 280, line: 240 }
      },
      heading2: { 
        font: "Montserrat", size: 11, color: "1C1C1C", bold: true, align: 'left',
        spacing: { before: 360, after: 180, line: 240 }
      },
      body: { 
        font: "Montserrat", size: 10, color: "3A3A3A", align: 'left',
        spacing: { before: 0, after: 180, line: 300 } 
      },
      accentColor: "B8860B"
    },
    previewCss: `
      font-family: 'Montserrat', sans-serif;
      h1 { font-family: 'Cormorant', serif; font-size: 36pt; font-weight: 500; color: #1C1C1C; text-align: center; margin-bottom: 32px; letter-spacing: 2px; }
      h2 { font-size: 11pt; font-weight: 500; color: #1C1C1C; margin-top: 36px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 3px; }
      p { font-size: 10pt; line-height: 1.7; color: #3A3A3A; margin-bottom: 16px; font-weight: 300; }
      blockquote { border-top: 1px solid #B8860B; border-bottom: 1px solid #B8860B; padding: 24px 0; margin: 32px 0; text-align: center; font-family: 'Cormorant', serif; font-size: 14pt; font-style: italic; }
    `
  },
  {
    id: 'newspaper-classic',
    name: 'Newspaper Classic',
    category: 'Editorial',
    description: 'Traditional newspaper layout with strong typographic hierarchy. Bold headlines, readable body text, and authoritative presence.',
    vibe: 'News, Authority, Information',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=PT+Serif:wght@400;700&display=swap',
    wordConfig: {
      heading1: { 
        font: "Playfair Display", size: 36, color: "000000", bold: true, align: 'center',
        spacing: { before: 240, after: 160, line: 220 }
      },
      heading2: { 
        font: "Playfair Display", size: 16, color: "000000", bold: true, align: 'left',
        spacing: { before: 240, after: 120, line: 240 }
      },
      body: { 
        font: "PT Serif", size: 10, color: "1A1A1A", align: 'both',
        spacing: { before: 0, after: 120, line: 280 } 
      },
      accentColor: "000000"
    },
    previewCss: `
      font-family: 'PT Serif', serif;
      h1 { font-family: 'Playfair Display', serif; font-size: 36pt; font-weight: 900; color: #000000; text-align: center; border-bottom: 2px solid #000000; padding-bottom: 12px; margin-bottom: 20px; }
      h2 { font-family: 'Playfair Display', serif; font-size: 16pt; font-weight: 700; color: #000000; margin-top: 24px; margin-bottom: 12px; }
      p { font-size: 10pt; line-height: 1.6; color: #1A1A1A; margin-bottom: 10px; text-align: justify; }
      blockquote { font-size: 14pt; font-style: italic; text-align: center; margin: 24px 40px; }
    `
  },
  {
    id: 'newspaper-modern',
    name: 'Newspaper Modern',
    category: 'Editorial',
    description: 'Contemporary newspaper design balancing tradition with modern sensibilities. Clean grid-based layout.',
    vibe: 'Modern, Editorial, Informative',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap',
    wordConfig: {
      heading1: { 
        font: "DM Serif Display", size: 36, color: "1A1A1A", bold: false, align: 'left',
        spacing: { before: 320, after: 200, line: 220 }
      },
      heading2: { 
        font: "DM Sans", size: 12, color: "1A1A1A", bold: true, align: 'left',
        spacing: { before: 280, after: 140, line: 240 }
      },
      body: { 
        font: "DM Sans", size: 10, color: "333333", align: 'both',
        spacing: { before: 0, after: 140, line: 280 } 
      },
      accentColor: "DC2626"
    },
    previewCss: `
      font-family: 'DM Sans', sans-serif;
      h1 { font-family: 'DM Serif Display', serif; font-size: 36pt; color: #1A1A1A; margin-bottom: 24px; }
      h2 { font-size: 12pt; font-weight: 700; color: #1A1A1A; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
      p { font-size: 10pt; line-height: 1.6; color: #333333; margin-bottom: 12px; text-align: justify; }
      blockquote { font-size: 16pt; font-style: italic; font-family: 'DM Serif Display', serif; text-align: center; margin: 28px 20px; color: #DC2626; }
    `
  },
  {
    id: 'newspaper-tabloid',
    name: 'Newspaper Tabloid',
    category: 'Editorial',
    description: 'Sensationalist news design. Condensed, heavy headers with urgent red accents.',
    vibe: 'Urgent, Bold, Sensational',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Antonio:wght@700&family=Pathway+Extreme:wght@400;600&display=swap',
    wordConfig: {
      heading1: { 
        font: "Antonio", size: 42, color: "FFFFFF", bold: true, align: 'left',
        spacing: { before: 360, after: 200, line: 200 },
        shading: { fill: "D50000", color: "auto", style: "clear" }
      },
      heading2: { 
        font: "Antonio", size: 20, color: "000000", bold: true, align: 'left',
        spacing: { before: 280, after: 140, line: 220 }
      },
      body: { 
        font: "Pathway Extreme", size: 10, color: "111111", align: 'left',
        spacing: { before: 0, after: 160, line: 280 } 
      },
      accentColor: "D50000"
    },
    previewCss: `
      font-family: 'Pathway Extreme', sans-serif;
      h1 { font-family: 'Antonio', sans-serif; font-size: 42pt; font-weight: 700; color: #FFFFFF; background: #D50000; padding: 12px 16px; margin-bottom: 24px; text-transform: uppercase; line-height: 1; }
      h2 { font-family: 'Antonio', sans-serif; font-size: 20pt; font-weight: 700; color: #000000; margin-top: 28px; margin-bottom: 14px; text-transform: uppercase; }
      p { font-size: 10pt; line-height: 1.5; color: #111111; margin-bottom: 14px; }
      blockquote { font-size: 14pt; font-weight: 700; font-style: italic; color: #000000; border-left: 6px solid #D50000; padding-left: 16px; margin: 24px 0; }
    `
  },
  {
    id: 'indie-zine',
    name: 'Indie Zine',
    category: 'Editorial',
    description: 'DIY photocopier aesthetic. Typewriter fonts, cut-out look, and rebellious asymmetry.',
    vibe: 'DIY, Rebellious, Rough',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Special+Elite&family=Rock+Salt&display=swap',
    wordConfig: {
      heading1: { 
        font: "Rock Salt", size: 28, color: "000000", bold: false, align: 'left',
        spacing: { before: 400, after: 200, line: 240 },
        shading: { fill: "D1C4E9", color: "auto", style: "clear" }
      },
      heading2: { 
        font: "Special Elite", size: 14, color: "000000", bold: true, align: 'left',
        spacing: { before: 320, after: 160, line: 240 },
        border: { bottom: { color: "000000", space: 4, style: "single", size: 12 } }
      },
      body: { 
        font: "Special Elite", size: 10, color: "212121", align: 'left',
        spacing: { before: 0, after: 160, line: 280 } 
      },
      accentColor: "000000"
    },
    previewCss: `
      font-family: 'Special Elite', cursive;
      h1 { font-family: 'Rock Salt', cursive; font-size: 28pt; color: #000000; background: #D1C4E9; padding: 10px; transform: rotate(-2deg); margin-bottom: 24px; display: inline-block; }
      h2 { font-size: 14pt; font-weight: 700; color: #000000; border-bottom: 2px solid #000; margin-top: 32px; margin-bottom: 16px; width: fit-content; }
      p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; }
      blockquote { border: 2px dashed #000; padding: 16px; margin: 24px 0; transform: rotate(1deg); }
    `
  },
  {
    id: 'literary-review',
    name: 'Literary Review',
    category: 'Editorial',
    description: 'Classic bookish aesthetic. Dense serif text, elegant headers, perfect for long-form essays.',
    vibe: 'Intellectual, Dense, Classic',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400&family=Sorts+Mill+Goudy&display=swap',
    wordConfig: {
      heading1: { 
        font: "Crimson Pro", size: 30, color: "4A148C", bold: true, align: 'center',
        spacing: { before: 480, after: 280, line: 240 }
      },
      heading2: { 
        font: "Crimson Pro", size: 14, color: "000000", bold: false, align: 'center',
        spacing: { before: 360, after: 180, line: 240 },
        smallCaps: true
      },
      body: { 
        font: "Sorts Mill Goudy", size: 11, color: "212121", align: 'both',
        spacing: { before: 0, after: 160, line: 300 } 
      },
      accentColor: "4A148C"
    },
    previewCss: `
      font-family: 'Sorts Mill Goudy', serif;
      h1 { font-family: 'Crimson Pro', serif; font-size: 30pt; font-weight: 700; color: #4A148C; text-align: center; margin-bottom: 32px; }
      h2 { font-family: 'Crimson Pro', serif; font-size: 14pt; color: #000000; text-align: center; margin-top: 36px; margin-bottom: 18px; font-variant: small-caps; }
      p { font-size: 11pt; line-height: 1.8; color: #212121; margin-bottom: 16px; text-align: justify; }
      blockquote { margin: 24px 40px; font-style: italic; color: #4A148C; }
    `
  },
  {
    id: 'fashion-magazine',
    name: 'Fashion Magazine',
    category: 'Editorial',
    description: 'Trendy and bold. High-contrast typography with oversized lettering and pink accents.',
    vibe: 'Trendy, Loud, Pink',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Raleway:wght@300;700&display=swap',
    wordConfig: {
      heading1: { 
        font: "Abril Fatface", size: 48, color: "E91E63", bold: false, align: 'left',
        spacing: { before: 400, after: 200, line: 200 }
      },
      heading2: { 
        font: "Raleway", size: 14, color: "000000", bold: true, align: 'left',
        spacing: { before: 320, after: 160, line: 240 },
        allCaps: true,
        tracking: 200
      },
      body: { 
        font: "Raleway", size: 10, color: "212121", align: 'left',
        spacing: { before: 0, after: 160, line: 280 } 
      },
      accentColor: "E91E63"
    },
    previewCss: `
      font-family: 'Raleway', sans-serif;
      h1 { font-family: 'Abril Fatface', cursive; font-size: 48pt; color: #E91E63; margin-bottom: 24px; line-height: 0.9; }
      h2 { font-size: 14pt; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: 4px; margin-top: 32px; margin-bottom: 16px; }
      p { font-size: 10pt; line-height: 1.6; color: #212121; margin-bottom: 14px; font-weight: 300; }
      blockquote { border-left: 10px solid #E91E63; padding-left: 20px; margin: 24px 0; font-family: 'Abril Fatface', cursive; font-size: 18pt; }
    `
  },
  {
    id: 'film-script',
    name: 'Film Script',
    category: 'Editorial',
    description: 'Hollywood screenplay format. Courier font, specific margins, and character name centering.',
    vibe: 'Cinematic, Format, Draft',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap',
    wordConfig: {
      heading1: { 
        font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'left',
        spacing: { before: 240, after: 240, line: 240 },
        allCaps: true,
        underline: true
      },
      heading2: { 
        font: "Courier Prime", size: 12, color: "000000", bold: true, align: 'center',
        spacing: { before: 480, after: 0, line: 240 },
        allCaps: true
      },
      body: { 
        font: "Courier Prime", size: 12, color: "000000", align: 'left',
        spacing: { before: 0, after: 0, line: 240 } 
      },
      accentColor: "000000"
    },
    previewCss: `
      font-family: 'Courier Prime', monospace;
      h1 { font-size: 12pt; font-weight: 700; color: #000000; text-decoration: underline; text-transform: uppercase; margin-bottom: 12px; }
      h2 { font-size: 12pt; font-weight: 700; color: #000000; text-transform: uppercase; text-align: center; margin-top: 24px; margin-bottom: 0px; }
      p { font-size: 12pt; line-height: 1; color: #000000; margin-bottom: 12px; }
      blockquote { margin: 0 40px; text-align: center; }
    `
  }
];