// ── Mock data: paints, projects, schemes ─────────────────────────

const PAINTS = [
  // Metals
  { id: 'p-01', name: 'Liberator Gold',    hex: '#C89E5A', brand: 'Citadel',  code: 'BASE 12',   family: 'metal' },
  { id: 'p-02', name: 'Retributor Armour', hex: '#B58843', brand: 'Citadel',  code: 'BASE 14',   family: 'metal' },
  { id: 'p-03', name: 'Leadbelcher',       hex: '#7E7C7B', brand: 'Citadel',  code: 'BASE 06',   family: 'metal' },
  { id: 'p-04', name: 'Runefang Steel',    hex: '#C8C8CA', brand: 'Citadel',  code: 'LAYER 22',  family: 'metal' },
  { id: 'p-05', name: 'Brass Scorpion',    hex: '#876837', brand: 'Citadel',  code: 'BASE 18',   family: 'metal' },

  // Reds
  { id: 'p-06', name: 'Mephiston Red',     hex: '#9A1B1F', brand: 'Citadel',  code: 'BASE 03',   family: 'red' },
  { id: 'p-07', name: 'Wazdakka Red',      hex: '#B23A48', brand: 'Citadel',  code: 'LAYER 04',  family: 'red' },
  { id: 'p-08', name: 'Wild Rider Red',    hex: '#D14B3A', brand: 'Citadel',  code: 'LAYER 09',  family: 'red' },
  { id: 'p-09', name: 'Hull Red',          hex: '#5A2018', brand: 'Vallejo',  code: '70.985',    family: 'red' },

  // Blues
  { id: 'p-10', name: 'Macragge Blue',     hex: '#1F3F7A', brand: 'Citadel',  code: 'BASE 11',   family: 'blue' },
  { id: 'p-11', name: 'Caledor Sky',       hex: '#2D6FB3', brand: 'Citadel',  code: 'LAYER 13',  family: 'blue' },
  { id: 'p-12', name: 'Lothern Blue',      hex: '#5DA6D8', brand: 'Citadel',  code: 'LAYER 17',  family: 'blue' },
  { id: 'p-13', name: 'Prussian Blue',     hex: '#003060', brand: 'Vallejo',  code: '70.965',    family: 'blue' },

  // Greens
  { id: 'p-14', name: 'Caliban Green',     hex: '#0E3D2D', brand: 'Citadel',  code: 'BASE 09',   family: 'green' },
  { id: 'p-15', name: 'Warpstone Glow',    hex: '#2F7A3E', brand: 'Citadel',  code: 'LAYER 11',  family: 'green' },
  { id: 'p-16', name: 'Verdigris',         hex: '#4A6B5A', brand: 'Scale75',  code: 'SC-72',     family: 'green' },
  { id: 'p-17', name: 'Olive Green',       hex: '#607030', brand: 'Vallejo',  code: '70.967',    family: 'green' },

  // Earth
  { id: 'p-18', name: 'Mournfang Brown',   hex: '#5B331F', brand: 'Citadel',  code: 'BASE 16',   family: 'earth' },
  { id: 'p-19', name: 'Skrag Brown',       hex: '#7A4525', brand: 'Citadel',  code: 'LAYER 15',  family: 'earth' },
  { id: 'p-20', name: 'Zandri Dust',       hex: '#A89066', brand: 'Citadel',  code: 'BASE 19',   family: 'earth' },
  { id: 'p-21', name: 'Bone White',        hex: '#D9C8A8', brand: 'Vallejo',  code: '70.918',    family: 'earth' },

  // Flesh
  { id: 'p-22', name: 'Cadian Fleshtone',  hex: '#C68A6A', brand: 'Citadel',  code: 'LAYER 02',  family: 'flesh' },
  { id: 'p-23', name: 'Kislev Flesh',      hex: '#E2B58F', brand: 'Citadel',  code: 'LAYER 06',  family: 'flesh' },
  { id: 'p-24', name: 'Bugmans Glow',      hex: '#7B3F2F', brand: 'Citadel',  code: 'BASE 04',   family: 'flesh' },

  // Neutrals
  { id: 'p-25', name: 'Abaddon Black',     hex: '#080806', brand: 'Citadel',  code: 'BASE 01',   family: 'neutral' },
  { id: 'p-26', name: 'White Scar',        hex: '#F4EDDD', brand: 'Citadel',  code: 'LAYER 24',  family: 'neutral' },
  { id: 'p-27', name: 'Mechanicus Grey',   hex: '#3A3B3C', brand: 'Citadel',  code: 'BASE 08',   family: 'neutral' },
  { id: 'p-28', name: 'Dawnstone',         hex: '#7C7C7C', brand: 'Citadel',  code: 'LAYER 19',  family: 'neutral' },

  // Specials
  { id: 'p-29', name: 'Reikland Fleshshade', hex: '#A8593A', brand: 'Citadel', code: 'SHADE 04', family: 'shade' },
  { id: 'p-30', name: 'Nuln Oil',          hex: '#101010', brand: 'Citadel',  code: 'SHADE 01',  family: 'shade' },
  { id: 'p-31', name: 'Agrax Earthshade',  hex: '#2A1A0A', brand: 'Citadel',  code: 'SHADE 02',  family: 'shade' },

  // ── Citadel — extended ──────────────────────────────────────────
  { id: 'p-32', name: 'Khorne Red',          hex: '#7A2118', brand: 'Citadel', code: 'BASE 02',   family: 'red' },
  { id: 'p-33', name: 'Evil Sunz Scarlet',   hex: '#C9341E', brand: 'Citadel', code: 'LAYER 07',  family: 'red' },
  { id: 'p-34', name: 'Troll Slayer Orange', hex: '#E66A2D', brand: 'Citadel', code: 'LAYER 10',  family: 'red' },
  { id: 'p-35', name: 'Averland Sunset',     hex: '#D7A02C', brand: 'Citadel', code: 'BASE 22',   family: 'earth' },
  { id: 'p-36', name: 'Yriel Yellow',        hex: '#F2C232', brand: 'Citadel', code: 'LAYER 21',  family: 'earth' },
  { id: 'p-37', name: 'Flash Gitz Yellow',   hex: '#F5E33A', brand: 'Citadel', code: 'LAYER 23',  family: 'earth' },
  { id: 'p-38', name: 'Kantor Blue',         hex: '#142B4D', brand: 'Citadel', code: 'BASE 10',   family: 'blue' },
  { id: 'p-39', name: 'Thunderhawk Blue',    hex: '#2F4E6E', brand: 'Citadel', code: 'BASE 13',   family: 'blue' },
  { id: 'p-40', name: 'Calgar Blue',         hex: '#1F5BB0', brand: 'Citadel', code: 'LAYER 12',  family: 'blue' },
  { id: 'p-41', name: 'Hoeth Blue',          hex: '#3D8DCC', brand: 'Citadel', code: 'LAYER 14',  family: 'blue' },
  { id: 'p-42', name: 'Castellan Green',     hex: '#3A4D2A', brand: 'Citadel', code: 'BASE 15',   family: 'green' },
  { id: 'p-43', name: 'Loren Forest',        hex: '#4F6E3A', brand: 'Citadel', code: 'LAYER 16',  family: 'green' },
  { id: 'p-44', name: 'Moot Green',          hex: '#6FB344', brand: 'Citadel', code: 'LAYER 18',  family: 'green' },
  { id: 'p-45', name: 'Sotek Green',         hex: '#157B96', brand: 'Citadel', code: 'BASE 20',   family: 'green' },
  { id: 'p-46', name: 'Doombull Brown',      hex: '#6B2F22', brand: 'Citadel', code: 'BASE 05',   family: 'earth' },
  { id: 'p-47', name: 'XV-88',               hex: '#6F501C', brand: 'Citadel', code: 'BASE 17',   family: 'earth' },
  { id: 'p-48', name: 'Tallarn Sand',        hex: '#9A7F4D', brand: 'Citadel', code: 'LAYER 20',  family: 'earth' },
  { id: 'p-49', name: 'Pallid Wych Flesh',   hex: '#E8DCB5', brand: 'Citadel', code: 'LAYER 03',  family: 'flesh' },
  { id: 'p-50', name: 'Naggaroth Night',     hex: '#39243F', brand: 'Citadel', code: 'BASE 07',   family: 'neutral' },
  { id: 'p-51', name: 'Druchii Violet',      hex: '#5A2A6E', brand: 'Citadel', code: 'SHADE 03',  family: 'shade' },
  { id: 'p-52', name: 'Coelia Greenshade',   hex: '#0E5048', brand: 'Citadel', code: 'SHADE 05',  family: 'shade' },
  { id: 'p-53', name: 'Drakenhof Nightshade',hex: '#0A2A48', brand: 'Citadel', code: 'SHADE 06',  family: 'shade' },
  { id: 'p-54', name: 'Stormhost Silver',    hex: '#E1E3E6', brand: 'Citadel', code: 'LAYER 25',  family: 'metal' },
  { id: 'p-55', name: 'Sycorax Bronze',      hex: '#A87A3C', brand: 'Citadel', code: 'LAYER 26',  family: 'metal' },

  // ── Vallejo Model Color ─────────────────────────────────────────
  { id: 'p-56', name: 'Flat Red',            hex: '#9B2A22', brand: 'Vallejo', code: '70.957',    family: 'red' },
  { id: 'p-57', name: 'Cavalry Brown',       hex: '#7E2719', brand: 'Vallejo', code: '70.982',    family: 'red' },
  { id: 'p-58', name: 'Carmine Red',         hex: '#A11F2C', brand: 'Vallejo', code: '70.908',    family: 'red' },
  { id: 'p-59', name: 'Orange Red',          hex: '#D24E25', brand: 'Vallejo', code: '70.910',    family: 'red' },
  { id: 'p-60', name: 'Sky Blue',            hex: '#6FAFD8', brand: 'Vallejo', code: '70.961',    family: 'blue' },
  { id: 'p-61', name: 'Medium Blue',         hex: '#1F4E8C', brand: 'Vallejo', code: '70.963',    family: 'blue' },
  { id: 'p-62', name: 'Andrea Blue',         hex: '#0A4E9A', brand: 'Vallejo', code: '70.841',    family: 'blue' },
  { id: 'p-63', name: 'Flat Green',          hex: '#36603A', brand: 'Vallejo', code: '70.968',    family: 'green' },
  { id: 'p-64', name: 'Park Green Flat',     hex: '#22442A', brand: 'Vallejo', code: '70.969',    family: 'green' },
  { id: 'p-65', name: 'Reflective Green',    hex: '#0F3D24', brand: 'Vallejo', code: '70.890',    family: 'green' },
  { id: 'p-66', name: 'Mahogany Brown',      hex: '#4A2418', brand: 'Vallejo', code: '70.846',    family: 'earth' },
  { id: 'p-67', name: 'Flat Brown',          hex: '#5C3A22', brand: 'Vallejo', code: '70.984',    family: 'earth' },
  { id: 'p-68', name: 'Beige Brown',         hex: '#8B6E48', brand: 'Vallejo', code: '70.875',    family: 'earth' },
  { id: 'p-69', name: 'Khaki',               hex: '#9E8A56', brand: 'Vallejo', code: '70.988',    family: 'earth' },
  { id: 'p-70', name: 'Iraqi Sand',          hex: '#C8B68A', brand: 'Vallejo', code: '70.819',    family: 'earth' },
  { id: 'p-71', name: 'Light Flesh',         hex: '#E6BC9A', brand: 'Vallejo', code: '70.928',    family: 'flesh' },
  { id: 'p-72', name: 'Basic Skintone',      hex: '#D49A78', brand: 'Vallejo', code: '70.815',    family: 'flesh' },
  { id: 'p-73', name: 'Medium Fleshtone',    hex: '#C58A6B', brand: 'Vallejo', code: '70.860',    family: 'flesh' },
  { id: 'p-74', name: 'Neutral Grey',        hex: '#6F7274', brand: 'Vallejo', code: '70.992',    family: 'neutral' },
  { id: 'p-75', name: 'Cold Grey',           hex: '#5A6168', brand: 'Vallejo', code: '70.907',    family: 'neutral' },
  { id: 'p-76', name: 'White',               hex: '#F1ECDF', brand: 'Vallejo', code: '70.951',    family: 'neutral' },
  { id: 'p-77', name: 'Black',               hex: '#1A1A1A', brand: 'Vallejo', code: '70.950',    family: 'neutral' },
  { id: 'p-78', name: 'Silver',              hex: '#C7C8CA', brand: 'Vallejo', code: '70.997',    family: 'metal' },
  { id: 'p-79', name: 'Gold',                hex: '#C09438', brand: 'Vallejo', code: '70.996',    family: 'metal' },
  { id: 'p-80', name: 'Brass',               hex: '#9A7A3A', brand: 'Vallejo', code: '70.801',    family: 'metal' },
  { id: 'p-81', name: 'Lemon Yellow',        hex: '#F5DB3A', brand: 'Vallejo', code: '70.952',    family: 'earth' },
  { id: 'p-82', name: 'Sepia Wash',          hex: '#3A2014', brand: 'Vallejo', code: '76.514',    family: 'shade' },
  { id: 'p-83', name: 'Black Wash',          hex: '#0D0D0D', brand: 'Vallejo', code: '76.518',    family: 'shade' },

  // ── Scale75 ─────────────────────────────────────────────────────
  { id: 'p-84', name: 'Black',               hex: '#0A0A0A', brand: 'Scale75', code: 'SC-01',     family: 'neutral' },
  { id: 'p-85', name: 'White',               hex: '#F2EFE3', brand: 'Scale75', code: 'SC-02',     family: 'neutral' },
  { id: 'p-86', name: 'Vampire Red',         hex: '#7A1825', brand: 'Scale75', code: 'SC-10',     family: 'red' },
  { id: 'p-87', name: 'Inktense Blood',      hex: '#5A0A14', brand: 'Scale75', code: 'SC-11',     family: 'red' },
  { id: 'p-88', name: 'Dwarf Skin',          hex: '#C28A66', brand: 'Scale75', code: 'SC-12',     family: 'flesh' },
  { id: 'p-89', name: 'Inktense Blue',       hex: '#0C2A55', brand: 'Scale75', code: 'SC-23',     family: 'blue' },
  { id: 'p-90', name: 'Lasur Blue',          hex: '#274E76', brand: 'Scale75', code: 'SC-25',     family: 'blue' },
  { id: 'p-91', name: 'Necro Gold',          hex: '#9A6E2E', brand: 'Scale75', code: 'SC-31',     family: 'metal' },
  { id: 'p-92', name: 'Citrine Alchemy',     hex: '#D6A02C', brand: 'Scale75', code: 'SC-32',     family: 'metal' },
  { id: 'p-93', name: 'Heavy Skin',          hex: '#9F6A4A', brand: 'Scale75', code: 'SC-50',     family: 'flesh' },
  { id: 'p-94', name: 'Tory Blue',           hex: '#2B5F9C', brand: 'Scale75', code: 'SC-67',     family: 'blue' },
  { id: 'p-95', name: 'Hyperion Glaze',      hex: '#7E2A3C', brand: 'Scale75', code: 'SC-85',     family: 'shade' },
  { id: 'p-96', name: 'Hot Orange',          hex: '#E76A1E', brand: 'Scale75', code: 'SC-15',     family: 'red' },
  { id: 'p-97', name: 'Forest Shadow',       hex: '#1A3322', brand: 'Scale75', code: 'SC-40',     family: 'green' },
  { id: 'p-98', name: 'Camo Olive',          hex: '#516234', brand: 'Scale75', code: 'SC-42',     family: 'green' },
  { id: 'p-99', name: 'Sandy Wasteland',     hex: '#B5996A', brand: 'Scale75', code: 'SC-55',     family: 'earth' },
  { id: 'p-100', name: 'Speed Metal',        hex: '#B4B5B7', brand: 'Scale75', code: 'SC-30',     family: 'metal' },
];

