// Per-world visual themes for the looping section background videos.
// Every motion in WorldScene is periodic over durationInFrames, so each
// composition is a perfectly seamless loop. Add a new world by adding an
// entry here + a <Composition> in Root.tsx.

export type Glyph = 'bars' | 'circle' | 'ring' | 'square' | 'dot' | 'play' | 'cart' | 'wrench';

export type Tile = {
  x: number;      // horizontal anchor, % of frame
  y: number;      // vertical anchor, % of frame
  size: number;   // px at 1080p
  a: string;      // gradient top colour
  b: string;      // gradient bottom colour
  depth: number;  // 0 = far (small/blurred/faint) .. 1 = near (large/sharp/bright)
  phase: number;  // drift phase offset (radians)
  dx: number;     // horizontal drift amplitude (px)
  dy: number;     // vertical drift amplitude (px)
  glyph: Glyph;
};

export type WorldTheme = {
  id: string;
  bgTop: string;
  bgBottom: string;
  glowA: string;
  glowB: string;
  tiles: Tile[];
};

const iosTiles: Tile[] = [
  { x: 17, y: 30, size: 196, a: '#0A84FF', b: '#0040DD', depth: 0.95, phase: 0.0, dx: 28, dy: 36, glyph: 'bars' },
  { x: 32, y: 63, size: 132, a: '#34C759', b: '#10A14B', depth: 0.55, phase: 1.1, dx: 20, dy: 26, glyph: 'circle' },
  { x: 45, y: 21, size: 108, a: '#FF9F0A', b: '#FF6B00', depth: 0.42, phase: 2.2, dx: 16, dy: 22, glyph: 'ring' },
  { x: 59, y: 55, size: 214, a: '#BF5AF2', b: '#7A2BE2', depth: 1.0, phase: 0.7, dx: 32, dy: 32, glyph: 'square' },
  { x: 73, y: 31, size: 122, a: '#FF2D55', b: '#FF375F', depth: 0.5, phase: 3.0, dx: 18, dy: 28, glyph: 'dot' },
  { x: 85, y: 61, size: 162, a: '#64D2FF', b: '#0FB5C9', depth: 0.82, phase: 1.8, dx: 26, dy: 24, glyph: 'play' },
  { x: 24, y: 81, size: 98, a: '#5E5CE6', b: '#3634A3', depth: 0.36, phase: 2.6, dx: 14, dy: 18, glyph: 'circle' },
  { x: 51, y: 84, size: 112, a: '#FFD60A', b: '#FFB800', depth: 0.46, phase: 0.4, dx: 16, dy: 20, glyph: 'square' },
  { x: 67, y: 83, size: 86, a: '#63E6BE', b: '#30D0A0', depth: 0.3, phase: 1.5, dx: 12, dy: 16, glyph: 'ring' },
  { x: 9, y: 58, size: 92, a: '#FF6482', b: '#FF2D55', depth: 0.33, phase: 2.0, dx: 13, dy: 18, glyph: 'dot' },
  { x: 91, y: 33, size: 94, a: '#30B0FF', b: '#0A84FF', depth: 0.35, phase: 0.9, dx: 13, dy: 16, glyph: 'circle' },
  { x: 38, y: 43, size: 150, a: '#64D2FF', b: '#0A84FF', depth: 0.72, phase: 2.9, dx: 22, dy: 24, glyph: 'ring' },
  { x: 79, y: 14, size: 80, a: '#5AC8FA', b: '#0A84FF', depth: 0.29, phase: 1.2, dx: 11, dy: 14, glyph: 'play' },
  { x: 7, y: 15, size: 82, a: '#FF9F0A', b: '#FF3B30', depth: 0.31, phase: 0.2, dx: 12, dy: 16, glyph: 'bars' },
];

export const THEMES: Record<string, WorldTheme> = {
  ios: {
    id: 'ios',
    bgTop: '#0b1530',
    bgBottom: '#03050d',
    glowA: '#0A84FF',
    glowB: '#5E5CE6',
    tiles: iosTiles,
  },
};

// Colour + backdrop per world for the Stage-based scenes (everything except ios,
// which uses the bespoke WorldScene). accent = primary, accent2 = secondary glow.
export const WORLDS: Record<string, { accent: string; accent2: string; bgTop: string; bgBottom: string }> = {
  ios: { accent: '#0A84FF', accent2: '#5E5CE6', bgTop: '#0b1530', bgBottom: '#03050d' },
  windows: { accent: '#1B6CF2', accent2: '#3B82F6', bgTop: '#0a1430', bgBottom: '#03060f' },
  android: { accent: '#19C37D', accent2: '#34C759', bgTop: '#06231a', bgBottom: '#03100b' },
  webtools: { accent: '#0FB5C9', accent2: '#22D3EE', bgTop: '#062a30', bgBottom: '#03141a' },
  shop: { accent: '#0F8A4F', accent2: '#C8962B', bgTop: '#0a2418', bgBottom: '#05130d' },
  hosting: { accent: '#14B8A6', accent2: '#2DD4BF', bgTop: '#062422', bgBottom: '#03110f' },
  news: { accent: '#F4B41A', accent2: '#FF9F0A', bgTop: '#2a1f06', bgBottom: '#140f03' },
  'it-hilfe': { accent: '#FF7A45', accent2: '#FF9F0A', bgTop: '#2a1207', bgBottom: '#140803' },
  webdesign: { accent: '#E6259A', accent2: '#0FB5C9', bgTop: '#2a0820', bgBottom: '#14040f' },
};