// Motion catalog + CDN resolver. Mirrors the source-of-truth catalog from the
// dedicated motion site (motion.spencer-russell.com): 31 H.264 720p clips,
// hosted flat on Cloudflare R2 behind videos.spencer-russell.com. We reference
// each clip by its flat filename and resolve to a full CDN URL at runtime, so
// the host is configured in exactly one place. Loads AFTER responsive.jsx and
// BEFORE motion-grid.jsx.
//
// To add/remove/reorder a clip: edit MOTION_REAL. Order here IS display order.
// Drop the encoded .mp4 in the R2 bucket with a matching flat filename. An
// optional `poster` (relative JPG on the same host) can be added later; absent,
// the tile shows the clip's own first frame once it decodes.

// The one place the asset host is configured. Trailing slash matters.
window.VIDEO_CDN_URL = window.VIDEO_CDN_URL || 'https://videos.spencer-russell.com/';

// Relative filename → absolute CDN URL. Absolute/data/blob pass through; a
// legacy "clips/" prefix is tolerated and stripped (kept identical to the
// source site's resolver so every src resolves the same way).
window.resolveClipSrc = window.resolveClipSrc || function (src) {
  if (!src) return src;
  if (/^(https?:|data:|blob:)/i.test(src)) return src;
  const base = window.VIDEO_CDN_URL || '';
  return base + String(src).replace(/^clips\//, '');
};

// label = human title; bg = solid fill shown behind the video while it loads
// (#1a1208 for the warm/gold clips, #0a0a0a otherwise).
const MOTION_REAL = [
  { src: 'Advected_Particles_01_720_web.mp4',         label: 'Advected Particles',          bg: '#0a0a0a' },
  { src: 'Fluid_Rings_01_720_web.mp4',                label: 'Fluid Rings',                 bg: '#0a0a0a' },
  { src: 'Gold_Sun_01_720_web.mp4',                   label: 'Gold Sun',                    bg: '#1a1208' },
  { src: 'Line_Sphere_BW_01_720_web.mp4',             label: 'Line Sphere 01',              bg: '#0a0a0a' },
  { src: 'Line_Sphere_BW_04_720_web.mp4',             label: 'Line Sphere 04',              bg: '#0a0a0a' },
  { src: 'nxPush_01_720_web.mp4',                     label: 'nxPush',                      bg: '#0a0a0a' },
  { src: 'Particle_Circle_03_720_web.mp4',            label: 'Particle Circle 03',          bg: '#0a0a0a' },
  { src: 'Particle_Circle_07_720_web.mp4',            label: 'Particle Circle 07',          bg: '#0a0a0a' },
  { src: 'Particle_Circle_08_720_web.mp4',            label: 'Particle Circle 08',          bg: '#0a0a0a' },
  { src: 'Toon_Cube_of_Cubes_v2_720_web.mp4',         label: 'Toon Cube of Cubes',          bg: '#0a0a0a' },
  { src: 'Veroni_Sphere_3_720_web.mp4',               label: 'Veroni Sphere',               bg: '#0a0a0a' },
  { src: 'Pour_Over_Sphere_01_720_web.mp4',           label: 'Pour Over Sphere',            bg: '#0a0a0a' },
  { src: 'rainbow_topo_full_01_720_web.mp4',          label: 'Rainbow Topo',                bg: '#0a0a0a' },
  { src: 'Toon_Torus_01_720_web.mp4',                 label: 'Toon Torus',                  bg: '#0a0a0a' },
  { src: 'Volume_Builder_Rings_01_720_web.mp4',       label: 'Volume Builder Rings 01',     bg: '#0a0a0a' },
  { src: 'Volume_Builder_Rings_03_720_web.mp4',       label: 'Volume Builder Rings 03',     bg: '#0a0a0a' },
  { src: 'Planet_Warp_01_720_web.mp4',                label: 'Planet Warp',                 bg: '#0a0a0a' },
  { src: 'Simple_Planet_Orbit_Retro_03_720_web.mp4',  label: 'Planet Orbit (Retro)',        bg: '#0a0a0a' },
  { src: 'Particle_Sphere_04_720_web.mp4',            label: 'Particle Sphere',             bg: '#0a0a0a' },
  { src: 'UFO_Abduction_Retro_09_720_web.mp4',        label: 'UFO Abduction (Retro)',       bg: '#0a0a0a' },
  { src: 'Glow_Grid_Texture_16_720_web.mp4',          label: 'Glow Grid',                   bg: '#0a0a0a' },
  { src: 'Gold_Pyramid_Men_Retro_21_720_web.mp4',     label: 'Gold Pyramid Men (Retro)',    bg: '#1a1208' },
  { src: 'Orbit_Ladies_30_720_web.mp4',               label: 'Orbit Ladies',                bg: '#0a0a0a' },
  { src: 'OU_Logo_Iri_Metal_Retro_34_720_web.mp4',    label: 'OU Logo (Iri Metal)',         bg: '#0a0a0a' },
  { src: 'Chrome_Pills_44_720_web.mp4',               label: 'Chrome Pills',                bg: '#0a0a0a' },
  { src: 'Floating_Chain_01_720_web.mp4',             label: 'Floating Chain',              bg: '#0a0a0a' },
  { src: 'Iri_Cloth_Cube_01_720_web.mp4',             label: 'Iri Cloth Cube',              bg: '#0a0a0a' },
  { src: 'Three_Bubbles_02_720_web.mp4',              label: 'Three Bubbles',               bg: '#0a0a0a' },
  { src: 'Spiral_Displace_11_720_web.mp4',            label: 'Spiral Displace',             bg: '#0a0a0a' },
  { src: 'Spiral_Open_VDB_Turbulence_02_720_web.mp4', label: 'Spiral VDB Turbulence',       bg: '#0a0a0a' },
  { src: 'Spiral_Particle_Turbulence_06_720_web.mp4', label: 'Spiral Particle Turbulence',  bg: '#0a0a0a' },
];

// Resolved catalog. id seeds a per-tile playhead offset so adjacent tiles don't
// sync into one looping texture; url is the absolute CDN source.
window.MOTION_CLIPS = MOTION_REAL.map((r, i) => ({
  id: 'c' + String(i + 1).padStart(2, '0'),
  n: i + 1,
  file: r.src,
  url: window.resolveClipSrc(r.src),
  label: r.label,
  bg: r.bg || '#0a0a0a',
  poster: r.poster ? window.resolveClipSrc(r.poster) : undefined,
}));