const FAMILIES = [
  { id: 'all',     label: 'All' },
  { id: 'metal',   label: 'Metals' },
  { id: 'red',     label: 'Reds' },
  { id: 'blue',    label: 'Blues' },
  { id: 'green',   label: 'Greens' },
  { id: 'earth',   label: 'Earth' },
  { id: 'flesh',   label: 'Flesh' },
  { id: 'neutral', label: 'Neutrals' },
  { id: 'shade',   label: 'Shades' },
];

// Past projects (for studio)
const PROJECTS = [
  {
    id: 'proj-01',
    name: 'Crimson Templar',
    archetype: 'Space Marine Captain',
    palette: ['#9A1B1F', '#080806', '#C89E5A', '#D9C8A8', '#7E7C7B'],
    accent: '#9A1B1F',
    silhouette: 'knight',
    image: '/assets/mini-crimson.jpg',
    status: 'complete',
    difficulty: 'Advanced',
    timeHours: 7,
    updated: '3 days ago',
    started: 'Mar 14, 2026',
    steps: 14,
  },
  {
    id: 'proj-02',
    name: 'Sylvan Ranger',
    archetype: 'Wood Elf Scout',
    palette: ['#0E3D2D', '#5B331F', '#A89066', '#E2B58F', '#2F7A3E'],
    accent: '#2F7A3E',
    silhouette: 'archer',
    image: '/assets/mini-forest.jpg',
    status: 'complete',
    difficulty: 'Beginner',
    timeHours: 2,
    updated: '1 week ago',
    started: 'Mar 8, 2026',
    steps: 6,
  },
  {
    id: 'proj-03',
    name: 'Verdigris Sentinel',
    archetype: 'Ancient Bronze Construct',
    palette: ['#4A6B5A', '#876837', '#C89E5A', '#3A3B3C', '#A89066'],
    accent: '#4A6B5A',
    silhouette: 'mech',
    image: '/assets/mini-verdigris.jpg',
    status: 'complete',
    difficulty: 'Advanced',
    timeHours: 8,
    updated: '2 weeks ago',
    started: 'Mar 1, 2026',
    steps: 16,
  },
  {
    id: 'proj-04',
    name: 'Tide-Caller',
    archetype: 'Storm Sorceress',
    palette: ['#1F3F7A', '#5DA6D8', '#F4EDDD', '#C89E5A', '#3A5A7A'],
    accent: '#1F3F7A',
    silhouette: 'mage',
    image: '/assets/mini-storm.jpg',
    status: 'in-progress',
    difficulty: 'Advanced',
    timeHours: 6,
    updated: 'Yesterday',
    started: 'Mar 16, 2026',
    steps: 12,
  },
  {
    id: 'proj-05',
    name: 'Ashen Vanguard',
    archetype: 'Skeletal Warrior',
    palette: ['#D9C8A8', '#3A3B3C', '#5B331F', '#7E7C7B', '#080806'],
    accent: '#D9C8A8',
    silhouette: 'knight',
    image: '/assets/mini-bone.jpg',
    status: 'complete',
    difficulty: 'Beginner',
    timeHours: 1.5,
    updated: '3 weeks ago',
    started: 'Feb 24, 2026',
    steps: 5,
  },
  {
    id: 'proj-06',
    name: 'Goldscale Wyrm',
    archetype: 'Young Dragon',
    palette: ['#C89E5A', '#9A1B1F', '#5B331F', '#876837', '#080806'],
    accent: '#C89E5A',
    silhouette: 'beast',
    image: '/assets/mini-gold.jpg',
    status: 'complete',
    difficulty: 'Advanced',
    timeHours: 9,
    updated: '1 month ago',
    started: 'Feb 12, 2026',
    steps: 18,
  },
];

