Made of little things.

// Shared toy-box colors, intentionally independent of the runtime's UI palette.
export const paint = ['#ff5068', '#ffdc3f', '#596dff', '#22ddc4'];
export function courseStyle(name: string) {
  if (name === 'Little Lagoon' || name === 'Coastal Comet')
    return {
      sky: '#78cfe6',
      horizon: '#ddf6ed',
      ocean: '#31bbd2',
      shore: '#fff0bd',
      hill: '#f3c57b',
      ground: '#ffe5a2',
      patch: '#fff0bd',
      edge: '#f9a477',
      water: '#31cde0',
      leaves: ['#17baa0', '#42dcb0', '#ff8aaa', '#ffbc48'],
      accent: '#ff726c',
      subtitle:
        name === 'Coastal Comet'
          ? 'Coastal sweepers, a cliffside kink & room to pass.'
          : 'Wide beaches. Narrow corners. Seaside scrapes.',
    };
  if (name === 'Skyline Sprint' || name === 'Skybridge Eight')
    return {
      sky: '#a59be9',
      horizon: '#ffe2dc',
      ocean: '#948be0',
      shore: '#ffd8bc',
      hill: '#c991ca',
      ground: '#f0bfd9',
      patch: '#f9d4e0',
      edge: '#ae86d8',
      water: '#9c9ef1',
      leaves: ['#ef709e', '#ff9a72', '#a18bef', '#ffdc6d'],
      accent: '#a08aff',
      subtitle:
        name === 'Skybridge Eight'
          ? 'Over, under, around. A sky-high figure eight.'
          : 'Candy-colored heights. Hold your nerve.',
    };
  if (name === 'Petal Park')
    return {
      sky: '#b7b7f1',
      horizon: '#ffefd5',
      ocean: '#8e9fe8',
      shore: '#ffd7ac',
      hill: '#c988ad',
      ground: '#f5d0ba',
      patch: '#ffe5cc',
      edge: '#ce8fba',
      water: '#a9c7fa',
      leaves: ['#ef719f', '#ffc465', '#a491e9', '#67c7ab'],
      accent: '#e869a8',
      subtitle: 'Four garden lobes. Tight waists. Blooming good scraps.',
    };
  if (name === 'Switchback Summit')
    return {
      sky: '#99cfed',
      horizon: '#e7fbef',
      ocean: '#5fa7d1',
      shore: '#d7e5cb',
      hill: '#7eacba',
      ground: '#b6ddd0',
      patch: '#d3eddf',
      edge: '#739fab',
      water: '#77c8e6',
      leaves: ['#388e97', '#61b5a4', '#bccce4', '#ffc476'],
      accent: '#fd965f',
      subtitle: 'Climb the ridge. Thread the esses. Brave the open crest.',
    };
  return {
    sky: '#8cc9ec',
    horizon: '#e4f6cf',
    ocean: '#4bbfc1',
    shore: '#efdd9b',
    hill: '#64bd85',
    ground: '#94dc75',
    patch: '#b2e991',
    edge: '#51b891',
    water: '#41cce3',
    leaves: ['#1caf88', '#3dc9a0', '#bde857', '#ffa26f'],
    accent: '#ff6374',
    subtitle:
      name === 'Pinefall Circuit'
        ? 'Big hills. Tiny cars. No room for polite racing.'
        : 'Your corners. Your chaos. Take it for a spin.',
  };
}
export function carPortrait(index: number) {
  const stripe = index === 1 ? '#17254d' : '#fff8e7';
  return `<svg class="ride-art" viewBox="0 0 240 130" aria-hidden="true">
    <ellipse cx="124" cy="108" rx="85" ry="13" fill="#17254d" opacity=".16"/>
    <g stroke="#17254d" stroke-width="3" stroke-linejoin="round">
      <ellipse cx="67" cy="86" rx="16" ry="22" fill="#17254d"/><ellipse cx="67" cy="86" rx="7" ry="11" fill="#fff8e7"/>
      <ellipse cx="176" cy="90" rx="16" ry="22" fill="#17254d"/><ellipse cx="176" cy="90" rx="7" ry="11" fill="#fff8e7"/>
      <path d="M32 62 113 30 213 62 211 83 130 116 32 83Z" fill="currentColor"/>
      <path d="m32 62 98 32 83-32-100-32Z" fill="#fff" opacity=".25" stroke="none"/>
      <path d="m130 94 81-32v21l-81 33Z" fill="#17254d" opacity=".15" stroke="none"/>
      <path d="m58 52 35-28 54 2 31 26-61 23Z" fill="currentColor"/>
      <path d="m64 51 29-23 21 7-2 34Z" fill="#83eaf1"/>
      <path d="m118 36 28-6 25 22-54 19Z" fill="#263f75"/>
      <path d="m139 83 40-16 15 5-40 17Z" fill="${stripe}" stroke="none"/>
      <path d="m165 99 32-13v8l-32 13Z" fill="#fff8e7"/>
      <path d="m39 71 17 6v8l-17-6Z" fill="#ffdb45"/>
      ${index === 3 ? '<path d="m28 54 46-20 12 5-44 20v9l-14-5Z" fill="#ff5068"/>' : ''}
      ${index === 2 ? '<path d="m93 25 10-12 26 1 12 14Z" fill="#ffda45"/>' : ''}
    </g></svg>`;
}