// Detailed scheme for result screen
const SCHEME = {
  beginner: {
    title: 'Crimson Templar',
    theme: 'A blood-soaked oath-keeper. Flat, confident colours. Bold against a graveyard base.',
    difficulty: 'Beginner',
    time: '1.5 — 2 hrs',
    paintCount: 5,
    techniques: ['Basecoat', 'Drybrush', 'Wash'],
    palette: [
      { name: 'Mephiston Red',  hex: '#9A1B1F', role: 'Armour plate' },
      { name: 'Abaddon Black',  hex: '#080806', role: 'Undersuit & boots' },
      { name: 'Leadbelcher',    hex: '#7E7C7B', role: 'Weapons & trim' },
      { name: 'Liberator Gold', hex: '#C89E5A', role: 'Heraldry & ornament' },
      { name: 'Bone White',     hex: '#D9C8A8', role: 'Skull & relics' },
    ],
    steps: [
      { action: 'Prime the model with a thin coat of black spray primer; let cure 20 min.', technique: 'Prime', colours: ['#080806'] },
      { action: 'Basecoat all armour plates with two thin coats of Mephiston Red.',          technique: 'Basecoat', colours: ['#9A1B1F'] },
      { action: 'Basecoat boots, gloves, and undersuit with Abaddon Black.',                 technique: 'Basecoat', colours: ['#080806'] },
      { action: 'Paint sword, gun, and shoulder trim with Leadbelcher.',                     technique: 'Basecoat', colours: ['#7E7C7B'] },
      { action: 'Pick out emblems, eagle, and chest jewel with Liberator Gold.',             technique: 'Detail',   colours: ['#C89E5A'] },
      { action: 'Apply an all-over wash of Nuln Oil to recess the metals and armour.',       technique: 'Wash',     colours: ['#101010'] },
      { action: 'Light drybrush of Bone White on the skull and any base bones.',             technique: 'Drybrush', colours: ['#D9C8A8'] },
    ],
  },
  advanced: {
    title: 'Verdigris Sentinel',
    theme: 'A weathered bronze construct, half-forgotten under sea-salt and oxide. Cool greens against warm gold.',
    difficulty: 'Advanced',
    time: '6 — 8 hrs',
    paintCount: 11,
    techniques: ['Layering', 'Glazing', 'Wet blend', 'NMM gold', 'Stippling'],
    palette: [
      { name: 'Brass Scorpion',   hex: '#876837', role: 'Base metal' },
      { name: 'Liberator Gold',   hex: '#C89E5A', role: 'Mid metal' },
      { name: 'Runefang Steel',   hex: '#C8C8CA', role: 'Highlights' },
      { name: 'Verdigris',        hex: '#4A6B5A', role: 'Oxide veining' },
      { name: 'Caliban Green',    hex: '#0E3D2D', role: 'Deep recess' },
      { name: 'Bone White',       hex: '#D9C8A8', role: 'Salt crust' },
      { name: 'Zandri Dust',      hex: '#A89066', role: 'Sand & dust' },
      { name: 'Mournfang Brown',  hex: '#5B331F', role: 'Rust glaze' },
      { name: 'Abaddon Black',    hex: '#080806', role: 'Shadow lining' },
      { name: 'Agrax Earthshade', hex: '#2A1A0A', role: 'Earth wash' },
      { name: 'Nuln Oil',         hex: '#101010', role: 'Black wash' },
    ],
    steps: [
      { action: 'Prime with grey-brown; zenithal spray a touch of bone white from directly above.', technique: 'Prime',     colours: ['#A89066', '#D9C8A8'] },
      { action: 'Basecoat the entire body in Brass Scorpion in two thin coats.',                    technique: 'Basecoat',  colours: ['#876837'] },
      { action: 'Layer Liberator Gold on all upward-facing planes; leave recesses dark.',           technique: 'Layer',     colours: ['#C89E5A'] },
      { action: 'Edge-highlight the sharpest points with Runefang Steel.',                          technique: 'Edge',      colours: ['#C8C8CA'] },
      { action: 'Stipple Verdigris into seams, joints, and weeping cracks.',                        technique: 'Stipple',   colours: ['#4A6B5A'] },
      { action: 'Glaze thinned Caliban Green over the Verdigris to deepen the oxide.',              technique: 'Glaze',     colours: ['#0E3D2D'] },
      { action: 'Apply Agrax Earthshade pin-wash through every recess.',                            technique: 'Wash',      colours: ['#2A1A0A'] },
      { action: 'Dot Bone White as salt-crust along the lower legs and base contact points.',       technique: 'Stipple',   colours: ['#D9C8A8'] },
      { action: 'Wet-blend Mournfang Brown into the gold near the recesses as rust drip.',          technique: 'Wet blend', colours: ['#5B331F', '#C89E5A'] },
      { action: 'Line shadows under overhangs with Abaddon Black thinned 1:3 with medium.',         technique: 'Line',      colours: ['#080806'] },
      { action: 'Drybrush Zandri Dust onto the sandy base and lower greaves.',                      technique: 'Drybrush',  colours: ['#A89066'] },
    ],
  },
};

// Silhouette renderer used in placeholders + projects
function Silhouette({ kind = 'knight', size = 110, color = 'rgba(237,230,216,0.18)' }) {
  // Minimal blocky silhouettes — placeholder figures, not characters.
  const w = size, h = size * 1.4;
  const paths = {
    knight: (
      <g fill={color}>
        <rect x={w*0.40} y={h*0.06} width={w*0.20} height={h*0.10} rx={2}/>
        <rect x={w*0.30} y={h*0.18} width={w*0.40} height={h*0.30} rx={3}/>
        <rect x={w*0.18} y={h*0.22} width={w*0.10} height={h*0.30} rx={3}/>
        <rect x={w*0.72} y={h*0.22} width={w*0.10} height={h*0.30} rx={3}/>
        <rect x={w*0.85} y={h*0.10} width={w*0.04} height={h*0.55}/>
        <rect x={w*0.34} y={h*0.50} width={w*0.32} height={h*0.30} rx={3}/>
        <rect x={w*0.36} y={h*0.82} width={w*0.11} height={h*0.10} rx={2}/>
        <rect x={w*0.53} y={h*0.82} width={w*0.11} height={h*0.10} rx={2}/>
      </g>
    ),
    mage: (
      <g fill={color}>
        <polygon points={`${w*0.30},${h*0.20} ${w*0.70},${h*0.20} ${w*0.50},${h*0.00}`}/>
        <rect x={w*0.42} y={h*0.20} width={w*0.16} height={h*0.10} rx={2}/>
        <polygon points={`${w*0.25},${h*0.85} ${w*0.75},${h*0.85} ${w*0.55},${h*0.30} ${w*0.45},${h*0.30}`}/>
        <rect x={w*0.15} y={h*0.04} width={w*0.04} height={h*0.85}/>
        <circle cx={w*0.17} cy={h*0.05} r={w*0.06}/>
      </g>
    ),
    archer: (
      <g fill={color}>
        <circle cx={w*0.50} cy={h*0.12} r={w*0.10}/>
        <rect x={w*0.42} y={h*0.22} width={w*0.16} height={h*0.30} rx={3}/>
        <rect x={w*0.22} y={h*0.28} width={w*0.20} height={h*0.04} rx={2}/>
        <rect x={w*0.58} y={h*0.28} width={w*0.20} height={h*0.04} rx={2}/>
        <path d={`M ${w*0.18} ${h*0.20} Q ${w*0.05} ${h*0.45} ${w*0.18} ${h*0.70}`} stroke={color} strokeWidth="2" fill="none"/>
        <rect x={w*0.40} y={h*0.52} width={w*0.08} height={h*0.30}/>
        <rect x={w*0.52} y={h*0.52} width={w*0.08} height={h*0.30}/>
      </g>
    ),
    mech: (
      <g fill={color}>
        <rect x={w*0.32} y={h*0.04} width={w*0.36} height={h*0.14} rx={2}/>
        <rect x={w*0.22} y={h*0.18} width={w*0.56} height={h*0.34} rx={4}/>
        <rect x={w*0.10} y={h*0.22} width={w*0.10} height={h*0.40} rx={3}/>
        <rect x={w*0.80} y={h*0.22} width={w*0.10} height={h*0.40} rx={3}/>
        <rect x={w*0.30} y={h*0.54} width={w*0.16} height={h*0.40} rx={3}/>
        <rect x={w*0.54} y={h*0.54} width={w*0.16} height={h*0.40} rx={3}/>
      </g>
    ),
    beast: (
      <g fill={color}>
        <ellipse cx={w*0.55} cy={h*0.55} rx={w*0.40} ry={h*0.25}/>
        <ellipse cx={w*0.18} cy={h*0.35} rx={w*0.14} ry={h*0.10}/>
        <rect x={w*0.05} y={h*0.32} width={w*0.10} height={h*0.04}/>
        <path d={`M ${w*0.85} ${h*0.50} Q ${w*1.00} ${h*0.40} ${w*0.95} ${h*0.20}`} stroke={color} strokeWidth="3" fill="none"/>
        <rect x={w*0.30} y={h*0.75} width={w*0.10} height={h*0.18}/>
        <rect x={w*0.55} y={h*0.75} width={w*0.10} height={h*0.18}/>
      </g>
    ),
  };
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
      {paths[kind] || paths.knight}
    </svg>
  );
}

Object.assign(window, { PAINTS, FAMILIES, PROJECTS, SCHEME, Silhouette });